@charset "UTF-8";
/*#region SCSS Variables */
/*#region Screen sizes */
/*#endregion */
/*#region Spacing sizes */
/* To explicitly match Figma without relying on line-height calculations */
/*#endregion */
/*#region Colours */
/*
Moved to Constants.ChartColours	
$Chart-01: #80ceff;
$Chart-02: #d1a1ef;
$Chart-03: #70e08f;
$Chart-04: #fc888d;
$Chart-05: #fee388;
*/
/*#endregion */
/*#region Font Sizing/Compensations */
/*#endregion */
/*#endregion */
/*#region CSS Variables */
:root {
  --SkillStationDark: #190b2f;
  --SkillStationMedium: #5f4ffc;
  --SkillStationCompanyLogoBackground: #ffffff;
  --SkillStationMenuLinkHover: #ffffff;
  --Neutral-30: #a7a7a9;
  --Green-50: #25a649;
  --Red-50: #f94750;
  --Yellow-50: #fdce35;
}

/*#endregion */
/*#region Mixins */
/*#region Generic sizes */
/*#endregion */
/*#region Font sizes */
/*#endregion */
/*#region Font weights */
/*#endregion */
/*#region Line Spacing */
/*#endregion */
/*#region Font varieties (size + weight + line spacing) */
/*#endregion */
/*#region Elevations */
/*#endregion */
/*#region Components */
/*#endregion*/
/*#region Borders */
/*#endregion */
/*#region Buttons */
/*#endregion */
/*#region Widths*/
/*#endregion */
/*#region Status Messages */
/*#endregion */
/* #region Tags */
/* #endregion */
/* #region Font colours */
/* endregion */
/*#endregion */
/*#region Paragraph widths & font compensations  */
/*#endregion*/
/*#region Gradients*/
/*#endregion */
/*#endregion */
/*#region Standard HTML Elements */
*, ::after, ::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  background-color: #e8e8e8;
  margin: 0;
  padding: 0;
  color: #212127;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  overflow-y: scroll;
}

p,
div,
li,
dt,
dd,
th,
td {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6em;
}

p {
  max-width: 74rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  text-wrap: pretty;
}

li {
  max-width: 74rem;
}

th {
  vertical-align: bottom;
}

td {
  vertical-align: top;
  max-width: 74rem;
}

h1 {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.3em;
  margin-top: 2rem;
  margin-bottom: 5rem;
}
h1.L1-Header {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1em;
}
h1.L3-Header {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.3em;
  margin-top: 0;
  margin-bottom: 3rem;
}
h1.L3-Header span {
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.3em;
  color: #707070;
  white-space: nowrap;
}
h1 .BrandedIcon {
  width: 1em;
  height: 1em;
  mask-size: 1em 1em;
  -webkit-mask-size: 1em 1em;
}
h1 .BrandedIconLinkComponent {
  vertical-align: sub;
}
h1 span.SideHeader {
  color: #707070;
}

h2 {
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
}

h3 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6em;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

h1 img,
h2 img,
h3 img {
  height: 1.5em;
  vertical-align: bottom;
}

section > h2:first-of-type,
.FormGroup > h2:first-of-type {
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.3em;
}

.SubHeaderAndValue {
  margin: 0.5rem 0;
}
.SubHeaderAndValue .SubHeader {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6em;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.SubHeaderAndValue .Value {
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.3em;
  margin-top: 0;
  margin-bottom: 0;
  color: #707070;
}

a:not(.ButtonPrimary),
button:not(.ButtonPrimary) {
  color: #212127;
}

button {
  font-family: inherit;
}

a {
  text-underline-offset: 0.2em;
}
a:visited {
  color: #212127;
}
a:hover {
  color: #a7a7a9;
}
a:visited:hover {
  color: #a7a7a9;
}
a.Disabled {
  color: #a7a7a9;
}

table {
  border-spacing: 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #dededf;
  background-color: #ffffff;
}

dl dt {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6em;
  margin: 1.5rem;
}
dl dd {
  margin-bottom: 1.5rem;
}
dl dd:not(:last-of-type) {
  margin-bottom: 1.5rem;
}

input[type=text],
input[type=date],
input[type=color],
input[type=datetime],
input[type=email],
input[type=file],
input[type=password],
input[type=tel],
input[type=url],
input[type=number],
input[type=button],
input[type=submit],
select,
textarea,
.TypeAheadComponent .TypeAhead .FakeSelectListWithButton div,
.TypeAheadComponent .TypeAheadSelectContainer ul li {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6em;
}

input[type=text],
input[type=date],
input[type=color],
input[type=datetime],
input[type=email],
input[type=password],
input[type=tel],
input[type=url],
input[type=number],
input[type=button],
input[type=submit],
select,
textarea {
  padding: 0.8rem 1rem 0.8rem 1rem;
}

input[type=text],
input[type=date],
input[type=color],
input[type=datetime],
input[type=email],
input[type=password],
input[type=tel],
input[type=url],
input[type=number],
select,
textarea {
  border: 0.2rem solid #a7a7a9;
  border-radius: 0.5rem;
  background-color: #ffffff;
}
input[type=text][readonly],
input[type=date][readonly],
input[type=color][readonly],
input[type=datetime][readonly],
input[type=email][readonly],
input[type=password][readonly],
input[type=tel][readonly],
input[type=url][readonly],
input[type=number][readonly],
select[readonly],
textarea[readonly] {
  border-color: #e8e8e8;
  cursor: default;
}

input[type=text],
input[type=date],
input[type=color],
input[type=datetime],
input[type=email],
input[type=file],
input[type=password],
input[type=tel],
input[type=url],
input[type=number],
select {
  text-box-edge: cap alphabetic;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(/Images/Icons/DropSelectionArrow.svg), url(/Images/Components/SelectComponentVerticalSeparator.svg);
  background-position: right 1.1rem top 1.5rem, right 3.2rem top 0.4rem;
  background-repeat: no-repeat, no-repeat;
  background-size: 1rem 1rem, 1px 3rem;
  padding-right: 5rem;
  text-overflow: ellipsis;
}
select option.Archived {
  color: #57575a;
}

textarea {
  height: 12rem;
  resize: vertical;
}

input {
  accent-color: #212127;
}
input[type=checkbox] {
  outline: none;
  content: none;
  appearance: none;
  margin: 0;
}
input[type=checkbox]::before, input[type=checkbox]:hover::before, input[type=checkbox]:active::before, input[type=checkbox]:disabled::before {
  width: 1rem;
  height: 1rem;
  transform: scale(0.9);
  color: transparent !important;
  display: inline-block;
  margin-right: 0.5rem;
}
input[type=checkbox]::before {
  content: url(/Images/Components/CheckboxUnchecked.svg);
}
input[type=checkbox]:hover::before {
  content: url(/Images/Components/CheckboxHover.svg);
}
input[type=checkbox]:checked::before {
  content: url(/Images/Components/CheckboxChecked.svg);
}
input[type=checkbox]:disabled::before {
  content: url(/Images/Components/CheckboxDisabled.svg);
}
input[type=checkbox]:checked:disabled::before {
  content: url(/Images/Components/CheckboxCheckedDisabled.svg);
}

hr {
  height: 1.5rem;
  color: transparent;
  background-color: transparent;
  margin-top: 0;
  margin-bottom: 1.5rem;
  border: none;
  border-bottom: 1px solid #dededf;
}

/*#endregion */
/* #region Generic classes */
.Phantom {
  visibility: hidden;
}

.Hidden {
  display: none;
}

.InlineCheckboxList {
  display: flex;
  flex-direction: row;
  gap: 5rem;
}
.InlineCheckboxList > div {
  flex: 0 1 auto;
}
.InlineCheckboxList > div > label {
  display: flex;
  flex-wrap: nowrap;
  line-height: 1.5em;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.InlineCheckboxList > div > label input[type=checkbox] {
  margin-top: 4px;
  margin-left: 0;
  margin-right: 1rem;
}
.InlineCheckboxList > div > label:has(input[type=checkbox]:focus-visible) {
  outline: 0.2rem solid #212127;
}

.Important {
  font-weight: 700;
  color: #f94750;
}

.GroupSelectionLabel {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6em;
}

.ExceptionDetails {
  padding: 0.5rem;
  background-color: #dededf;
  max-width: 100%;
  overflow-x: scroll;
  max-height: 80vh;
}
.ExceptionDetails code {
  white-space: pre;
}

.Raised {
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  padding: 2rem;
}

.ProfilePhoto > img,
.ProfilePhoto > span {
  border-radius: 1rem;
  width: 110px;
  height: 110px;
}
.ProfilePhoto.Small > img,
.ProfilePhoto.Small > span {
  width: 70px;
  height: 70px;
}
.ProfilePhoto > img {
  object-fit: cover;
}
.ProfilePhoto > span {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.3em;
  color: #ffffff;
  background-color: var(--SkillStationDark);
  text-align: center;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}

.NoWrap {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
}
.NoWrap.NoWrapVerticalCentre {
  align-items: center;
}

.NoWrapInline {
  white-space: nowrap;
}

.InlineListTabSeparator ul,
.InlineListTabSeparator ol {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}
.InlineListTabSeparator ul li,
.InlineListTabSeparator ol li {
  margin: 0;
  padding: 0;
}
.InlineListTabSeparator ul li:not(:last-child)::after,
.InlineListTabSeparator ol li:not(:last-child)::after {
  display: inline-block;
  content: "|";
  margin: 0 1.5rem;
  color: #a7a7a9;
}

/* #endregion */
/*#region Navigation Menu & Company Logo */
.OuterContainer .SideOne {
  background-color: #fcfcfc;
  min-width: 29rem;
}
.OuterContainer .SideOne .CompanyLogoHolder {
  display: none;
}
.OuterContainer .SideOne .MobileAndSmallMenu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  gap: 1.5rem;
  padding: 1.5rem 2rem 1.5rem 2rem;
}
.OuterContainer .SideOne .MobileAndSmallMenu div {
  /* Prevent all from expanding, apart from .Hamburger which should fill all space */
  flex-grow: 0;
  flex-shrink: 0;
  /* Removes line-heights so that text fits tightly against the rendered space it resides within.  Use when tight vertical alignment is needed between adjacent items, or when container padding appears too great. */
  line-height: 0;
}
.OuterContainer .SideOne .MobileAndSmallMenu .Hamburger {
  flex-grow: 1;
  flex-shrink: 1;
}
.OuterContainer .SideOne .MobileAndSmallMenu .Collapse {
  display: none;
}
.OuterContainer .SideOne .DeityCustomerChange {
  padding: 1rem;
  background-color: #f1f1f1;
}
.OuterContainer .SideOne .DeityCustomerChange .TypeAheadComponent {
  max-width: 100%;
  margin-bottom: 0;
}
.OuterContainer .SideOne .LearnerAdminMenus {
  display: none;
}
.OuterContainer .SideOne .LearnerAdminMenus ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.OuterContainer .SideOne .LearnerAdminMenus ul li {
  margin: 0;
  padding: 0;
}
.OuterContainer .SideOne .LearnerAdminMenus ul li a {
  text-decoration: none;
}
.OuterContainer .SideOne .LearnerAdminMenus .PersonalAdminSwitch {
  padding: 1rem 2rem 1rem 2rem;
  background-color: #fcfcfc;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}
.OuterContainer .SideOne .LearnerAdminMenus .PersonalAdminSwitch ul {
  background-color: #dededf;
  box-shadow: inset 0 1px 1px rgb(167, 167, 169);
  border-radius: 0.5rem;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0.5rem;
  /* Contextual/Selected states set further down  */
}
.OuterContainer .SideOne .LearnerAdminMenus .PersonalAdminSwitch ul li {
  width: 50%;
}
.OuterContainer .SideOne .LearnerAdminMenus .PersonalAdminSwitch ul li a {
  border-radius: 0.3rem;
  font-weight: 700;
  display: block;
  text-align: center;
  padding: 0.5rem;
}
.OuterContainer .SideOne .LearnerAdminMenus .LearnerMenu,
.OuterContainer .SideOne .LearnerAdminMenus .AdminMenu {
  background-color: #ffffff;
}
.OuterContainer .SideOne .LearnerAdminMenus .LearnerMenu ul,
.OuterContainer .SideOne .LearnerAdminMenus .AdminMenu ul {
  padding-top: 0;
  padding-bottom: 0;
}
.OuterContainer .SideOne .LearnerAdminMenus .LearnerMenu ul li,
.OuterContainer .SideOne .LearnerAdminMenus .AdminMenu ul li {
  white-space: nowrap;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.OuterContainer .SideOne .LearnerAdminMenus .LearnerMenu ul li .NavigationMenuLink,
.OuterContainer .SideOne .LearnerAdminMenus .AdminMenu ul li .NavigationMenuLink {
  display: block;
  border-right: 0.5rem solid transparent;
  padding: 0.5rem 2rem 0.5rem 2rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  align-content: space-between;
  align-items: center;
}
.OuterContainer .SideOne .LearnerAdminMenus .LearnerMenu ul li .NavigationMenuLink .BrandedIcon,
.OuterContainer .SideOne .LearnerAdminMenus .LearnerMenu ul li .NavigationMenuLink .BrandedIconLinkComponent,
.OuterContainer .SideOne .LearnerAdminMenus .AdminMenu ul li .NavigationMenuLink .BrandedIcon,
.OuterContainer .SideOne .LearnerAdminMenus .AdminMenu ul li .NavigationMenuLink .BrandedIconLinkComponent {
  min-width: 3rem;
}
.OuterContainer .SideOne .LearnerAdminMenus .LearnerMenu ul li .NavigationMenuLink span:nth-child(2),
.OuterContainer .SideOne .LearnerAdminMenus .AdminMenu ul li .NavigationMenuLink span:nth-child(2) {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.OuterContainer .SideOne .LearnerAdminMenus .LearnerMenu ul li .NavigationMenuLink:hover,
.OuterContainer .SideOne .LearnerAdminMenus .AdminMenu ul li .NavigationMenuLink:hover {
  color: unset;
  background-color: #e8e8e8;
  border-right-color: #dededf;
}
.OuterContainer .SideOne .LearnerAdminMenus .LearnerMenu ul li .NavigationMenuLink[aria-current=page],
.OuterContainer .SideOne .LearnerAdminMenus .AdminMenu ul li .NavigationMenuLink[aria-current=page] {
  background-color: var(--SkillStationMenuLinkHover);
  border-right-color: var(--SkillStationMedium);
}
.OuterContainer .SideOne .LearnerAdminMenus .LearnerMenu ul li:nth-child(1),
.OuterContainer .SideOne .LearnerAdminMenus .AdminMenu ul li:nth-child(1) {
  padding-top: 1rem;
}
.OuterContainer .SideTwo .PageContent {
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  background-color: #fcfcfc;
  padding: 1rem;
}

@media all and (min-width: 1025px) {
  .OuterContainer {
    display: flex;
    flex-wrap: nowrap;
    min-height: 100vh;
  }
  .OuterContainer .SideOne {
    position: sticky;
    top: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    flex-shrink: 0;
    width: 29rem;
    background-color: #fcfcfc;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }
  .OuterContainer .SideOne .CompanyLogoHolder {
    display: block;
    text-align: center;
    background-color: #ffffff;
    background-color: var(--SkillStationCompanyLogoBackground);
    /* Removes line-heights so that text fits tightly against the rendered space it resides within.  Use when tight vertical alignment is needed between adjacent items, or when container padding appears too great. */
    line-height: 0;
    padding: 1rem 2rem 1rem 2rem;
    height: 80px;
  }
  .OuterContainer .SideOne .CompanyLogoHolder img {
    max-height: 6rem;
    max-width: 100%;
  }
  .OuterContainer .SideOne .MobileAndSmallMenu {
    order: 99;
    justify-content: space-between;
    background-color: #190b2f;
    background-color: var(--SkillStationDark);
    border-top: 0.5rem solid #5f4ffc;
    border-top: 0.5rem solid var(--SkillStationMedium);
    padding-bottom: 2rem;
  }
  .OuterContainer .SideOne .MobileAndSmallMenu .Hamburger {
    display: none;
  }
  .OuterContainer .SideOne .MobileAndSmallMenu .LogOut {
    order: 0;
  }
  .OuterContainer .SideOne .MobileAndSmallMenu .Collapse {
    display: block;
  }
  .OuterContainer .SideOne .MobileAndSmallMenu .BrandedIconLinkComponent > span {
    background-color: #ffffff;
  }
  .OuterContainer .SideOne .LearnerAdminMenus {
    display: block;
    flex: 1;
  }
  .OuterContainer .SideTwo {
    flex-grow: 1;
    flex-shrink: 1;
    padding: 3rem 1rem 1rem 3rem;
    max-width: calc(100% - 310px);
  }
  .OuterContainer .SideTwo .PageContent {
    padding: 3rem 3rem 5rem 3rem;
    max-width: 1280px;
  }
}
/* Hamburger menu state (show/hide menu instead of page content) */
body.HamburgerClicked .OuterContainer .SideOne .LearnerAdminMenus {
  display: block;
}
body.HamburgerClicked .OuterContainer .SideTwo {
  display: none;
}

/* STATE: User / admin context menu switch */
.LearnerAdminMenus {
  /* JavaScript in Master Page must be updated to reflect these class names which are added/removed in code */
}
.LearnerAdminMenus .LearnerMenu {
  display: none;
}
.LearnerAdminMenus .AdminMenu {
  display: none;
}
.LearnerAdminMenus .UserContext .PersonalAdminSwitch ul li a,
.LearnerAdminMenus .AdminContext .PersonalAdminSwitch ul li a {
  line-height: 0;
}
.LearnerAdminMenus .UserContext .PersonalAdminSwitch ul li a span,
.LearnerAdminMenus .AdminContext .PersonalAdminSwitch ul li a span {
  display: inline-block;
  vertical-align: middle;
}
.LearnerAdminMenus .UserContext .PersonalAdminSwitch ul li a span.Icon,
.LearnerAdminMenus .AdminContext .PersonalAdminSwitch ul li a span.Icon {
  width: 2rem;
  height: 2rem;
  margin-right: 0.5rem;
  background-size: 2rem 2rem;
  background-repeat: no-repeat;
  background-position: center center;
  vertical-align: middle;
}
.LearnerAdminMenus .UserContext .PersonalAdminSwitch ul li:first-of-type a {
  background-color: #ffffff;
  box-shadow: 0 1px 1px rgb(167, 167, 169);
}
.LearnerAdminMenus .UserContext .PersonalAdminSwitch ul li:first-of-type a span.Icon {
  background-image: url(/Images/NavigationBar/Username.svg);
}
.LearnerAdminMenus .UserContext .PersonalAdminSwitch ul li:last-of-type a {
  color: #57575a;
}
.LearnerAdminMenus .UserContext .PersonalAdminSwitch ul li:last-of-type a span {
  position: relative;
  top: 0.1rem;
}
.LearnerAdminMenus .UserContext .PersonalAdminSwitch ul li:last-of-type a span.Icon {
  background-image: url(/Images/NavigationBar/Admin_Grey.svg);
}
.LearnerAdminMenus .UserContext .LearnerMenu {
  display: block;
}
.LearnerAdminMenus .AdminContext .PersonalAdminSwitch ul li:first-of-type a {
  color: #57575a;
}
.LearnerAdminMenus .AdminContext .PersonalAdminSwitch ul li:first-of-type a span {
  position: relative;
  top: 0.1rem;
}
.LearnerAdminMenus .AdminContext .PersonalAdminSwitch ul li:first-of-type a span.Icon {
  background-image: url(/Images/NavigationBar/Username_Grey.svg);
}
.LearnerAdminMenus .AdminContext .PersonalAdminSwitch ul li:last-of-type a {
  background-color: #ffffff;
  box-shadow: 0 1px 1px rgb(167, 167, 169);
}
.LearnerAdminMenus .AdminContext .PersonalAdminSwitch ul li:last-of-type a span.Icon {
  background-image: url(/Images/NavigationBar/Admin.svg);
}
.LearnerAdminMenus .AdminContext .AdminMenu {
  display: block;
}

/* STATE: Collapsed/Expanded side menu */
@media all and (min-width: 1025px) {
  .OuterContainer .SideOne {
    max-width: 70px;
  }
  .OuterContainer .SideOne.Collapsed {
    width: auto;
    min-width: unset;
  }
  .OuterContainer .SideOne.Collapsed .CompanyLogoHolder img {
    display: none;
  }
  .OuterContainer .SideOne.Collapsed .MobileAndSmallMenu {
    justify-content: center;
  }
  .OuterContainer .SideOne.Collapsed .MobileAndSmallMenu .LogOut {
    display: none;
  }
  .OuterContainer .SideOne.Collapsed .MobileAndSmallMenu .AdminConfiguration {
    display: none;
  }
  .OuterContainer .SideOne.Collapsed .MobileAndSmallMenu .MenuHelp {
    display: none;
  }
  .OuterContainer .SideOne.Collapsed .MobileAndSmallMenu .Collapse {
    transform: rotate(180deg);
  }
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus {
    /* STATE ONLY - User/Admin switch button icons */
  }
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus .PersonalAdminSwitch {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus .PersonalAdminSwitch ul {
    /* Shrink the switch */
  }
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus .PersonalAdminSwitch ul li {
    width: unset;
  }
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus .PersonalAdminSwitch ul li a span.Icon {
    margin-right: 0;
  }
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus .PersonalAdminSwitch ul li a span:last-of-type {
    /* Hide link switch link text */
    display: none;
  }
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus .LearnerMenu ul li a,
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus .AdminMenu ul li a {
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus .LearnerMenu ul li a .BrandedIconLinkComponent,
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus .AdminMenu ul li a .BrandedIconLinkComponent {
    margin-right: 0;
  }
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus .LearnerMenu ul li a span:nth-child(2),
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus .AdminMenu ul li a span:nth-child(2) {
    display: none;
  }
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus .UserContext .PersonalAdminSwitch ul li:last-of-type {
    display: none;
  }
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus .AdminContext .PersonalAdminSwitch ul {
    justify-content: flex-end;
  }
  .OuterContainer .SideOne.Collapsed .LearnerAdminMenus .AdminContext .PersonalAdminSwitch ul li:first-of-type {
    display: none;
  }
}
/*#endregion */
/* #region Admin page menus */
.AdminLinkMenuContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1380px;
  margin-top: 12rem;
}
.AdminLinkMenuContainer .AdminLinkMenu {
  flex: 0 0 32rem;
  background-color: #fcfcfc;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.AdminLinkMenuContainer .AdminLinkMenu h3 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1em;
  margin: 0;
  padding: 1rem 2rem 1rem 2rem;
  background-color: #e8e8e8;
  color: #212127;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.AdminLinkMenuContainer .AdminLinkMenu ul {
  list-style-type: none;
  margin: 0;
  padding: 1.5rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 1rem;
}
.AdminLinkMenuContainer .AdminLinkMenu ul li {
  margin: 0;
  padding: 0;
}
.AdminLinkMenuContainer .AdminLinkMenu ul li a {
  display: block;
  color: #212127;
  text-decoration: none;
}
.AdminLinkMenuContainer .AdminLinkMenu ul li a:visited {
  color: #212127;
}
.AdminLinkMenuContainer .AdminLinkMenu ul li a:hover {
  text-decoration: underline;
}

/*#endregion */
/*#region Personal Dashboard */
.MyPersonalDashboard {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
}
.MyPersonalDashboard .MyDetails,
.MyPersonalDashboard .CompetencyOverview,
.MyPersonalDashboard .Notifications,
.MyPersonalDashboard .MyTasks,
.MyPersonalDashboard .AdministratorTasks {
  background-color: #fcfcfc;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border: 1px solid #e8e8e8;
  max-width: 32rem;
  width: 32rem;
  padding: 2rem 2rem 3rem 2rem;
  border-radius: 1rem;
}
.MyPersonalDashboard .MyDetails h3,
.MyPersonalDashboard .CompetencyOverview h3,
.MyPersonalDashboard .Notifications h3,
.MyPersonalDashboard .MyTasks h3,
.MyPersonalDashboard .AdministratorTasks h3 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1em;
  margin-top: 0rem;
  margin-bottom: 2rem;
}
.MyPersonalDashboard .MyDetails a,
.MyPersonalDashboard .CompetencyOverview a,
.MyPersonalDashboard .Notifications a,
.MyPersonalDashboard .MyTasks a,
.MyPersonalDashboard .AdministratorTasks a {
  text-decoration: none;
}
.MyPersonalDashboard .MyDetails a:hover, .MyPersonalDashboard .MyDetails a:visited:hover,
.MyPersonalDashboard .CompetencyOverview a:hover,
.MyPersonalDashboard .CompetencyOverview a:visited:hover,
.MyPersonalDashboard .Notifications a:hover,
.MyPersonalDashboard .Notifications a:visited:hover,
.MyPersonalDashboard .MyTasks a:hover,
.MyPersonalDashboard .MyTasks a:visited:hover,
.MyPersonalDashboard .AdministratorTasks a:hover,
.MyPersonalDashboard .AdministratorTasks a:visited:hover {
  color: initial;
}
.MyPersonalDashboard .MyDetails h3 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.MyPersonalDashboard .MyDetails dl dt {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1em;
  color: #707070;
  margin: 0 0 0.5rem 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.MyPersonalDashboard .MyDetails dl dd {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1em;
  color: #212127;
  margin: 0 0 2rem 0;
  padding: 0;
}
.MyPersonalDashboard .DashboardCounterWidget { /* All widgets in all containers */
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  background-color: #ffffff;
  border-radius: 0.5rem;
}
.MyPersonalDashboard .DashboardCounterWidget:not(:first-of-type) {
  margin-top: 1rem;
}
.MyPersonalDashboard .DashboardCounterWidget:not(:last-of-type) {
  margin-bottom: 1rem;
}
.MyPersonalDashboard .DashboardCounterWidget > a {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 1rem;
  height: 5rem;
}
.MyPersonalDashboard .DashboardCounterWidget > a .DashboardCounterWidgetNumber,
.MyPersonalDashboard .DashboardCounterWidget > a .DashboardCounterWidgetIcon {
  flex: 0 0 5rem;
  border-left: 0.7rem solid black;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  width: 5rem;
  /* 👇 Aligns .number inside vertically/horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
}
.MyPersonalDashboard .DashboardCounterWidget > a .DashboardCounterWidgetNumber .number {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1em;
}
.MyPersonalDashboard .DashboardCounterWidget > a .DashboardCounterWidgetText {
  flex: 1 1 auto;
  /* 👇 Aligns .number inside vertically/horizontally */
  display: flex;
  align-items: center;
  justify-content: left;
}
.MyPersonalDashboard .DashboardCounterWidget > a .DashboardCounterWidgetCountPlusDescription {
  flex: 1 1 auto;
  /* 👇 Vertically space content inside to fill widget height */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.5rem;
}
.MyPersonalDashboard .DashboardCounterWidget > a .DashboardCounterWidgetCountPlusDescription .ObjectName {
  flex: 1 1 auto;
  color: #707070;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-content: end;
}
.MyPersonalDashboard .DashboardCounterWidget > a .DashboardCounterWidgetCountPlusDescription .ObjectCount {
  flex: 1 1 auto;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1em;
}
.MyPersonalDashboard .DashboardCounterWidget > a .DashboardCounterWidgetArrow {
  flex: 0 0 3rem;
  background-color: #e8e8e8;
  background-image: url(/Images/v3/Arrow-Right.svg);
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.MyPersonalDashboard .DashboardCounterWidget.Danger > a .DashboardCounterWidgetIcon,
.MyPersonalDashboard .DashboardCounterWidget.Danger > a .DashboardCounterWidgetNumber {
  border-left-color: #f94750;
  background-color: #feebec;
}
.MyPersonalDashboard .DashboardCounterWidget.Danger > a .DashboardCounterWidgetIcon .BrandedIconLinkComponent span,
.MyPersonalDashboard .DashboardCounterWidget.Danger > a .DashboardCounterWidgetNumber .BrandedIconLinkComponent span {
  background-color: #f94750;
}
.MyPersonalDashboard .DashboardCounterWidget.Warning > a .DashboardCounterWidgetIcon,
.MyPersonalDashboard .DashboardCounterWidget.Warning > a .DashboardCounterWidgetNumber {
  border-left-color: #fdce35;
  background-color: #fff5d7;
}
.MyPersonalDashboard .DashboardCounterWidget.Warning > a .DashboardCounterWidgetIcon .BrandedIconLinkComponent span,
.MyPersonalDashboard .DashboardCounterWidget.Warning > a .DashboardCounterWidgetNumber .BrandedIconLinkComponent span {
  background-color: #fdce35;
}
.MyPersonalDashboard .DashboardCounterWidget.Success > a .DashboardCounterWidgetIcon,
.MyPersonalDashboard .DashboardCounterWidget.Success > a .DashboardCounterWidgetNumber {
  border-left-color: #25a649;
  background-color: #deffe7;
}
.MyPersonalDashboard .DashboardCounterWidget.Success > a .DashboardCounterWidgetIcon .BrandedIconLinkComponent span,
.MyPersonalDashboard .DashboardCounterWidget.Success > a .DashboardCounterWidgetNumber .BrandedIconLinkComponent span {
  background-color: #25a649;
}
.MyPersonalDashboard .DashboardCounterWidget.Neutral > a .DashboardCounterWidgetIcon,
.MyPersonalDashboard .DashboardCounterWidget.Neutral > a .DashboardCounterWidgetNumber {
  border-left-color: #3f3f45;
  background-color: #fcfcfc;
}
.MyPersonalDashboard .DashboardCounterWidget.Neutral > a .DashboardCounterWidgetIcon .BrandedIconLinkComponent span,
.MyPersonalDashboard .DashboardCounterWidget.Neutral > a .DashboardCounterWidgetNumber .BrandedIconLinkComponent span {
  background-color: #3f3f45;
}
.MyPersonalDashboard .DashboardCounterWidget.NextEvent > a {
  height: unset;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3em;
}
.MyPersonalDashboard .DashboardCounterWidget.NextEvent > a .DashboardCounterWidgetIcon {
  border-left-color: #57575a;
  background-color: #e8e8e8;
  background-image: url(/Images/v3/Event_Calendar.svg);
  background-repeat: no-repeat;
  background-position: center center;
}
.MyPersonalDashboard .DashboardCounterWidget.NextEvent > a .DashboardCounterWidgetCountPlusDescription {
  gap: 0;
  overflow: hidden;
  padding: 0.5rem 0;
}
.MyPersonalDashboard .DashboardCounterWidget.NextEvent > a .DashboardCounterWidgetCountPlusDescription .NextEvent {
  color: #707070;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1em;
}
.MyPersonalDashboard .DashboardCounterWidget.NextEvent > a .DashboardCounterWidgetCountPlusDescription .NextEventTitle {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.MyPersonalDashboard .DashboardCounterWidget.NextEvent > a .DashboardCounterWidgetCountPlusDescription .NextEventDate {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1em;
  color: #707070;
}
.MyPersonalDashboard .DashboardCounterWidget:hover {
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.3333333333);
}
.MyPersonalDashboard .DashboardCounterWidget:hover.Danger > a .DashboardCounterWidgetNumber {
  border-left-color: #ff747a;
}
.MyPersonalDashboard .DashboardCounterWidget:hover.Success > a .DashboardCounterWidgetNumber {
  border-left-color: #4ad571;
}
.MyPersonalDashboard .DashboardCounterWidget:hover.Warning > a .DashboardCounterWidgetNumber {
  border-left-color: #ffde72;
}
.MyPersonalDashboard .DashboardCounterWidget:hover.Neutral > a .DashboardCounterWidgetNumber {
  border-left-color: #57575a;
}
.MyPersonalDashboard .DashboardCounterWidget:hover .DashboardCounterWidgetArrow {
  background-color: #dededf;
}
.MyPersonalDashboard .CompetencyOverview .DonutChartContainer {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.MyPersonalDashboard .CompetencyOverview .DonutChartContainer .DonutChart {
  margin-left: auto;
  margin-right: auto;
  width: 12rem;
  height: 12rem;
  max-width: 100%;
  border-radius: 100%;
}
.MyPersonalDashboard .CompetencyOverview .DonutChartContainer .DonutChart .DonutCentre {
  text-align: center;
  border-radius: 100%;
  height: 60%;
  width: 60%;
  position: relative;
  left: 20%;
  top: 20%;
  background-color: #ffffff;
}
.MyPersonalDashboard .CompetencyOverview .DonutChartContainer .DonutChart .DonutCentre a {
  display: block;
}
.MyPersonalDashboard .CompetencyOverview .DonutChartContainer .DonutChart .DonutCentre a span {
  display: block;
  text-align: center;
}
.MyPersonalDashboard .CompetencyOverview .DonutChartContainer .DonutChart .DonutCentre a span:first-of-type {
  font-size: 250%;
  font-weight: 600;
  padding-top: 20%;
}
.MyPersonalDashboard .CompetencyOverview .TargetAchievedWidget .DashboardCounterWidgetNumber {
  border-left-color: #25a649;
}
.MyPersonalDashboard .CompetencyOverview .TargetAchievedWidget span:first-of-type {
  background-color: #deffe7;
}
.MyPersonalDashboard .CompetencyOverview .ExpiringWidget .DashboardCounterWidgetNumber {
  border-left-color: #fdce35;
}
.MyPersonalDashboard .CompetencyOverview .ExpiringWidget span:first-of-type {
  background-color: #fff5d7;
}
.MyPersonalDashboard .CompetencyOverview .ExpiredWidget .DashboardCounterWidgetNumber {
  border-left-color: #f94750;
}
.MyPersonalDashboard .CompetencyOverview .ExpiredWidget span:first-of-type {
  background-color: #feebec;
}
.MyPersonalDashboard .CompetencyOverview .BelowTargetWidget .DashboardCounterWidgetNumber {
  border-left-color: #f94750;
}
.MyPersonalDashboard .CompetencyOverview .BelowTargetWidget span:first-of-type {
  background-color: #feebec;
}
.MyPersonalDashboard .CompetencyOverview .NoCompetencyWidget .DashboardCounterWidgetNumber {
  border-left-color: #a7a7a9;
}
.MyPersonalDashboard .CompetencyOverview .NoCompetencyWidget span:first-of-type {
  background-color: #dededf;
}
.MyPersonalDashboard .CompetencyOverview .ViewFullRecord {
  margin-top: 2rem;
}

@media all and (min-width: 769px) {
  .MyPersonalDashboard {
    display: inline-grid;
    grid-gap: 2rem;
    grid-template-areas: "MyDetailsContainer CompetencyOverviewContainer" "NotificationsContainer MyTasksContainer" "AdministratorTasksContainer .";
    /* Containers are required to stop the background elevation colours stretching to the shape of the grid items */
  }
  .MyPersonalDashboard .MyDetailsContainer {
    grid-area: MyDetailsContainer;
  }
  .MyPersonalDashboard .CompetencyOverviewContainer {
    grid-area: CompetencyOverviewContainer;
  }
  .MyPersonalDashboard .NotificationsContainer {
    grid-area: NotificationsContainer;
  }
  .MyPersonalDashboard .MyTasksContainer {
    grid-area: MyTasksContainer;
  }
  .MyPersonalDashboard .AdministratorTasksContainer {
    grid-area: AdministratorTasksContainer;
  }
}
@media all and (min-width: 1380px) {
  .MyPersonalDashboard {
    grid-template-areas: "MyDetailsContainer CompetencyOverviewContainer NotificationsContainer" "MyDetailsContainer CompetencyOverviewContainer MyTasksContainer" "MyDetailsContainer CompetencyOverviewContainer AdministratorTasksContainer" "MyDetailsContainer CompetencyOverviewContainer .";
  }
}
/*#endregion */
/* #region BrandedIcon */
.BrandedIcon {
  display: inline-block;
  mask-repeat: no-repeat;
  background-color: #5f4ffc;
  background-color: var(--SkillStationMedium);
}

.BrandedIconLinkComponent {
  display: inline-flex;
  width: 3rem;
  height: 3rem;
}
.BrandedIconLinkComponent span {
  flex: 1 0 auto;
  mask-size: 3rem;
  mask-repeat: no-repeat;
  background-color: #5f4ffc;
  background-color: var(--SkillStationMedium);
}

.IconLinkComponent:hover {
  background-color: #dededf;
}

/* #endregion */
/* #region EditForm */
.EditForm .FormGroup .ComponentRow {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.EditForm .FormGroup .ComponentRow > .CheckBoxComponent,
.EditForm .FormGroup .ComponentRow > .DatePickerComponent,
.EditForm .FormGroup .ComponentRow > .FileUploadComponent,
.EditForm .FormGroup .ComponentRow > .SelectComponent,
.EditForm .FormGroup .ComponentRow > .TextComponent,
.EditForm .FormGroup .ComponentRow > .IntegerComponent,
.EditForm .FormGroup .ComponentRow > .CheckBoxListComponent,
.EditForm .FormGroup .ComponentRow > .ListBoxComponent,
.EditForm .FormGroup .ComponentRow > .TypeAheadComponent,
.EditForm .FormGroup .ComponentRow > .DoubleComponent,
.EditForm .FormGroup .ComponentRow > .OrgHierarchyComponent,
.EditForm .FormGroup .ComponentRow > .RoomPickerComponent,
.EditForm .FormGroup .ComponentRow > .ReadOnlyComponent,
.EditForm .FormGroup .ComponentRow > .CurrencyComponent {
  margin-bottom: 0;
}

@media all and (min-width: 769px) {
  .EditForm .FormGroup .ComponentRow > div:not(.ComponentRowColumn):not(.SkillSearchComponentContainer) {
    flex: 1 1 auto;
  }
  .EditForm .FormGroup .ComponentRow > .SkillSearchComponentContainer {
    flex: 0 1 auto;
  }
  .EditForm .FormGroup .ComponentRow > .ComponentRowColumn {
    flex: 0 0 auto;
  }
}
.Overlay {
  background-color: #ffffff;
  box-shadow: 2px 6px 10px rgba(63, 63, 69, 0.15);
}

/* #endregion */
/* #region Form Components */
.ValidationMessage,
.validation-message {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6em;
  color: #f94750;
  margin-bottom: 1rem;
  padding-left: 0.3rem;
}

.CheckBoxComponent,
.DatePickerComponent,
.FileUploadComponent,
.SelectComponent,
.TextComponent,
.IntegerComponent,
.CheckBoxListComponent,
.ListBoxComponent,
.TypeAheadComponent,
.DoubleComponent,
.OrgHierarchyComponent,
.RoomPickerComponent,
.ReadOnlyComponent,
.CurrencyComponent {
  max-width: 32rem;
  width: 32rem;
  margin-bottom: 1.5rem;
}
.CheckBoxComponent.Width50,
.DatePickerComponent.Width50,
.FileUploadComponent.Width50,
.SelectComponent.Width50,
.TextComponent.Width50,
.IntegerComponent.Width50,
.CheckBoxListComponent.Width50,
.ListBoxComponent.Width50,
.TypeAheadComponent.Width50,
.DoubleComponent.Width50,
.OrgHierarchyComponent.Width50,
.RoomPickerComponent.Width50,
.ReadOnlyComponent.Width50,
.CurrencyComponent.Width50 {
  max-width: 15rem;
  width: 15rem;
}
.CheckBoxComponent.WidthSquished,
.DatePickerComponent.WidthSquished,
.FileUploadComponent.WidthSquished,
.SelectComponent.WidthSquished,
.TextComponent.WidthSquished,
.IntegerComponent.WidthSquished,
.CheckBoxListComponent.WidthSquished,
.ListBoxComponent.WidthSquished,
.TypeAheadComponent.WidthSquished,
.DoubleComponent.WidthSquished,
.OrgHierarchyComponent.WidthSquished,
.RoomPickerComponent.WidthSquished,
.ReadOnlyComponent.WidthSquished,
.CurrencyComponent.WidthSquished {
  max-width: unset;
  min-width: unset;
  width: unset;
}
.CheckBoxComponent.WidthSquished .ComponentLabelContainer,
.DatePickerComponent.WidthSquished .ComponentLabelContainer,
.FileUploadComponent.WidthSquished .ComponentLabelContainer,
.SelectComponent.WidthSquished .ComponentLabelContainer,
.TextComponent.WidthSquished .ComponentLabelContainer,
.IntegerComponent.WidthSquished .ComponentLabelContainer,
.CheckBoxListComponent.WidthSquished .ComponentLabelContainer,
.ListBoxComponent.WidthSquished .ComponentLabelContainer,
.TypeAheadComponent.WidthSquished .ComponentLabelContainer,
.DoubleComponent.WidthSquished .ComponentLabelContainer,
.OrgHierarchyComponent.WidthSquished .ComponentLabelContainer,
.RoomPickerComponent.WidthSquished .ComponentLabelContainer,
.ReadOnlyComponent.WidthSquished .ComponentLabelContainer,
.CurrencyComponent.WidthSquished .ComponentLabelContainer {
  display: inline-flex;
}
.CheckBoxComponent.Width100,
.DatePickerComponent.Width100,
.FileUploadComponent.Width100,
.SelectComponent.Width100,
.TextComponent.Width100,
.IntegerComponent.Width100,
.CheckBoxListComponent.Width100,
.ListBoxComponent.Width100,
.TypeAheadComponent.Width100,
.DoubleComponent.Width100,
.OrgHierarchyComponent.Width100,
.RoomPickerComponent.Width100,
.ReadOnlyComponent.Width100,
.CurrencyComponent.Width100 {
  max-width: 32rem;
  width: 32rem;
}
.CheckBoxComponent.WidthMaximumAvailable,
.DatePickerComponent.WidthMaximumAvailable,
.FileUploadComponent.WidthMaximumAvailable,
.SelectComponent.WidthMaximumAvailable,
.TextComponent.WidthMaximumAvailable,
.IntegerComponent.WidthMaximumAvailable,
.CheckBoxListComponent.WidthMaximumAvailable,
.ListBoxComponent.WidthMaximumAvailable,
.TypeAheadComponent.WidthMaximumAvailable,
.DoubleComponent.WidthMaximumAvailable,
.OrgHierarchyComponent.WidthMaximumAvailable,
.RoomPickerComponent.WidthMaximumAvailable,
.ReadOnlyComponent.WidthMaximumAvailable,
.CurrencyComponent.WidthMaximumAvailable {
  width: 100%;
  max-width: 100rem;
}
.CheckBoxComponent .ComponentLabelContainer,
.DatePickerComponent .ComponentLabelContainer,
.FileUploadComponent .ComponentLabelContainer,
.SelectComponent .ComponentLabelContainer,
.TextComponent .ComponentLabelContainer,
.IntegerComponent .ComponentLabelContainer,
.CheckBoxListComponent .ComponentLabelContainer,
.ListBoxComponent .ComponentLabelContainer,
.TypeAheadComponent .ComponentLabelContainer,
.DoubleComponent .ComponentLabelContainer,
.OrgHierarchyComponent .ComponentLabelContainer,
.RoomPickerComponent .ComponentLabelContainer,
.ReadOnlyComponent .ComponentLabelContainer,
.CurrencyComponent .ComponentLabelContainer {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  padding-bottom: 0;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.CheckBoxComponent .ComponentLabelContainer .ComponentLabel,
.DatePickerComponent .ComponentLabelContainer .ComponentLabel,
.FileUploadComponent .ComponentLabelContainer .ComponentLabel,
.SelectComponent .ComponentLabelContainer .ComponentLabel,
.TextComponent .ComponentLabelContainer .ComponentLabel,
.IntegerComponent .ComponentLabelContainer .ComponentLabel,
.CheckBoxListComponent .ComponentLabelContainer .ComponentLabel,
.ListBoxComponent .ComponentLabelContainer .ComponentLabel,
.TypeAheadComponent .ComponentLabelContainer .ComponentLabel,
.DoubleComponent .ComponentLabelContainer .ComponentLabel,
.OrgHierarchyComponent .ComponentLabelContainer .ComponentLabel,
.RoomPickerComponent .ComponentLabelContainer .ComponentLabel,
.ReadOnlyComponent .ComponentLabelContainer .ComponentLabel,
.CurrencyComponent .ComponentLabelContainer .ComponentLabel {
  flex: 1 1 auto;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3em;
  /* Match the line height of the adjacent (and optional) .Required inside the flex row */
}
.CheckBoxComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText,
.DatePickerComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText,
.FileUploadComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText,
.SelectComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText,
.TextComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText,
.IntegerComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText,
.CheckBoxListComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText,
.ListBoxComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText,
.TypeAheadComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText,
.DoubleComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText,
.OrgHierarchyComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText,
.RoomPickerComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText,
.ReadOnlyComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText,
.CurrencyComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText { /* This class should reside above <label> in the DOM tree because some components simulate a label without using the <label> element */
  overflow: hidden;
}
.CheckBoxComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText label,
.DatePickerComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText label,
.FileUploadComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText label,
.SelectComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText label,
.TextComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText label,
.IntegerComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText label,
.CheckBoxListComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText label,
.ListBoxComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText label,
.TypeAheadComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText label,
.DoubleComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText label,
.OrgHierarchyComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText label,
.RoomPickerComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText label,
.ReadOnlyComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText label,
.CurrencyComponent .ComponentLabelContainer .ComponentLabel.TruncateLabelText label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.CheckBoxComponent .ComponentLabelContainer .Required,
.DatePickerComponent .ComponentLabelContainer .Required,
.FileUploadComponent .ComponentLabelContainer .Required,
.SelectComponent .ComponentLabelContainer .Required,
.TextComponent .ComponentLabelContainer .Required,
.IntegerComponent .ComponentLabelContainer .Required,
.CheckBoxListComponent .ComponentLabelContainer .Required,
.ListBoxComponent .ComponentLabelContainer .Required,
.TypeAheadComponent .ComponentLabelContainer .Required,
.DoubleComponent .ComponentLabelContainer .Required,
.OrgHierarchyComponent .ComponentLabelContainer .Required,
.RoomPickerComponent .ComponentLabelContainer .Required,
.ReadOnlyComponent .ComponentLabelContainer .Required,
.CurrencyComponent .ComponentLabelContainer .Required {
  flex: 0 0 content;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3em;
  /* Match the line height of the adjacent .ComponentLabel inside the flex row */
  color: #f94750;
  text-align: right;
  margin-left: auto;
}
.CheckBoxComponent .ComponentLabelContainer .ComponentLabelHelpIcon,
.DatePickerComponent .ComponentLabelContainer .ComponentLabelHelpIcon,
.FileUploadComponent .ComponentLabelContainer .ComponentLabelHelpIcon,
.SelectComponent .ComponentLabelContainer .ComponentLabelHelpIcon,
.TextComponent .ComponentLabelContainer .ComponentLabelHelpIcon,
.IntegerComponent .ComponentLabelContainer .ComponentLabelHelpIcon,
.CheckBoxListComponent .ComponentLabelContainer .ComponentLabelHelpIcon,
.ListBoxComponent .ComponentLabelContainer .ComponentLabelHelpIcon,
.TypeAheadComponent .ComponentLabelContainer .ComponentLabelHelpIcon,
.DoubleComponent .ComponentLabelContainer .ComponentLabelHelpIcon,
.OrgHierarchyComponent .ComponentLabelContainer .ComponentLabelHelpIcon,
.RoomPickerComponent .ComponentLabelContainer .ComponentLabelHelpIcon,
.ReadOnlyComponent .ComponentLabelContainer .ComponentLabelHelpIcon,
.CurrencyComponent .ComponentLabelContainer .ComponentLabelHelpIcon {
  flex: 0 0 content;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3em;
  margin-left: auto;
}
.CheckBoxComponent .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.DatePickerComponent .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.FileUploadComponent .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.SelectComponent .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.TextComponent .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.IntegerComponent .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.CheckBoxListComponent .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.ListBoxComponent .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.TypeAheadComponent .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.DoubleComponent .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.OrgHierarchyComponent .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.RoomPickerComponent .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.ReadOnlyComponent .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.CurrencyComponent .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent {
  line-height: 1.3em;
}
.CheckBoxComponent input[type=text],
.CheckBoxComponent input[type=date],
.CheckBoxComponent input[type=color],
.CheckBoxComponent input[type=datetime],
.CheckBoxComponent input[type=email],
.CheckBoxComponent input[type=file],
.CheckBoxComponent input[type=password],
.CheckBoxComponent input[type=tel],
.CheckBoxComponent input[type=url],
.CheckBoxComponent input[type=number],
.CheckBoxComponent select:not([size]),
.DatePickerComponent input[type=text],
.DatePickerComponent input[type=date],
.DatePickerComponent input[type=color],
.DatePickerComponent input[type=datetime],
.DatePickerComponent input[type=email],
.DatePickerComponent input[type=file],
.DatePickerComponent input[type=password],
.DatePickerComponent input[type=tel],
.DatePickerComponent input[type=url],
.DatePickerComponent input[type=number],
.DatePickerComponent select:not([size]),
.FileUploadComponent input[type=text],
.FileUploadComponent input[type=date],
.FileUploadComponent input[type=color],
.FileUploadComponent input[type=datetime],
.FileUploadComponent input[type=email],
.FileUploadComponent input[type=file],
.FileUploadComponent input[type=password],
.FileUploadComponent input[type=tel],
.FileUploadComponent input[type=url],
.FileUploadComponent input[type=number],
.FileUploadComponent select:not([size]),
.SelectComponent input[type=text],
.SelectComponent input[type=date],
.SelectComponent input[type=color],
.SelectComponent input[type=datetime],
.SelectComponent input[type=email],
.SelectComponent input[type=file],
.SelectComponent input[type=password],
.SelectComponent input[type=tel],
.SelectComponent input[type=url],
.SelectComponent input[type=number],
.SelectComponent select:not([size]),
.TextComponent input[type=text],
.TextComponent input[type=date],
.TextComponent input[type=color],
.TextComponent input[type=datetime],
.TextComponent input[type=email],
.TextComponent input[type=file],
.TextComponent input[type=password],
.TextComponent input[type=tel],
.TextComponent input[type=url],
.TextComponent input[type=number],
.TextComponent select:not([size]),
.IntegerComponent input[type=text],
.IntegerComponent input[type=date],
.IntegerComponent input[type=color],
.IntegerComponent input[type=datetime],
.IntegerComponent input[type=email],
.IntegerComponent input[type=file],
.IntegerComponent input[type=password],
.IntegerComponent input[type=tel],
.IntegerComponent input[type=url],
.IntegerComponent input[type=number],
.IntegerComponent select:not([size]),
.CheckBoxListComponent input[type=text],
.CheckBoxListComponent input[type=date],
.CheckBoxListComponent input[type=color],
.CheckBoxListComponent input[type=datetime],
.CheckBoxListComponent input[type=email],
.CheckBoxListComponent input[type=file],
.CheckBoxListComponent input[type=password],
.CheckBoxListComponent input[type=tel],
.CheckBoxListComponent input[type=url],
.CheckBoxListComponent input[type=number],
.CheckBoxListComponent select:not([size]),
.ListBoxComponent input[type=text],
.ListBoxComponent input[type=date],
.ListBoxComponent input[type=color],
.ListBoxComponent input[type=datetime],
.ListBoxComponent input[type=email],
.ListBoxComponent input[type=file],
.ListBoxComponent input[type=password],
.ListBoxComponent input[type=tel],
.ListBoxComponent input[type=url],
.ListBoxComponent input[type=number],
.ListBoxComponent select:not([size]),
.TypeAheadComponent input[type=text],
.TypeAheadComponent input[type=date],
.TypeAheadComponent input[type=color],
.TypeAheadComponent input[type=datetime],
.TypeAheadComponent input[type=email],
.TypeAheadComponent input[type=file],
.TypeAheadComponent input[type=password],
.TypeAheadComponent input[type=tel],
.TypeAheadComponent input[type=url],
.TypeAheadComponent input[type=number],
.TypeAheadComponent select:not([size]),
.DoubleComponent input[type=text],
.DoubleComponent input[type=date],
.DoubleComponent input[type=color],
.DoubleComponent input[type=datetime],
.DoubleComponent input[type=email],
.DoubleComponent input[type=file],
.DoubleComponent input[type=password],
.DoubleComponent input[type=tel],
.DoubleComponent input[type=url],
.DoubleComponent input[type=number],
.DoubleComponent select:not([size]),
.OrgHierarchyComponent input[type=text],
.OrgHierarchyComponent input[type=date],
.OrgHierarchyComponent input[type=color],
.OrgHierarchyComponent input[type=datetime],
.OrgHierarchyComponent input[type=email],
.OrgHierarchyComponent input[type=file],
.OrgHierarchyComponent input[type=password],
.OrgHierarchyComponent input[type=tel],
.OrgHierarchyComponent input[type=url],
.OrgHierarchyComponent input[type=number],
.OrgHierarchyComponent select:not([size]),
.RoomPickerComponent input[type=text],
.RoomPickerComponent input[type=date],
.RoomPickerComponent input[type=color],
.RoomPickerComponent input[type=datetime],
.RoomPickerComponent input[type=email],
.RoomPickerComponent input[type=file],
.RoomPickerComponent input[type=password],
.RoomPickerComponent input[type=tel],
.RoomPickerComponent input[type=url],
.RoomPickerComponent input[type=number],
.RoomPickerComponent select:not([size]),
.ReadOnlyComponent input[type=text],
.ReadOnlyComponent input[type=date],
.ReadOnlyComponent input[type=color],
.ReadOnlyComponent input[type=datetime],
.ReadOnlyComponent input[type=email],
.ReadOnlyComponent input[type=file],
.ReadOnlyComponent input[type=password],
.ReadOnlyComponent input[type=tel],
.ReadOnlyComponent input[type=url],
.ReadOnlyComponent input[type=number],
.ReadOnlyComponent select:not([size]),
.CurrencyComponent input[type=text],
.CurrencyComponent input[type=date],
.CurrencyComponent input[type=color],
.CurrencyComponent input[type=datetime],
.CurrencyComponent input[type=email],
.CurrencyComponent input[type=file],
.CurrencyComponent input[type=password],
.CurrencyComponent input[type=tel],
.CurrencyComponent input[type=url],
.CurrencyComponent input[type=number],
.CurrencyComponent select:not([size]) {
  height: 4.2rem;
}
.CheckBoxComponent input[type=text].SearchField,
.CheckBoxComponent input[type=date].SearchField,
.CheckBoxComponent input[type=color].SearchField,
.CheckBoxComponent input[type=datetime].SearchField,
.CheckBoxComponent input[type=email].SearchField,
.CheckBoxComponent input[type=file].SearchField,
.CheckBoxComponent input[type=password].SearchField,
.CheckBoxComponent input[type=tel].SearchField,
.CheckBoxComponent input[type=url].SearchField,
.CheckBoxComponent input[type=number].SearchField,
.CheckBoxComponent select:not([size]).SearchField,
.DatePickerComponent input[type=text].SearchField,
.DatePickerComponent input[type=date].SearchField,
.DatePickerComponent input[type=color].SearchField,
.DatePickerComponent input[type=datetime].SearchField,
.DatePickerComponent input[type=email].SearchField,
.DatePickerComponent input[type=file].SearchField,
.DatePickerComponent input[type=password].SearchField,
.DatePickerComponent input[type=tel].SearchField,
.DatePickerComponent input[type=url].SearchField,
.DatePickerComponent input[type=number].SearchField,
.DatePickerComponent select:not([size]).SearchField,
.FileUploadComponent input[type=text].SearchField,
.FileUploadComponent input[type=date].SearchField,
.FileUploadComponent input[type=color].SearchField,
.FileUploadComponent input[type=datetime].SearchField,
.FileUploadComponent input[type=email].SearchField,
.FileUploadComponent input[type=file].SearchField,
.FileUploadComponent input[type=password].SearchField,
.FileUploadComponent input[type=tel].SearchField,
.FileUploadComponent input[type=url].SearchField,
.FileUploadComponent input[type=number].SearchField,
.FileUploadComponent select:not([size]).SearchField,
.SelectComponent input[type=text].SearchField,
.SelectComponent input[type=date].SearchField,
.SelectComponent input[type=color].SearchField,
.SelectComponent input[type=datetime].SearchField,
.SelectComponent input[type=email].SearchField,
.SelectComponent input[type=file].SearchField,
.SelectComponent input[type=password].SearchField,
.SelectComponent input[type=tel].SearchField,
.SelectComponent input[type=url].SearchField,
.SelectComponent input[type=number].SearchField,
.SelectComponent select:not([size]).SearchField,
.TextComponent input[type=text].SearchField,
.TextComponent input[type=date].SearchField,
.TextComponent input[type=color].SearchField,
.TextComponent input[type=datetime].SearchField,
.TextComponent input[type=email].SearchField,
.TextComponent input[type=file].SearchField,
.TextComponent input[type=password].SearchField,
.TextComponent input[type=tel].SearchField,
.TextComponent input[type=url].SearchField,
.TextComponent input[type=number].SearchField,
.TextComponent select:not([size]).SearchField,
.IntegerComponent input[type=text].SearchField,
.IntegerComponent input[type=date].SearchField,
.IntegerComponent input[type=color].SearchField,
.IntegerComponent input[type=datetime].SearchField,
.IntegerComponent input[type=email].SearchField,
.IntegerComponent input[type=file].SearchField,
.IntegerComponent input[type=password].SearchField,
.IntegerComponent input[type=tel].SearchField,
.IntegerComponent input[type=url].SearchField,
.IntegerComponent input[type=number].SearchField,
.IntegerComponent select:not([size]).SearchField,
.CheckBoxListComponent input[type=text].SearchField,
.CheckBoxListComponent input[type=date].SearchField,
.CheckBoxListComponent input[type=color].SearchField,
.CheckBoxListComponent input[type=datetime].SearchField,
.CheckBoxListComponent input[type=email].SearchField,
.CheckBoxListComponent input[type=file].SearchField,
.CheckBoxListComponent input[type=password].SearchField,
.CheckBoxListComponent input[type=tel].SearchField,
.CheckBoxListComponent input[type=url].SearchField,
.CheckBoxListComponent input[type=number].SearchField,
.CheckBoxListComponent select:not([size]).SearchField,
.ListBoxComponent input[type=text].SearchField,
.ListBoxComponent input[type=date].SearchField,
.ListBoxComponent input[type=color].SearchField,
.ListBoxComponent input[type=datetime].SearchField,
.ListBoxComponent input[type=email].SearchField,
.ListBoxComponent input[type=file].SearchField,
.ListBoxComponent input[type=password].SearchField,
.ListBoxComponent input[type=tel].SearchField,
.ListBoxComponent input[type=url].SearchField,
.ListBoxComponent input[type=number].SearchField,
.ListBoxComponent select:not([size]).SearchField,
.TypeAheadComponent input[type=text].SearchField,
.TypeAheadComponent input[type=date].SearchField,
.TypeAheadComponent input[type=color].SearchField,
.TypeAheadComponent input[type=datetime].SearchField,
.TypeAheadComponent input[type=email].SearchField,
.TypeAheadComponent input[type=file].SearchField,
.TypeAheadComponent input[type=password].SearchField,
.TypeAheadComponent input[type=tel].SearchField,
.TypeAheadComponent input[type=url].SearchField,
.TypeAheadComponent input[type=number].SearchField,
.TypeAheadComponent select:not([size]).SearchField,
.DoubleComponent input[type=text].SearchField,
.DoubleComponent input[type=date].SearchField,
.DoubleComponent input[type=color].SearchField,
.DoubleComponent input[type=datetime].SearchField,
.DoubleComponent input[type=email].SearchField,
.DoubleComponent input[type=file].SearchField,
.DoubleComponent input[type=password].SearchField,
.DoubleComponent input[type=tel].SearchField,
.DoubleComponent input[type=url].SearchField,
.DoubleComponent input[type=number].SearchField,
.DoubleComponent select:not([size]).SearchField,
.OrgHierarchyComponent input[type=text].SearchField,
.OrgHierarchyComponent input[type=date].SearchField,
.OrgHierarchyComponent input[type=color].SearchField,
.OrgHierarchyComponent input[type=datetime].SearchField,
.OrgHierarchyComponent input[type=email].SearchField,
.OrgHierarchyComponent input[type=file].SearchField,
.OrgHierarchyComponent input[type=password].SearchField,
.OrgHierarchyComponent input[type=tel].SearchField,
.OrgHierarchyComponent input[type=url].SearchField,
.OrgHierarchyComponent input[type=number].SearchField,
.OrgHierarchyComponent select:not([size]).SearchField,
.RoomPickerComponent input[type=text].SearchField,
.RoomPickerComponent input[type=date].SearchField,
.RoomPickerComponent input[type=color].SearchField,
.RoomPickerComponent input[type=datetime].SearchField,
.RoomPickerComponent input[type=email].SearchField,
.RoomPickerComponent input[type=file].SearchField,
.RoomPickerComponent input[type=password].SearchField,
.RoomPickerComponent input[type=tel].SearchField,
.RoomPickerComponent input[type=url].SearchField,
.RoomPickerComponent input[type=number].SearchField,
.RoomPickerComponent select:not([size]).SearchField,
.ReadOnlyComponent input[type=text].SearchField,
.ReadOnlyComponent input[type=date].SearchField,
.ReadOnlyComponent input[type=color].SearchField,
.ReadOnlyComponent input[type=datetime].SearchField,
.ReadOnlyComponent input[type=email].SearchField,
.ReadOnlyComponent input[type=file].SearchField,
.ReadOnlyComponent input[type=password].SearchField,
.ReadOnlyComponent input[type=tel].SearchField,
.ReadOnlyComponent input[type=url].SearchField,
.ReadOnlyComponent input[type=number].SearchField,
.ReadOnlyComponent select:not([size]).SearchField,
.CurrencyComponent input[type=text].SearchField,
.CurrencyComponent input[type=date].SearchField,
.CurrencyComponent input[type=color].SearchField,
.CurrencyComponent input[type=datetime].SearchField,
.CurrencyComponent input[type=email].SearchField,
.CurrencyComponent input[type=file].SearchField,
.CurrencyComponent input[type=password].SearchField,
.CurrencyComponent input[type=tel].SearchField,
.CurrencyComponent input[type=url].SearchField,
.CurrencyComponent input[type=number].SearchField,
.CurrencyComponent select:not([size]).SearchField {
  background-image: url(/Images/Icons/Search.svg);
  background-repeat: no-repeat;
  background-size: 2rem 2rem;
  padding-left: 4rem;
  background-position: center left 1rem;
}
.CheckBoxComponent input[type=text],
.CheckBoxComponent input[type=date],
.CheckBoxComponent input[type=color],
.CheckBoxComponent input[type=datetime],
.CheckBoxComponent input[type=email],
.CheckBoxComponent input[type=file],
.CheckBoxComponent input[type=password],
.CheckBoxComponent input[type=tel],
.CheckBoxComponent input[type=url],
.CheckBoxComponent input[type=number],
.CheckBoxComponent select,
.CheckBoxComponent textarea,
.DatePickerComponent input[type=text],
.DatePickerComponent input[type=date],
.DatePickerComponent input[type=color],
.DatePickerComponent input[type=datetime],
.DatePickerComponent input[type=email],
.DatePickerComponent input[type=file],
.DatePickerComponent input[type=password],
.DatePickerComponent input[type=tel],
.DatePickerComponent input[type=url],
.DatePickerComponent input[type=number],
.DatePickerComponent select,
.DatePickerComponent textarea,
.FileUploadComponent input[type=text],
.FileUploadComponent input[type=date],
.FileUploadComponent input[type=color],
.FileUploadComponent input[type=datetime],
.FileUploadComponent input[type=email],
.FileUploadComponent input[type=file],
.FileUploadComponent input[type=password],
.FileUploadComponent input[type=tel],
.FileUploadComponent input[type=url],
.FileUploadComponent input[type=number],
.FileUploadComponent select,
.FileUploadComponent textarea,
.SelectComponent input[type=text],
.SelectComponent input[type=date],
.SelectComponent input[type=color],
.SelectComponent input[type=datetime],
.SelectComponent input[type=email],
.SelectComponent input[type=file],
.SelectComponent input[type=password],
.SelectComponent input[type=tel],
.SelectComponent input[type=url],
.SelectComponent input[type=number],
.SelectComponent select,
.SelectComponent textarea,
.TextComponent input[type=text],
.TextComponent input[type=date],
.TextComponent input[type=color],
.TextComponent input[type=datetime],
.TextComponent input[type=email],
.TextComponent input[type=file],
.TextComponent input[type=password],
.TextComponent input[type=tel],
.TextComponent input[type=url],
.TextComponent input[type=number],
.TextComponent select,
.TextComponent textarea,
.IntegerComponent input[type=text],
.IntegerComponent input[type=date],
.IntegerComponent input[type=color],
.IntegerComponent input[type=datetime],
.IntegerComponent input[type=email],
.IntegerComponent input[type=file],
.IntegerComponent input[type=password],
.IntegerComponent input[type=tel],
.IntegerComponent input[type=url],
.IntegerComponent input[type=number],
.IntegerComponent select,
.IntegerComponent textarea,
.CheckBoxListComponent input[type=text],
.CheckBoxListComponent input[type=date],
.CheckBoxListComponent input[type=color],
.CheckBoxListComponent input[type=datetime],
.CheckBoxListComponent input[type=email],
.CheckBoxListComponent input[type=file],
.CheckBoxListComponent input[type=password],
.CheckBoxListComponent input[type=tel],
.CheckBoxListComponent input[type=url],
.CheckBoxListComponent input[type=number],
.CheckBoxListComponent select,
.CheckBoxListComponent textarea,
.ListBoxComponent input[type=text],
.ListBoxComponent input[type=date],
.ListBoxComponent input[type=color],
.ListBoxComponent input[type=datetime],
.ListBoxComponent input[type=email],
.ListBoxComponent input[type=file],
.ListBoxComponent input[type=password],
.ListBoxComponent input[type=tel],
.ListBoxComponent input[type=url],
.ListBoxComponent input[type=number],
.ListBoxComponent select,
.ListBoxComponent textarea,
.TypeAheadComponent input[type=text],
.TypeAheadComponent input[type=date],
.TypeAheadComponent input[type=color],
.TypeAheadComponent input[type=datetime],
.TypeAheadComponent input[type=email],
.TypeAheadComponent input[type=file],
.TypeAheadComponent input[type=password],
.TypeAheadComponent input[type=tel],
.TypeAheadComponent input[type=url],
.TypeAheadComponent input[type=number],
.TypeAheadComponent select,
.TypeAheadComponent textarea,
.DoubleComponent input[type=text],
.DoubleComponent input[type=date],
.DoubleComponent input[type=color],
.DoubleComponent input[type=datetime],
.DoubleComponent input[type=email],
.DoubleComponent input[type=file],
.DoubleComponent input[type=password],
.DoubleComponent input[type=tel],
.DoubleComponent input[type=url],
.DoubleComponent input[type=number],
.DoubleComponent select,
.DoubleComponent textarea,
.OrgHierarchyComponent input[type=text],
.OrgHierarchyComponent input[type=date],
.OrgHierarchyComponent input[type=color],
.OrgHierarchyComponent input[type=datetime],
.OrgHierarchyComponent input[type=email],
.OrgHierarchyComponent input[type=file],
.OrgHierarchyComponent input[type=password],
.OrgHierarchyComponent input[type=tel],
.OrgHierarchyComponent input[type=url],
.OrgHierarchyComponent input[type=number],
.OrgHierarchyComponent select,
.OrgHierarchyComponent textarea,
.RoomPickerComponent input[type=text],
.RoomPickerComponent input[type=date],
.RoomPickerComponent input[type=color],
.RoomPickerComponent input[type=datetime],
.RoomPickerComponent input[type=email],
.RoomPickerComponent input[type=file],
.RoomPickerComponent input[type=password],
.RoomPickerComponent input[type=tel],
.RoomPickerComponent input[type=url],
.RoomPickerComponent input[type=number],
.RoomPickerComponent select,
.RoomPickerComponent textarea,
.ReadOnlyComponent input[type=text],
.ReadOnlyComponent input[type=date],
.ReadOnlyComponent input[type=color],
.ReadOnlyComponent input[type=datetime],
.ReadOnlyComponent input[type=email],
.ReadOnlyComponent input[type=file],
.ReadOnlyComponent input[type=password],
.ReadOnlyComponent input[type=tel],
.ReadOnlyComponent input[type=url],
.ReadOnlyComponent input[type=number],
.ReadOnlyComponent select,
.ReadOnlyComponent textarea,
.CurrencyComponent input[type=text],
.CurrencyComponent input[type=date],
.CurrencyComponent input[type=color],
.CurrencyComponent input[type=datetime],
.CurrencyComponent input[type=email],
.CurrencyComponent input[type=file],
.CurrencyComponent input[type=password],
.CurrencyComponent input[type=tel],
.CurrencyComponent input[type=url],
.CurrencyComponent input[type=number],
.CurrencyComponent select,
.CurrencyComponent textarea {
  width: 100%;
}
.CheckBoxComponent input[type=text]::placeholder,
.CheckBoxComponent input[type=date]::placeholder,
.CheckBoxComponent input[type=color]::placeholder,
.CheckBoxComponent input[type=datetime]::placeholder,
.CheckBoxComponent input[type=email]::placeholder,
.CheckBoxComponent input[type=file]::placeholder,
.CheckBoxComponent input[type=password]::placeholder,
.CheckBoxComponent input[type=tel]::placeholder,
.CheckBoxComponent input[type=url]::placeholder,
.CheckBoxComponent input[type=number]::placeholder,
.CheckBoxComponent select::placeholder,
.CheckBoxComponent textarea::placeholder,
.DatePickerComponent input[type=text]::placeholder,
.DatePickerComponent input[type=date]::placeholder,
.DatePickerComponent input[type=color]::placeholder,
.DatePickerComponent input[type=datetime]::placeholder,
.DatePickerComponent input[type=email]::placeholder,
.DatePickerComponent input[type=file]::placeholder,
.DatePickerComponent input[type=password]::placeholder,
.DatePickerComponent input[type=tel]::placeholder,
.DatePickerComponent input[type=url]::placeholder,
.DatePickerComponent input[type=number]::placeholder,
.DatePickerComponent select::placeholder,
.DatePickerComponent textarea::placeholder,
.FileUploadComponent input[type=text]::placeholder,
.FileUploadComponent input[type=date]::placeholder,
.FileUploadComponent input[type=color]::placeholder,
.FileUploadComponent input[type=datetime]::placeholder,
.FileUploadComponent input[type=email]::placeholder,
.FileUploadComponent input[type=file]::placeholder,
.FileUploadComponent input[type=password]::placeholder,
.FileUploadComponent input[type=tel]::placeholder,
.FileUploadComponent input[type=url]::placeholder,
.FileUploadComponent input[type=number]::placeholder,
.FileUploadComponent select::placeholder,
.FileUploadComponent textarea::placeholder,
.SelectComponent input[type=text]::placeholder,
.SelectComponent input[type=date]::placeholder,
.SelectComponent input[type=color]::placeholder,
.SelectComponent input[type=datetime]::placeholder,
.SelectComponent input[type=email]::placeholder,
.SelectComponent input[type=file]::placeholder,
.SelectComponent input[type=password]::placeholder,
.SelectComponent input[type=tel]::placeholder,
.SelectComponent input[type=url]::placeholder,
.SelectComponent input[type=number]::placeholder,
.SelectComponent select::placeholder,
.SelectComponent textarea::placeholder,
.TextComponent input[type=text]::placeholder,
.TextComponent input[type=date]::placeholder,
.TextComponent input[type=color]::placeholder,
.TextComponent input[type=datetime]::placeholder,
.TextComponent input[type=email]::placeholder,
.TextComponent input[type=file]::placeholder,
.TextComponent input[type=password]::placeholder,
.TextComponent input[type=tel]::placeholder,
.TextComponent input[type=url]::placeholder,
.TextComponent input[type=number]::placeholder,
.TextComponent select::placeholder,
.TextComponent textarea::placeholder,
.IntegerComponent input[type=text]::placeholder,
.IntegerComponent input[type=date]::placeholder,
.IntegerComponent input[type=color]::placeholder,
.IntegerComponent input[type=datetime]::placeholder,
.IntegerComponent input[type=email]::placeholder,
.IntegerComponent input[type=file]::placeholder,
.IntegerComponent input[type=password]::placeholder,
.IntegerComponent input[type=tel]::placeholder,
.IntegerComponent input[type=url]::placeholder,
.IntegerComponent input[type=number]::placeholder,
.IntegerComponent select::placeholder,
.IntegerComponent textarea::placeholder,
.CheckBoxListComponent input[type=text]::placeholder,
.CheckBoxListComponent input[type=date]::placeholder,
.CheckBoxListComponent input[type=color]::placeholder,
.CheckBoxListComponent input[type=datetime]::placeholder,
.CheckBoxListComponent input[type=email]::placeholder,
.CheckBoxListComponent input[type=file]::placeholder,
.CheckBoxListComponent input[type=password]::placeholder,
.CheckBoxListComponent input[type=tel]::placeholder,
.CheckBoxListComponent input[type=url]::placeholder,
.CheckBoxListComponent input[type=number]::placeholder,
.CheckBoxListComponent select::placeholder,
.CheckBoxListComponent textarea::placeholder,
.ListBoxComponent input[type=text]::placeholder,
.ListBoxComponent input[type=date]::placeholder,
.ListBoxComponent input[type=color]::placeholder,
.ListBoxComponent input[type=datetime]::placeholder,
.ListBoxComponent input[type=email]::placeholder,
.ListBoxComponent input[type=file]::placeholder,
.ListBoxComponent input[type=password]::placeholder,
.ListBoxComponent input[type=tel]::placeholder,
.ListBoxComponent input[type=url]::placeholder,
.ListBoxComponent input[type=number]::placeholder,
.ListBoxComponent select::placeholder,
.ListBoxComponent textarea::placeholder,
.TypeAheadComponent input[type=text]::placeholder,
.TypeAheadComponent input[type=date]::placeholder,
.TypeAheadComponent input[type=color]::placeholder,
.TypeAheadComponent input[type=datetime]::placeholder,
.TypeAheadComponent input[type=email]::placeholder,
.TypeAheadComponent input[type=file]::placeholder,
.TypeAheadComponent input[type=password]::placeholder,
.TypeAheadComponent input[type=tel]::placeholder,
.TypeAheadComponent input[type=url]::placeholder,
.TypeAheadComponent input[type=number]::placeholder,
.TypeAheadComponent select::placeholder,
.TypeAheadComponent textarea::placeholder,
.DoubleComponent input[type=text]::placeholder,
.DoubleComponent input[type=date]::placeholder,
.DoubleComponent input[type=color]::placeholder,
.DoubleComponent input[type=datetime]::placeholder,
.DoubleComponent input[type=email]::placeholder,
.DoubleComponent input[type=file]::placeholder,
.DoubleComponent input[type=password]::placeholder,
.DoubleComponent input[type=tel]::placeholder,
.DoubleComponent input[type=url]::placeholder,
.DoubleComponent input[type=number]::placeholder,
.DoubleComponent select::placeholder,
.DoubleComponent textarea::placeholder,
.OrgHierarchyComponent input[type=text]::placeholder,
.OrgHierarchyComponent input[type=date]::placeholder,
.OrgHierarchyComponent input[type=color]::placeholder,
.OrgHierarchyComponent input[type=datetime]::placeholder,
.OrgHierarchyComponent input[type=email]::placeholder,
.OrgHierarchyComponent input[type=file]::placeholder,
.OrgHierarchyComponent input[type=password]::placeholder,
.OrgHierarchyComponent input[type=tel]::placeholder,
.OrgHierarchyComponent input[type=url]::placeholder,
.OrgHierarchyComponent input[type=number]::placeholder,
.OrgHierarchyComponent select::placeholder,
.OrgHierarchyComponent textarea::placeholder,
.RoomPickerComponent input[type=text]::placeholder,
.RoomPickerComponent input[type=date]::placeholder,
.RoomPickerComponent input[type=color]::placeholder,
.RoomPickerComponent input[type=datetime]::placeholder,
.RoomPickerComponent input[type=email]::placeholder,
.RoomPickerComponent input[type=file]::placeholder,
.RoomPickerComponent input[type=password]::placeholder,
.RoomPickerComponent input[type=tel]::placeholder,
.RoomPickerComponent input[type=url]::placeholder,
.RoomPickerComponent input[type=number]::placeholder,
.RoomPickerComponent select::placeholder,
.RoomPickerComponent textarea::placeholder,
.ReadOnlyComponent input[type=text]::placeholder,
.ReadOnlyComponent input[type=date]::placeholder,
.ReadOnlyComponent input[type=color]::placeholder,
.ReadOnlyComponent input[type=datetime]::placeholder,
.ReadOnlyComponent input[type=email]::placeholder,
.ReadOnlyComponent input[type=file]::placeholder,
.ReadOnlyComponent input[type=password]::placeholder,
.ReadOnlyComponent input[type=tel]::placeholder,
.ReadOnlyComponent input[type=url]::placeholder,
.ReadOnlyComponent input[type=number]::placeholder,
.ReadOnlyComponent select::placeholder,
.ReadOnlyComponent textarea::placeholder,
.CurrencyComponent input[type=text]::placeholder,
.CurrencyComponent input[type=date]::placeholder,
.CurrencyComponent input[type=color]::placeholder,
.CurrencyComponent input[type=datetime]::placeholder,
.CurrencyComponent input[type=email]::placeholder,
.CurrencyComponent input[type=file]::placeholder,
.CurrencyComponent input[type=password]::placeholder,
.CurrencyComponent input[type=tel]::placeholder,
.CurrencyComponent input[type=url]::placeholder,
.CurrencyComponent input[type=number]::placeholder,
.CurrencyComponent select::placeholder,
.CurrencyComponent textarea::placeholder {
  color: #a7a7a9;
}
.CheckBoxComponent input[type=text]:focus,
.CheckBoxComponent input[type=date]:focus,
.CheckBoxComponent input[type=color]:focus,
.CheckBoxComponent input[type=datetime]:focus,
.CheckBoxComponent input[type=email]:focus,
.CheckBoxComponent input[type=file]:focus,
.CheckBoxComponent input[type=password]:focus,
.CheckBoxComponent input[type=tel]:focus,
.CheckBoxComponent input[type=url]:focus,
.CheckBoxComponent input[type=number]:focus,
.CheckBoxComponent select:focus,
.CheckBoxComponent textarea:focus,
.DatePickerComponent input[type=text]:focus,
.DatePickerComponent input[type=date]:focus,
.DatePickerComponent input[type=color]:focus,
.DatePickerComponent input[type=datetime]:focus,
.DatePickerComponent input[type=email]:focus,
.DatePickerComponent input[type=file]:focus,
.DatePickerComponent input[type=password]:focus,
.DatePickerComponent input[type=tel]:focus,
.DatePickerComponent input[type=url]:focus,
.DatePickerComponent input[type=number]:focus,
.DatePickerComponent select:focus,
.DatePickerComponent textarea:focus,
.FileUploadComponent input[type=text]:focus,
.FileUploadComponent input[type=date]:focus,
.FileUploadComponent input[type=color]:focus,
.FileUploadComponent input[type=datetime]:focus,
.FileUploadComponent input[type=email]:focus,
.FileUploadComponent input[type=file]:focus,
.FileUploadComponent input[type=password]:focus,
.FileUploadComponent input[type=tel]:focus,
.FileUploadComponent input[type=url]:focus,
.FileUploadComponent input[type=number]:focus,
.FileUploadComponent select:focus,
.FileUploadComponent textarea:focus,
.SelectComponent input[type=text]:focus,
.SelectComponent input[type=date]:focus,
.SelectComponent input[type=color]:focus,
.SelectComponent input[type=datetime]:focus,
.SelectComponent input[type=email]:focus,
.SelectComponent input[type=file]:focus,
.SelectComponent input[type=password]:focus,
.SelectComponent input[type=tel]:focus,
.SelectComponent input[type=url]:focus,
.SelectComponent input[type=number]:focus,
.SelectComponent select:focus,
.SelectComponent textarea:focus,
.TextComponent input[type=text]:focus,
.TextComponent input[type=date]:focus,
.TextComponent input[type=color]:focus,
.TextComponent input[type=datetime]:focus,
.TextComponent input[type=email]:focus,
.TextComponent input[type=file]:focus,
.TextComponent input[type=password]:focus,
.TextComponent input[type=tel]:focus,
.TextComponent input[type=url]:focus,
.TextComponent input[type=number]:focus,
.TextComponent select:focus,
.TextComponent textarea:focus,
.IntegerComponent input[type=text]:focus,
.IntegerComponent input[type=date]:focus,
.IntegerComponent input[type=color]:focus,
.IntegerComponent input[type=datetime]:focus,
.IntegerComponent input[type=email]:focus,
.IntegerComponent input[type=file]:focus,
.IntegerComponent input[type=password]:focus,
.IntegerComponent input[type=tel]:focus,
.IntegerComponent input[type=url]:focus,
.IntegerComponent input[type=number]:focus,
.IntegerComponent select:focus,
.IntegerComponent textarea:focus,
.CheckBoxListComponent input[type=text]:focus,
.CheckBoxListComponent input[type=date]:focus,
.CheckBoxListComponent input[type=color]:focus,
.CheckBoxListComponent input[type=datetime]:focus,
.CheckBoxListComponent input[type=email]:focus,
.CheckBoxListComponent input[type=file]:focus,
.CheckBoxListComponent input[type=password]:focus,
.CheckBoxListComponent input[type=tel]:focus,
.CheckBoxListComponent input[type=url]:focus,
.CheckBoxListComponent input[type=number]:focus,
.CheckBoxListComponent select:focus,
.CheckBoxListComponent textarea:focus,
.ListBoxComponent input[type=text]:focus,
.ListBoxComponent input[type=date]:focus,
.ListBoxComponent input[type=color]:focus,
.ListBoxComponent input[type=datetime]:focus,
.ListBoxComponent input[type=email]:focus,
.ListBoxComponent input[type=file]:focus,
.ListBoxComponent input[type=password]:focus,
.ListBoxComponent input[type=tel]:focus,
.ListBoxComponent input[type=url]:focus,
.ListBoxComponent input[type=number]:focus,
.ListBoxComponent select:focus,
.ListBoxComponent textarea:focus,
.TypeAheadComponent input[type=text]:focus,
.TypeAheadComponent input[type=date]:focus,
.TypeAheadComponent input[type=color]:focus,
.TypeAheadComponent input[type=datetime]:focus,
.TypeAheadComponent input[type=email]:focus,
.TypeAheadComponent input[type=file]:focus,
.TypeAheadComponent input[type=password]:focus,
.TypeAheadComponent input[type=tel]:focus,
.TypeAheadComponent input[type=url]:focus,
.TypeAheadComponent input[type=number]:focus,
.TypeAheadComponent select:focus,
.TypeAheadComponent textarea:focus,
.DoubleComponent input[type=text]:focus,
.DoubleComponent input[type=date]:focus,
.DoubleComponent input[type=color]:focus,
.DoubleComponent input[type=datetime]:focus,
.DoubleComponent input[type=email]:focus,
.DoubleComponent input[type=file]:focus,
.DoubleComponent input[type=password]:focus,
.DoubleComponent input[type=tel]:focus,
.DoubleComponent input[type=url]:focus,
.DoubleComponent input[type=number]:focus,
.DoubleComponent select:focus,
.DoubleComponent textarea:focus,
.OrgHierarchyComponent input[type=text]:focus,
.OrgHierarchyComponent input[type=date]:focus,
.OrgHierarchyComponent input[type=color]:focus,
.OrgHierarchyComponent input[type=datetime]:focus,
.OrgHierarchyComponent input[type=email]:focus,
.OrgHierarchyComponent input[type=file]:focus,
.OrgHierarchyComponent input[type=password]:focus,
.OrgHierarchyComponent input[type=tel]:focus,
.OrgHierarchyComponent input[type=url]:focus,
.OrgHierarchyComponent input[type=number]:focus,
.OrgHierarchyComponent select:focus,
.OrgHierarchyComponent textarea:focus,
.RoomPickerComponent input[type=text]:focus,
.RoomPickerComponent input[type=date]:focus,
.RoomPickerComponent input[type=color]:focus,
.RoomPickerComponent input[type=datetime]:focus,
.RoomPickerComponent input[type=email]:focus,
.RoomPickerComponent input[type=file]:focus,
.RoomPickerComponent input[type=password]:focus,
.RoomPickerComponent input[type=tel]:focus,
.RoomPickerComponent input[type=url]:focus,
.RoomPickerComponent input[type=number]:focus,
.RoomPickerComponent select:focus,
.RoomPickerComponent textarea:focus,
.ReadOnlyComponent input[type=text]:focus,
.ReadOnlyComponent input[type=date]:focus,
.ReadOnlyComponent input[type=color]:focus,
.ReadOnlyComponent input[type=datetime]:focus,
.ReadOnlyComponent input[type=email]:focus,
.ReadOnlyComponent input[type=file]:focus,
.ReadOnlyComponent input[type=password]:focus,
.ReadOnlyComponent input[type=tel]:focus,
.ReadOnlyComponent input[type=url]:focus,
.ReadOnlyComponent input[type=number]:focus,
.ReadOnlyComponent select:focus,
.ReadOnlyComponent textarea:focus,
.CurrencyComponent input[type=text]:focus,
.CurrencyComponent input[type=date]:focus,
.CurrencyComponent input[type=color]:focus,
.CurrencyComponent input[type=datetime]:focus,
.CurrencyComponent input[type=email]:focus,
.CurrencyComponent input[type=file]:focus,
.CurrencyComponent input[type=password]:focus,
.CurrencyComponent input[type=tel]:focus,
.CurrencyComponent input[type=url]:focus,
.CurrencyComponent input[type=number]:focus,
.CurrencyComponent select:focus,
.CurrencyComponent textarea:focus {
  outline: none;
}
.CheckBoxComponent input[type=color],
.DatePickerComponent input[type=color],
.FileUploadComponent input[type=color],
.SelectComponent input[type=color],
.TextComponent input[type=color],
.IntegerComponent input[type=color],
.CheckBoxListComponent input[type=color],
.ListBoxComponent input[type=color],
.TypeAheadComponent input[type=color],
.DoubleComponent input[type=color],
.OrgHierarchyComponent input[type=color],
.RoomPickerComponent input[type=color],
.ReadOnlyComponent input[type=color],
.CurrencyComponent input[type=color] {
  height: 30px;
  padding: 0;
  border: none;
}
.CheckBoxComponent input[type=color]::-webkit-color-swatch-wrapper,
.DatePickerComponent input[type=color]::-webkit-color-swatch-wrapper,
.FileUploadComponent input[type=color]::-webkit-color-swatch-wrapper,
.SelectComponent input[type=color]::-webkit-color-swatch-wrapper,
.TextComponent input[type=color]::-webkit-color-swatch-wrapper,
.IntegerComponent input[type=color]::-webkit-color-swatch-wrapper,
.CheckBoxListComponent input[type=color]::-webkit-color-swatch-wrapper,
.ListBoxComponent input[type=color]::-webkit-color-swatch-wrapper,
.TypeAheadComponent input[type=color]::-webkit-color-swatch-wrapper,
.DoubleComponent input[type=color]::-webkit-color-swatch-wrapper,
.OrgHierarchyComponent input[type=color]::-webkit-color-swatch-wrapper,
.RoomPickerComponent input[type=color]::-webkit-color-swatch-wrapper,
.ReadOnlyComponent input[type=color]::-webkit-color-swatch-wrapper,
.CurrencyComponent input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.CheckBoxComponent .InputSurround label,
.DatePickerComponent .InputSurround label,
.FileUploadComponent .InputSurround label,
.SelectComponent .InputSurround label,
.TextComponent .InputSurround label,
.IntegerComponent .InputSurround label,
.CheckBoxListComponent .InputSurround label,
.ListBoxComponent .InputSurround label,
.TypeAheadComponent .InputSurround label,
.DoubleComponent .InputSurround label,
.OrgHierarchyComponent .InputSurround label,
.RoomPickerComponent .InputSurround label,
.ReadOnlyComponent .InputSurround label,
.CurrencyComponent .InputSurround label {
  font-weight: unset;
}
.CheckBoxComponent .InputSurround.invalid input[type=text],
.CheckBoxComponent .InputSurround.invalid input[type=date],
.CheckBoxComponent .InputSurround.invalid input[type=color],
.CheckBoxComponent .InputSurround.invalid input[type=datetime],
.CheckBoxComponent .InputSurround.invalid input[type=email],
.CheckBoxComponent .InputSurround.invalid input[type=password],
.CheckBoxComponent .InputSurround.invalid input[type=tel],
.CheckBoxComponent .InputSurround.invalid input[type=url],
.CheckBoxComponent .InputSurround.invalid input[type=number],
.CheckBoxComponent .InputSurround.invalid select,
.CheckBoxComponent .InputSurround.invalid textarea,
.DatePickerComponent .InputSurround.invalid input[type=text],
.DatePickerComponent .InputSurround.invalid input[type=date],
.DatePickerComponent .InputSurround.invalid input[type=color],
.DatePickerComponent .InputSurround.invalid input[type=datetime],
.DatePickerComponent .InputSurround.invalid input[type=email],
.DatePickerComponent .InputSurround.invalid input[type=password],
.DatePickerComponent .InputSurround.invalid input[type=tel],
.DatePickerComponent .InputSurround.invalid input[type=url],
.DatePickerComponent .InputSurround.invalid input[type=number],
.DatePickerComponent .InputSurround.invalid select,
.DatePickerComponent .InputSurround.invalid textarea,
.FileUploadComponent .InputSurround.invalid input[type=text],
.FileUploadComponent .InputSurround.invalid input[type=date],
.FileUploadComponent .InputSurround.invalid input[type=color],
.FileUploadComponent .InputSurround.invalid input[type=datetime],
.FileUploadComponent .InputSurround.invalid input[type=email],
.FileUploadComponent .InputSurround.invalid input[type=password],
.FileUploadComponent .InputSurround.invalid input[type=tel],
.FileUploadComponent .InputSurround.invalid input[type=url],
.FileUploadComponent .InputSurround.invalid input[type=number],
.FileUploadComponent .InputSurround.invalid select,
.FileUploadComponent .InputSurround.invalid textarea,
.SelectComponent .InputSurround.invalid input[type=text],
.SelectComponent .InputSurround.invalid input[type=date],
.SelectComponent .InputSurround.invalid input[type=color],
.SelectComponent .InputSurround.invalid input[type=datetime],
.SelectComponent .InputSurround.invalid input[type=email],
.SelectComponent .InputSurround.invalid input[type=password],
.SelectComponent .InputSurround.invalid input[type=tel],
.SelectComponent .InputSurround.invalid input[type=url],
.SelectComponent .InputSurround.invalid input[type=number],
.SelectComponent .InputSurround.invalid select,
.SelectComponent .InputSurround.invalid textarea,
.TextComponent .InputSurround.invalid input[type=text],
.TextComponent .InputSurround.invalid input[type=date],
.TextComponent .InputSurround.invalid input[type=color],
.TextComponent .InputSurround.invalid input[type=datetime],
.TextComponent .InputSurround.invalid input[type=email],
.TextComponent .InputSurround.invalid input[type=password],
.TextComponent .InputSurround.invalid input[type=tel],
.TextComponent .InputSurround.invalid input[type=url],
.TextComponent .InputSurround.invalid input[type=number],
.TextComponent .InputSurround.invalid select,
.TextComponent .InputSurround.invalid textarea,
.IntegerComponent .InputSurround.invalid input[type=text],
.IntegerComponent .InputSurround.invalid input[type=date],
.IntegerComponent .InputSurround.invalid input[type=color],
.IntegerComponent .InputSurround.invalid input[type=datetime],
.IntegerComponent .InputSurround.invalid input[type=email],
.IntegerComponent .InputSurround.invalid input[type=password],
.IntegerComponent .InputSurround.invalid input[type=tel],
.IntegerComponent .InputSurround.invalid input[type=url],
.IntegerComponent .InputSurround.invalid input[type=number],
.IntegerComponent .InputSurround.invalid select,
.IntegerComponent .InputSurround.invalid textarea,
.CheckBoxListComponent .InputSurround.invalid input[type=text],
.CheckBoxListComponent .InputSurround.invalid input[type=date],
.CheckBoxListComponent .InputSurround.invalid input[type=color],
.CheckBoxListComponent .InputSurround.invalid input[type=datetime],
.CheckBoxListComponent .InputSurround.invalid input[type=email],
.CheckBoxListComponent .InputSurround.invalid input[type=password],
.CheckBoxListComponent .InputSurround.invalid input[type=tel],
.CheckBoxListComponent .InputSurround.invalid input[type=url],
.CheckBoxListComponent .InputSurround.invalid input[type=number],
.CheckBoxListComponent .InputSurround.invalid select,
.CheckBoxListComponent .InputSurround.invalid textarea,
.ListBoxComponent .InputSurround.invalid input[type=text],
.ListBoxComponent .InputSurround.invalid input[type=date],
.ListBoxComponent .InputSurround.invalid input[type=color],
.ListBoxComponent .InputSurround.invalid input[type=datetime],
.ListBoxComponent .InputSurround.invalid input[type=email],
.ListBoxComponent .InputSurround.invalid input[type=password],
.ListBoxComponent .InputSurround.invalid input[type=tel],
.ListBoxComponent .InputSurround.invalid input[type=url],
.ListBoxComponent .InputSurround.invalid input[type=number],
.ListBoxComponent .InputSurround.invalid select,
.ListBoxComponent .InputSurround.invalid textarea,
.TypeAheadComponent .InputSurround.invalid input[type=text],
.TypeAheadComponent .InputSurround.invalid input[type=date],
.TypeAheadComponent .InputSurround.invalid input[type=color],
.TypeAheadComponent .InputSurround.invalid input[type=datetime],
.TypeAheadComponent .InputSurround.invalid input[type=email],
.TypeAheadComponent .InputSurround.invalid input[type=password],
.TypeAheadComponent .InputSurround.invalid input[type=tel],
.TypeAheadComponent .InputSurround.invalid input[type=url],
.TypeAheadComponent .InputSurround.invalid input[type=number],
.TypeAheadComponent .InputSurround.invalid select,
.TypeAheadComponent .InputSurround.invalid textarea,
.DoubleComponent .InputSurround.invalid input[type=text],
.DoubleComponent .InputSurround.invalid input[type=date],
.DoubleComponent .InputSurround.invalid input[type=color],
.DoubleComponent .InputSurround.invalid input[type=datetime],
.DoubleComponent .InputSurround.invalid input[type=email],
.DoubleComponent .InputSurround.invalid input[type=password],
.DoubleComponent .InputSurround.invalid input[type=tel],
.DoubleComponent .InputSurround.invalid input[type=url],
.DoubleComponent .InputSurround.invalid input[type=number],
.DoubleComponent .InputSurround.invalid select,
.DoubleComponent .InputSurround.invalid textarea,
.OrgHierarchyComponent .InputSurround.invalid input[type=text],
.OrgHierarchyComponent .InputSurround.invalid input[type=date],
.OrgHierarchyComponent .InputSurround.invalid input[type=color],
.OrgHierarchyComponent .InputSurround.invalid input[type=datetime],
.OrgHierarchyComponent .InputSurround.invalid input[type=email],
.OrgHierarchyComponent .InputSurround.invalid input[type=password],
.OrgHierarchyComponent .InputSurround.invalid input[type=tel],
.OrgHierarchyComponent .InputSurround.invalid input[type=url],
.OrgHierarchyComponent .InputSurround.invalid input[type=number],
.OrgHierarchyComponent .InputSurround.invalid select,
.OrgHierarchyComponent .InputSurround.invalid textarea,
.RoomPickerComponent .InputSurround.invalid input[type=text],
.RoomPickerComponent .InputSurround.invalid input[type=date],
.RoomPickerComponent .InputSurround.invalid input[type=color],
.RoomPickerComponent .InputSurround.invalid input[type=datetime],
.RoomPickerComponent .InputSurround.invalid input[type=email],
.RoomPickerComponent .InputSurround.invalid input[type=password],
.RoomPickerComponent .InputSurround.invalid input[type=tel],
.RoomPickerComponent .InputSurround.invalid input[type=url],
.RoomPickerComponent .InputSurround.invalid input[type=number],
.RoomPickerComponent .InputSurround.invalid select,
.RoomPickerComponent .InputSurround.invalid textarea,
.ReadOnlyComponent .InputSurround.invalid input[type=text],
.ReadOnlyComponent .InputSurround.invalid input[type=date],
.ReadOnlyComponent .InputSurround.invalid input[type=color],
.ReadOnlyComponent .InputSurround.invalid input[type=datetime],
.ReadOnlyComponent .InputSurround.invalid input[type=email],
.ReadOnlyComponent .InputSurround.invalid input[type=password],
.ReadOnlyComponent .InputSurround.invalid input[type=tel],
.ReadOnlyComponent .InputSurround.invalid input[type=url],
.ReadOnlyComponent .InputSurround.invalid input[type=number],
.ReadOnlyComponent .InputSurround.invalid select,
.ReadOnlyComponent .InputSurround.invalid textarea,
.CurrencyComponent .InputSurround.invalid input[type=text],
.CurrencyComponent .InputSurround.invalid input[type=date],
.CurrencyComponent .InputSurround.invalid input[type=color],
.CurrencyComponent .InputSurround.invalid input[type=datetime],
.CurrencyComponent .InputSurround.invalid input[type=email],
.CurrencyComponent .InputSurround.invalid input[type=password],
.CurrencyComponent .InputSurround.invalid input[type=tel],
.CurrencyComponent .InputSurround.invalid input[type=url],
.CurrencyComponent .InputSurround.invalid input[type=number],
.CurrencyComponent .InputSurround.invalid select,
.CurrencyComponent .InputSurround.invalid textarea {
  border: 0.2rem solid #f94750;
}
.CheckBoxComponent .InputSurround.invalid:has(input[type=file]),
.DatePickerComponent .InputSurround.invalid:has(input[type=file]),
.FileUploadComponent .InputSurround.invalid:has(input[type=file]),
.SelectComponent .InputSurround.invalid:has(input[type=file]),
.TextComponent .InputSurround.invalid:has(input[type=file]),
.IntegerComponent .InputSurround.invalid:has(input[type=file]),
.CheckBoxListComponent .InputSurround.invalid:has(input[type=file]),
.ListBoxComponent .InputSurround.invalid:has(input[type=file]),
.TypeAheadComponent .InputSurround.invalid:has(input[type=file]),
.DoubleComponent .InputSurround.invalid:has(input[type=file]),
.OrgHierarchyComponent .InputSurround.invalid:has(input[type=file]),
.RoomPickerComponent .InputSurround.invalid:has(input[type=file]),
.ReadOnlyComponent .InputSurround.invalid:has(input[type=file]),
.CurrencyComponent .InputSurround.invalid:has(input[type=file]) {
  border: 0.2rem solid #f94750;
}
.CheckBoxComponent .InputSurround:focus-within input[type=text],
.CheckBoxComponent .InputSurround:focus-within input[type=date],
.CheckBoxComponent .InputSurround:focus-within input[type=color],
.CheckBoxComponent .InputSurround:focus-within input[type=datetime],
.CheckBoxComponent .InputSurround:focus-within input[type=email],
.CheckBoxComponent .InputSurround:focus-within input[type=password],
.CheckBoxComponent .InputSurround:focus-within input[type=tel],
.CheckBoxComponent .InputSurround:focus-within input[type=url],
.CheckBoxComponent .InputSurround:focus-within input[type=number],
.CheckBoxComponent .InputSurround:focus-within select,
.CheckBoxComponent .InputSurround:focus-within textarea,
.DatePickerComponent .InputSurround:focus-within input[type=text],
.DatePickerComponent .InputSurround:focus-within input[type=date],
.DatePickerComponent .InputSurround:focus-within input[type=color],
.DatePickerComponent .InputSurround:focus-within input[type=datetime],
.DatePickerComponent .InputSurround:focus-within input[type=email],
.DatePickerComponent .InputSurround:focus-within input[type=password],
.DatePickerComponent .InputSurround:focus-within input[type=tel],
.DatePickerComponent .InputSurround:focus-within input[type=url],
.DatePickerComponent .InputSurround:focus-within input[type=number],
.DatePickerComponent .InputSurround:focus-within select,
.DatePickerComponent .InputSurround:focus-within textarea,
.FileUploadComponent .InputSurround:focus-within input[type=text],
.FileUploadComponent .InputSurround:focus-within input[type=date],
.FileUploadComponent .InputSurround:focus-within input[type=color],
.FileUploadComponent .InputSurround:focus-within input[type=datetime],
.FileUploadComponent .InputSurround:focus-within input[type=email],
.FileUploadComponent .InputSurround:focus-within input[type=password],
.FileUploadComponent .InputSurround:focus-within input[type=tel],
.FileUploadComponent .InputSurround:focus-within input[type=url],
.FileUploadComponent .InputSurround:focus-within input[type=number],
.FileUploadComponent .InputSurround:focus-within select,
.FileUploadComponent .InputSurround:focus-within textarea,
.SelectComponent .InputSurround:focus-within input[type=text],
.SelectComponent .InputSurround:focus-within input[type=date],
.SelectComponent .InputSurround:focus-within input[type=color],
.SelectComponent .InputSurround:focus-within input[type=datetime],
.SelectComponent .InputSurround:focus-within input[type=email],
.SelectComponent .InputSurround:focus-within input[type=password],
.SelectComponent .InputSurround:focus-within input[type=tel],
.SelectComponent .InputSurround:focus-within input[type=url],
.SelectComponent .InputSurround:focus-within input[type=number],
.SelectComponent .InputSurround:focus-within select,
.SelectComponent .InputSurround:focus-within textarea,
.TextComponent .InputSurround:focus-within input[type=text],
.TextComponent .InputSurround:focus-within input[type=date],
.TextComponent .InputSurround:focus-within input[type=color],
.TextComponent .InputSurround:focus-within input[type=datetime],
.TextComponent .InputSurround:focus-within input[type=email],
.TextComponent .InputSurround:focus-within input[type=password],
.TextComponent .InputSurround:focus-within input[type=tel],
.TextComponent .InputSurround:focus-within input[type=url],
.TextComponent .InputSurround:focus-within input[type=number],
.TextComponent .InputSurround:focus-within select,
.TextComponent .InputSurround:focus-within textarea,
.IntegerComponent .InputSurround:focus-within input[type=text],
.IntegerComponent .InputSurround:focus-within input[type=date],
.IntegerComponent .InputSurround:focus-within input[type=color],
.IntegerComponent .InputSurround:focus-within input[type=datetime],
.IntegerComponent .InputSurround:focus-within input[type=email],
.IntegerComponent .InputSurround:focus-within input[type=password],
.IntegerComponent .InputSurround:focus-within input[type=tel],
.IntegerComponent .InputSurround:focus-within input[type=url],
.IntegerComponent .InputSurround:focus-within input[type=number],
.IntegerComponent .InputSurround:focus-within select,
.IntegerComponent .InputSurround:focus-within textarea,
.CheckBoxListComponent .InputSurround:focus-within input[type=text],
.CheckBoxListComponent .InputSurround:focus-within input[type=date],
.CheckBoxListComponent .InputSurround:focus-within input[type=color],
.CheckBoxListComponent .InputSurround:focus-within input[type=datetime],
.CheckBoxListComponent .InputSurround:focus-within input[type=email],
.CheckBoxListComponent .InputSurround:focus-within input[type=password],
.CheckBoxListComponent .InputSurround:focus-within input[type=tel],
.CheckBoxListComponent .InputSurround:focus-within input[type=url],
.CheckBoxListComponent .InputSurround:focus-within input[type=number],
.CheckBoxListComponent .InputSurround:focus-within select,
.CheckBoxListComponent .InputSurround:focus-within textarea,
.ListBoxComponent .InputSurround:focus-within input[type=text],
.ListBoxComponent .InputSurround:focus-within input[type=date],
.ListBoxComponent .InputSurround:focus-within input[type=color],
.ListBoxComponent .InputSurround:focus-within input[type=datetime],
.ListBoxComponent .InputSurround:focus-within input[type=email],
.ListBoxComponent .InputSurround:focus-within input[type=password],
.ListBoxComponent .InputSurround:focus-within input[type=tel],
.ListBoxComponent .InputSurround:focus-within input[type=url],
.ListBoxComponent .InputSurround:focus-within input[type=number],
.ListBoxComponent .InputSurround:focus-within select,
.ListBoxComponent .InputSurround:focus-within textarea,
.TypeAheadComponent .InputSurround:focus-within input[type=text],
.TypeAheadComponent .InputSurround:focus-within input[type=date],
.TypeAheadComponent .InputSurround:focus-within input[type=color],
.TypeAheadComponent .InputSurround:focus-within input[type=datetime],
.TypeAheadComponent .InputSurround:focus-within input[type=email],
.TypeAheadComponent .InputSurround:focus-within input[type=password],
.TypeAheadComponent .InputSurround:focus-within input[type=tel],
.TypeAheadComponent .InputSurround:focus-within input[type=url],
.TypeAheadComponent .InputSurround:focus-within input[type=number],
.TypeAheadComponent .InputSurround:focus-within select,
.TypeAheadComponent .InputSurround:focus-within textarea,
.DoubleComponent .InputSurround:focus-within input[type=text],
.DoubleComponent .InputSurround:focus-within input[type=date],
.DoubleComponent .InputSurround:focus-within input[type=color],
.DoubleComponent .InputSurround:focus-within input[type=datetime],
.DoubleComponent .InputSurround:focus-within input[type=email],
.DoubleComponent .InputSurround:focus-within input[type=password],
.DoubleComponent .InputSurround:focus-within input[type=tel],
.DoubleComponent .InputSurround:focus-within input[type=url],
.DoubleComponent .InputSurround:focus-within input[type=number],
.DoubleComponent .InputSurround:focus-within select,
.DoubleComponent .InputSurround:focus-within textarea,
.OrgHierarchyComponent .InputSurround:focus-within input[type=text],
.OrgHierarchyComponent .InputSurround:focus-within input[type=date],
.OrgHierarchyComponent .InputSurround:focus-within input[type=color],
.OrgHierarchyComponent .InputSurround:focus-within input[type=datetime],
.OrgHierarchyComponent .InputSurround:focus-within input[type=email],
.OrgHierarchyComponent .InputSurround:focus-within input[type=password],
.OrgHierarchyComponent .InputSurround:focus-within input[type=tel],
.OrgHierarchyComponent .InputSurround:focus-within input[type=url],
.OrgHierarchyComponent .InputSurround:focus-within input[type=number],
.OrgHierarchyComponent .InputSurround:focus-within select,
.OrgHierarchyComponent .InputSurround:focus-within textarea,
.RoomPickerComponent .InputSurround:focus-within input[type=text],
.RoomPickerComponent .InputSurround:focus-within input[type=date],
.RoomPickerComponent .InputSurround:focus-within input[type=color],
.RoomPickerComponent .InputSurround:focus-within input[type=datetime],
.RoomPickerComponent .InputSurround:focus-within input[type=email],
.RoomPickerComponent .InputSurround:focus-within input[type=password],
.RoomPickerComponent .InputSurround:focus-within input[type=tel],
.RoomPickerComponent .InputSurround:focus-within input[type=url],
.RoomPickerComponent .InputSurround:focus-within input[type=number],
.RoomPickerComponent .InputSurround:focus-within select,
.RoomPickerComponent .InputSurround:focus-within textarea,
.ReadOnlyComponent .InputSurround:focus-within input[type=text],
.ReadOnlyComponent .InputSurround:focus-within input[type=date],
.ReadOnlyComponent .InputSurround:focus-within input[type=color],
.ReadOnlyComponent .InputSurround:focus-within input[type=datetime],
.ReadOnlyComponent .InputSurround:focus-within input[type=email],
.ReadOnlyComponent .InputSurround:focus-within input[type=password],
.ReadOnlyComponent .InputSurround:focus-within input[type=tel],
.ReadOnlyComponent .InputSurround:focus-within input[type=url],
.ReadOnlyComponent .InputSurround:focus-within input[type=number],
.ReadOnlyComponent .InputSurround:focus-within select,
.ReadOnlyComponent .InputSurround:focus-within textarea,
.CurrencyComponent .InputSurround:focus-within input[type=text],
.CurrencyComponent .InputSurround:focus-within input[type=date],
.CurrencyComponent .InputSurround:focus-within input[type=color],
.CurrencyComponent .InputSurround:focus-within input[type=datetime],
.CurrencyComponent .InputSurround:focus-within input[type=email],
.CurrencyComponent .InputSurround:focus-within input[type=password],
.CurrencyComponent .InputSurround:focus-within input[type=tel],
.CurrencyComponent .InputSurround:focus-within input[type=url],
.CurrencyComponent .InputSurround:focus-within input[type=number],
.CurrencyComponent .InputSurround:focus-within select,
.CurrencyComponent .InputSurround:focus-within textarea {
  border: 0.2rem solid #212127;
}
.CheckBoxComponent input[type=file]::file-selector-button,
.DatePickerComponent input[type=file]::file-selector-button,
.FileUploadComponent input[type=file]::file-selector-button,
.SelectComponent input[type=file]::file-selector-button,
.TextComponent input[type=file]::file-selector-button,
.IntegerComponent input[type=file]::file-selector-button,
.CheckBoxListComponent input[type=file]::file-selector-button,
.ListBoxComponent input[type=file]::file-selector-button,
.TypeAheadComponent input[type=file]::file-selector-button,
.DoubleComponent input[type=file]::file-selector-button,
.OrgHierarchyComponent input[type=file]::file-selector-button,
.RoomPickerComponent input[type=file]::file-selector-button,
.ReadOnlyComponent input[type=file]::file-selector-button,
.CurrencyComponent input[type=file]::file-selector-button {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3em;
  display: inline-block;
  text-decoration: none;
  text-box-edge: cap alphabetic;
  padding: 0.8rem 1rem 0.8rem 1rem;
  border-color: #212127;
  border-radius: 3rem;
  border-style: solid;
  border-width: 0.3rem;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  height: 4.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  text-align: center;
  background-color: transparent;
  cursor: pointer;
  border-width: 0.2rem;
  border-color: #a7a7a9;
}
.CheckBoxComponent input[type=file]::file-selector-button:hover,
.DatePickerComponent input[type=file]::file-selector-button:hover,
.FileUploadComponent input[type=file]::file-selector-button:hover,
.SelectComponent input[type=file]::file-selector-button:hover,
.TextComponent input[type=file]::file-selector-button:hover,
.IntegerComponent input[type=file]::file-selector-button:hover,
.CheckBoxListComponent input[type=file]::file-selector-button:hover,
.ListBoxComponent input[type=file]::file-selector-button:hover,
.TypeAheadComponent input[type=file]::file-selector-button:hover,
.DoubleComponent input[type=file]::file-selector-button:hover,
.OrgHierarchyComponent input[type=file]::file-selector-button:hover,
.RoomPickerComponent input[type=file]::file-selector-button:hover,
.ReadOnlyComponent input[type=file]::file-selector-button:hover,
.CurrencyComponent input[type=file]::file-selector-button:hover {
  background-color: #e8e8e8;
}
.CheckBoxComponent .SupportingText,
.DatePickerComponent .SupportingText,
.FileUploadComponent .SupportingText,
.SelectComponent .SupportingText,
.TextComponent .SupportingText,
.IntegerComponent .SupportingText,
.CheckBoxListComponent .SupportingText,
.ListBoxComponent .SupportingText,
.TypeAheadComponent .SupportingText,
.DoubleComponent .SupportingText,
.OrgHierarchyComponent .SupportingText,
.RoomPickerComponent .SupportingText,
.ReadOnlyComponent .SupportingText,
.CurrencyComponent .SupportingText {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1em;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.CheckBoxComponent .SupportingText.ValidationFailure,
.DatePickerComponent .SupportingText.ValidationFailure,
.FileUploadComponent .SupportingText.ValidationFailure,
.SelectComponent .SupportingText.ValidationFailure,
.TextComponent .SupportingText.ValidationFailure,
.IntegerComponent .SupportingText.ValidationFailure,
.CheckBoxListComponent .SupportingText.ValidationFailure,
.ListBoxComponent .SupportingText.ValidationFailure,
.TypeAheadComponent .SupportingText.ValidationFailure,
.DoubleComponent .SupportingText.ValidationFailure,
.OrgHierarchyComponent .SupportingText.ValidationFailure,
.RoomPickerComponent .SupportingText.ValidationFailure,
.ReadOnlyComponent .SupportingText.ValidationFailure,
.CurrencyComponent .SupportingText.ValidationFailure {
  color: #f94750;
}
.CheckBoxComponent .SupportingText.Informational,
.DatePickerComponent .SupportingText.Informational,
.FileUploadComponent .SupportingText.Informational,
.SelectComponent .SupportingText.Informational,
.TextComponent .SupportingText.Informational,
.IntegerComponent .SupportingText.Informational,
.CheckBoxListComponent .SupportingText.Informational,
.ListBoxComponent .SupportingText.Informational,
.TypeAheadComponent .SupportingText.Informational,
.DoubleComponent .SupportingText.Informational,
.OrgHierarchyComponent .SupportingText.Informational,
.RoomPickerComponent .SupportingText.Informational,
.ReadOnlyComponent .SupportingText.Informational,
.CurrencyComponent .SupportingText.Informational {
  color: #212127;
}
.CheckBoxComponent .SupportingText.Success,
.DatePickerComponent .SupportingText.Success,
.FileUploadComponent .SupportingText.Success,
.SelectComponent .SupportingText.Success,
.TextComponent .SupportingText.Success,
.IntegerComponent .SupportingText.Success,
.CheckBoxListComponent .SupportingText.Success,
.ListBoxComponent .SupportingText.Success,
.TypeAheadComponent .SupportingText.Success,
.DoubleComponent .SupportingText.Success,
.OrgHierarchyComponent .SupportingText.Success,
.RoomPickerComponent .SupportingText.Success,
.ReadOnlyComponent .SupportingText.Success,
.CurrencyComponent .SupportingText.Success {
  color: #0b3618;
}
.CheckBoxComponent.Disabled .ComponentLabelContainer .ComponentLabel label,
.DatePickerComponent.Disabled .ComponentLabelContainer .ComponentLabel label,
.FileUploadComponent.Disabled .ComponentLabelContainer .ComponentLabel label,
.SelectComponent.Disabled .ComponentLabelContainer .ComponentLabel label,
.TextComponent.Disabled .ComponentLabelContainer .ComponentLabel label,
.IntegerComponent.Disabled .ComponentLabelContainer .ComponentLabel label,
.CheckBoxListComponent.Disabled .ComponentLabelContainer .ComponentLabel label,
.ListBoxComponent.Disabled .ComponentLabelContainer .ComponentLabel label,
.TypeAheadComponent.Disabled .ComponentLabelContainer .ComponentLabel label,
.DoubleComponent.Disabled .ComponentLabelContainer .ComponentLabel label,
.OrgHierarchyComponent.Disabled .ComponentLabelContainer .ComponentLabel label,
.RoomPickerComponent.Disabled .ComponentLabelContainer .ComponentLabel label,
.ReadOnlyComponent.Disabled .ComponentLabelContainer .ComponentLabel label,
.CurrencyComponent.Disabled .ComponentLabelContainer .ComponentLabel label {
  color: #a7a7a9;
}
.CheckBoxComponent.Disabled .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.DatePickerComponent.Disabled .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.FileUploadComponent.Disabled .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.SelectComponent.Disabled .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.TextComponent.Disabled .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.IntegerComponent.Disabled .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.CheckBoxListComponent.Disabled .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.ListBoxComponent.Disabled .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.TypeAheadComponent.Disabled .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.DoubleComponent.Disabled .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.OrgHierarchyComponent.Disabled .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.RoomPickerComponent.Disabled .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.ReadOnlyComponent.Disabled .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent,
.CurrencyComponent.Disabled .ComponentLabelContainer .ComponentLabelHelpIcon .InformationIconComponent {
  background-image: url(/Images/v3/TooltipInfoDisabled.svg);
}
.CheckBoxComponent.Disabled input[type=text],
.CheckBoxComponent.Disabled input[type=date],
.CheckBoxComponent.Disabled input[type=color],
.CheckBoxComponent.Disabled input[type=datetime],
.CheckBoxComponent.Disabled input[type=email],
.CheckBoxComponent.Disabled input[type=file],
.CheckBoxComponent.Disabled input[type=password],
.CheckBoxComponent.Disabled input[type=tel],
.CheckBoxComponent.Disabled input[type=url],
.CheckBoxComponent.Disabled input[type=number],
.CheckBoxComponent.Disabled select,
.CheckBoxComponent.Disabled textarea,
.DatePickerComponent.Disabled input[type=text],
.DatePickerComponent.Disabled input[type=date],
.DatePickerComponent.Disabled input[type=color],
.DatePickerComponent.Disabled input[type=datetime],
.DatePickerComponent.Disabled input[type=email],
.DatePickerComponent.Disabled input[type=file],
.DatePickerComponent.Disabled input[type=password],
.DatePickerComponent.Disabled input[type=tel],
.DatePickerComponent.Disabled input[type=url],
.DatePickerComponent.Disabled input[type=number],
.DatePickerComponent.Disabled select,
.DatePickerComponent.Disabled textarea,
.FileUploadComponent.Disabled input[type=text],
.FileUploadComponent.Disabled input[type=date],
.FileUploadComponent.Disabled input[type=color],
.FileUploadComponent.Disabled input[type=datetime],
.FileUploadComponent.Disabled input[type=email],
.FileUploadComponent.Disabled input[type=file],
.FileUploadComponent.Disabled input[type=password],
.FileUploadComponent.Disabled input[type=tel],
.FileUploadComponent.Disabled input[type=url],
.FileUploadComponent.Disabled input[type=number],
.FileUploadComponent.Disabled select,
.FileUploadComponent.Disabled textarea,
.SelectComponent.Disabled input[type=text],
.SelectComponent.Disabled input[type=date],
.SelectComponent.Disabled input[type=color],
.SelectComponent.Disabled input[type=datetime],
.SelectComponent.Disabled input[type=email],
.SelectComponent.Disabled input[type=file],
.SelectComponent.Disabled input[type=password],
.SelectComponent.Disabled input[type=tel],
.SelectComponent.Disabled input[type=url],
.SelectComponent.Disabled input[type=number],
.SelectComponent.Disabled select,
.SelectComponent.Disabled textarea,
.TextComponent.Disabled input[type=text],
.TextComponent.Disabled input[type=date],
.TextComponent.Disabled input[type=color],
.TextComponent.Disabled input[type=datetime],
.TextComponent.Disabled input[type=email],
.TextComponent.Disabled input[type=file],
.TextComponent.Disabled input[type=password],
.TextComponent.Disabled input[type=tel],
.TextComponent.Disabled input[type=url],
.TextComponent.Disabled input[type=number],
.TextComponent.Disabled select,
.TextComponent.Disabled textarea,
.IntegerComponent.Disabled input[type=text],
.IntegerComponent.Disabled input[type=date],
.IntegerComponent.Disabled input[type=color],
.IntegerComponent.Disabled input[type=datetime],
.IntegerComponent.Disabled input[type=email],
.IntegerComponent.Disabled input[type=file],
.IntegerComponent.Disabled input[type=password],
.IntegerComponent.Disabled input[type=tel],
.IntegerComponent.Disabled input[type=url],
.IntegerComponent.Disabled input[type=number],
.IntegerComponent.Disabled select,
.IntegerComponent.Disabled textarea,
.CheckBoxListComponent.Disabled input[type=text],
.CheckBoxListComponent.Disabled input[type=date],
.CheckBoxListComponent.Disabled input[type=color],
.CheckBoxListComponent.Disabled input[type=datetime],
.CheckBoxListComponent.Disabled input[type=email],
.CheckBoxListComponent.Disabled input[type=file],
.CheckBoxListComponent.Disabled input[type=password],
.CheckBoxListComponent.Disabled input[type=tel],
.CheckBoxListComponent.Disabled input[type=url],
.CheckBoxListComponent.Disabled input[type=number],
.CheckBoxListComponent.Disabled select,
.CheckBoxListComponent.Disabled textarea,
.ListBoxComponent.Disabled input[type=text],
.ListBoxComponent.Disabled input[type=date],
.ListBoxComponent.Disabled input[type=color],
.ListBoxComponent.Disabled input[type=datetime],
.ListBoxComponent.Disabled input[type=email],
.ListBoxComponent.Disabled input[type=file],
.ListBoxComponent.Disabled input[type=password],
.ListBoxComponent.Disabled input[type=tel],
.ListBoxComponent.Disabled input[type=url],
.ListBoxComponent.Disabled input[type=number],
.ListBoxComponent.Disabled select,
.ListBoxComponent.Disabled textarea,
.TypeAheadComponent.Disabled input[type=text],
.TypeAheadComponent.Disabled input[type=date],
.TypeAheadComponent.Disabled input[type=color],
.TypeAheadComponent.Disabled input[type=datetime],
.TypeAheadComponent.Disabled input[type=email],
.TypeAheadComponent.Disabled input[type=file],
.TypeAheadComponent.Disabled input[type=password],
.TypeAheadComponent.Disabled input[type=tel],
.TypeAheadComponent.Disabled input[type=url],
.TypeAheadComponent.Disabled input[type=number],
.TypeAheadComponent.Disabled select,
.TypeAheadComponent.Disabled textarea,
.DoubleComponent.Disabled input[type=text],
.DoubleComponent.Disabled input[type=date],
.DoubleComponent.Disabled input[type=color],
.DoubleComponent.Disabled input[type=datetime],
.DoubleComponent.Disabled input[type=email],
.DoubleComponent.Disabled input[type=file],
.DoubleComponent.Disabled input[type=password],
.DoubleComponent.Disabled input[type=tel],
.DoubleComponent.Disabled input[type=url],
.DoubleComponent.Disabled input[type=number],
.DoubleComponent.Disabled select,
.DoubleComponent.Disabled textarea,
.OrgHierarchyComponent.Disabled input[type=text],
.OrgHierarchyComponent.Disabled input[type=date],
.OrgHierarchyComponent.Disabled input[type=color],
.OrgHierarchyComponent.Disabled input[type=datetime],
.OrgHierarchyComponent.Disabled input[type=email],
.OrgHierarchyComponent.Disabled input[type=file],
.OrgHierarchyComponent.Disabled input[type=password],
.OrgHierarchyComponent.Disabled input[type=tel],
.OrgHierarchyComponent.Disabled input[type=url],
.OrgHierarchyComponent.Disabled input[type=number],
.OrgHierarchyComponent.Disabled select,
.OrgHierarchyComponent.Disabled textarea,
.RoomPickerComponent.Disabled input[type=text],
.RoomPickerComponent.Disabled input[type=date],
.RoomPickerComponent.Disabled input[type=color],
.RoomPickerComponent.Disabled input[type=datetime],
.RoomPickerComponent.Disabled input[type=email],
.RoomPickerComponent.Disabled input[type=file],
.RoomPickerComponent.Disabled input[type=password],
.RoomPickerComponent.Disabled input[type=tel],
.RoomPickerComponent.Disabled input[type=url],
.RoomPickerComponent.Disabled input[type=number],
.RoomPickerComponent.Disabled select,
.RoomPickerComponent.Disabled textarea,
.ReadOnlyComponent.Disabled input[type=text],
.ReadOnlyComponent.Disabled input[type=date],
.ReadOnlyComponent.Disabled input[type=color],
.ReadOnlyComponent.Disabled input[type=datetime],
.ReadOnlyComponent.Disabled input[type=email],
.ReadOnlyComponent.Disabled input[type=file],
.ReadOnlyComponent.Disabled input[type=password],
.ReadOnlyComponent.Disabled input[type=tel],
.ReadOnlyComponent.Disabled input[type=url],
.ReadOnlyComponent.Disabled input[type=number],
.ReadOnlyComponent.Disabled select,
.ReadOnlyComponent.Disabled textarea,
.CurrencyComponent.Disabled input[type=text],
.CurrencyComponent.Disabled input[type=date],
.CurrencyComponent.Disabled input[type=color],
.CurrencyComponent.Disabled input[type=datetime],
.CurrencyComponent.Disabled input[type=email],
.CurrencyComponent.Disabled input[type=file],
.CurrencyComponent.Disabled input[type=password],
.CurrencyComponent.Disabled input[type=tel],
.CurrencyComponent.Disabled input[type=url],
.CurrencyComponent.Disabled input[type=number],
.CurrencyComponent.Disabled select,
.CurrencyComponent.Disabled textarea {
  border: 0.2rem solid #dededf;
  color: #a7a7a9;
}
.CheckBoxComponent.Disabled .SupportingText.ValidationFailure, .CheckBoxComponent.Disabled .SupportingText.Informational, .CheckBoxComponent.Disabled .SupportingText.Success,
.DatePickerComponent.Disabled .SupportingText.ValidationFailure,
.DatePickerComponent.Disabled .SupportingText.Informational,
.DatePickerComponent.Disabled .SupportingText.Success,
.FileUploadComponent.Disabled .SupportingText.ValidationFailure,
.FileUploadComponent.Disabled .SupportingText.Informational,
.FileUploadComponent.Disabled .SupportingText.Success,
.SelectComponent.Disabled .SupportingText.ValidationFailure,
.SelectComponent.Disabled .SupportingText.Informational,
.SelectComponent.Disabled .SupportingText.Success,
.TextComponent.Disabled .SupportingText.ValidationFailure,
.TextComponent.Disabled .SupportingText.Informational,
.TextComponent.Disabled .SupportingText.Success,
.IntegerComponent.Disabled .SupportingText.ValidationFailure,
.IntegerComponent.Disabled .SupportingText.Informational,
.IntegerComponent.Disabled .SupportingText.Success,
.CheckBoxListComponent.Disabled .SupportingText.ValidationFailure,
.CheckBoxListComponent.Disabled .SupportingText.Informational,
.CheckBoxListComponent.Disabled .SupportingText.Success,
.ListBoxComponent.Disabled .SupportingText.ValidationFailure,
.ListBoxComponent.Disabled .SupportingText.Informational,
.ListBoxComponent.Disabled .SupportingText.Success,
.TypeAheadComponent.Disabled .SupportingText.ValidationFailure,
.TypeAheadComponent.Disabled .SupportingText.Informational,
.TypeAheadComponent.Disabled .SupportingText.Success,
.DoubleComponent.Disabled .SupportingText.ValidationFailure,
.DoubleComponent.Disabled .SupportingText.Informational,
.DoubleComponent.Disabled .SupportingText.Success,
.OrgHierarchyComponent.Disabled .SupportingText.ValidationFailure,
.OrgHierarchyComponent.Disabled .SupportingText.Informational,
.OrgHierarchyComponent.Disabled .SupportingText.Success,
.RoomPickerComponent.Disabled .SupportingText.ValidationFailure,
.RoomPickerComponent.Disabled .SupportingText.Informational,
.RoomPickerComponent.Disabled .SupportingText.Success,
.ReadOnlyComponent.Disabled .SupportingText.ValidationFailure,
.ReadOnlyComponent.Disabled .SupportingText.Informational,
.ReadOnlyComponent.Disabled .SupportingText.Success,
.CurrencyComponent.Disabled .SupportingText.ValidationFailure,
.CurrencyComponent.Disabled .SupportingText.Informational,
.CurrencyComponent.Disabled .SupportingText.Success {
  color: #a7a7a9;
}

.ReadOnlyComponent .InputSurround .Label {
  display: block;
  padding-bottom: 0.5rem;
  font-weight: 700;
  line-height: 1em;
}
.ReadOnlyComponent .InputSurround .Text .Important {
  font-weight: 700;
  color: #f94750;
}
.ReadOnlyComponent .InputSurround .Text .Bold {
  font-weight: 700;
}

.CheckBoxComponent {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.CheckBoxComponent.WidthSquished {
  max-width: unset;
  min-width: unset;
  width: unset;
}
.CheckBoxComponent.WidthSquished .InputSurround {
  display: inline-flex;
}
.CheckBoxComponent .InputSurround {
  display: flex;
  flex-wrap: nowrap;
  column-gap: 1rem;
}
.CheckBoxComponent .InputSurround .CheckboxElementContainer {
  flex: 0 0 content;
}
.CheckBoxComponent .InputSurround .CheckBoxLabel {
  flex: 1 1 auto;
}
.CheckBoxComponent .InputSurround .CheckBoxLabel.TruncateLabelText { /* This class should reside above <label> in the DOM tree because some components simulate a label without using the <label> element */
  overflow: hidden;
}
.CheckBoxComponent .InputSurround .CheckBoxLabel.TruncateLabelText label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.CheckBoxComponent .InputSurround .CheckBoxLabel label {
  display: block;
  margin-top: -1px;
}
.CheckBoxComponent .InputSurround .CheckBoxLabel label.BoldLabelFont {
  font-weight: 700;
}
.CheckBoxComponent .InputSurround .ComponentLabelHelpIcon {
  flex: 0 0 auto;
  margin-left: auto;
}
.CheckBoxComponent.Disabled .InputSurround .CheckBoxLabel label {
  color: #a7a7a9;
}
.CheckBoxComponent.Disabled .InputSurround .ComponentLabelHelpIcon .InformationIconComponent {
  background-image: url(/Images/v3/TooltipInfoDisabled.svg);
}
.CheckBoxComponent.Disabled .SupportingText.ValidationFailure, .CheckBoxComponent.Disabled .SupportingText.Informational, .CheckBoxComponent.Disabled .SupportingText.Success {
  color: #a7a7a9;
}

.DoubleComponent .InputSurround .DoubleComponentInput,
.DoubleComponent .InputSurround .IntegerComponentInput,
.IntegerComponent .InputSurround .DoubleComponentInput,
.IntegerComponent .InputSurround .IntegerComponentInput {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.DoubleComponent .InputSurround .DoubleComponentInput input,
.DoubleComponent .InputSurround .IntegerComponentInput input,
.IntegerComponent .InputSurround .DoubleComponentInput input,
.IntegerComponent .InputSurround .IntegerComponentInput input {
  flex: 1 1 auto;
}
.DoubleComponent .InputSurround .DoubleComponentInput.RightOverlayPadding,
.DoubleComponent .InputSurround .IntegerComponentInput.RightOverlayPadding,
.IntegerComponent .InputSurround .DoubleComponentInput.RightOverlayPadding,
.IntegerComponent .InputSurround .IntegerComponentInput.RightOverlayPadding {
  position: relative;
}
.DoubleComponent .InputSurround .DoubleComponentInput.RightOverlayPadding .RightOverlaidText,
.DoubleComponent .InputSurround .IntegerComponentInput.RightOverlayPadding .RightOverlaidText,
.IntegerComponent .InputSurround .DoubleComponentInput.RightOverlayPadding .RightOverlaidText,
.IntegerComponent .InputSurround .IntegerComponentInput.RightOverlayPadding .RightOverlaidText {
  right: 1rem;
}
.DoubleComponent .InputSurround .DoubleComponentInput.RightOverlayPadding input,
.DoubleComponent .InputSurround .IntegerComponentInput.RightOverlayPadding input,
.IntegerComponent .InputSurround .DoubleComponentInput.RightOverlayPadding input,
.IntegerComponent .InputSurround .IntegerComponentInput.RightOverlayPadding input {
  padding-right: 3rem;
}
.DoubleComponent .InputSurround .DoubleComponentInput.RightOverlayPadding input[type=number],
.DoubleComponent .InputSurround .IntegerComponentInput.RightOverlayPadding input[type=number],
.IntegerComponent .InputSurround .DoubleComponentInput.RightOverlayPadding input[type=number],
.IntegerComponent .InputSurround .IntegerComponentInput.RightOverlayPadding input[type=number] {
  -moz-appearance: textfield;
}
.DoubleComponent .InputSurround .DoubleComponentInput.RightOverlayPadding input[type=number]::-webkit-outer-spin-button, .DoubleComponent .InputSurround .DoubleComponentInput.RightOverlayPadding input[type=number]::-webkit-inner-spin-button,
.DoubleComponent .InputSurround .IntegerComponentInput.RightOverlayPadding input[type=number]::-webkit-outer-spin-button,
.DoubleComponent .InputSurround .IntegerComponentInput.RightOverlayPadding input[type=number]::-webkit-inner-spin-button,
.IntegerComponent .InputSurround .DoubleComponentInput.RightOverlayPadding input[type=number]::-webkit-outer-spin-button,
.IntegerComponent .InputSurround .DoubleComponentInput.RightOverlayPadding input[type=number]::-webkit-inner-spin-button,
.IntegerComponent .InputSurround .IntegerComponentInput.RightOverlayPadding input[type=number]::-webkit-outer-spin-button,
.IntegerComponent .InputSurround .IntegerComponentInput.RightOverlayPadding input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.DoubleComponent .InputSurround .DoubleComponentInput span,
.DoubleComponent .InputSurround .IntegerComponentInput span,
.IntegerComponent .InputSurround .DoubleComponentInput span,
.IntegerComponent .InputSurround .IntegerComponentInput span {
  flex: 0 0 auto;
  display: inline-block;
  height: 100%;
  padding-left: 0.5rem;
}
.DoubleComponent .InputSurround .DoubleComponentInput.Percentage.RightOverlayPadding .RightOverlaidText,
.DoubleComponent .InputSurround .IntegerComponentInput.Percentage.RightOverlayPadding .RightOverlaidText,
.IntegerComponent .InputSurround .DoubleComponentInput.Percentage.RightOverlayPadding .RightOverlaidText,
.IntegerComponent .InputSurround .IntegerComponentInput.Percentage.RightOverlayPadding .RightOverlaidText {
  font-size: 140%;
}

.CurrencyComponent .ComponentContainer,
.IntegerComponent .ComponentContainer,
.DoubleComponent .ComponentContainer {
  position: relative;
}
.CurrencyComponent .ComponentContainer .LeftOverlaidText,
.IntegerComponent .ComponentContainer .LeftOverlaidText,
.DoubleComponent .ComponentContainer .LeftOverlaidText {
  right: 12.25rem;
  font-size: 150%;
}
.CurrencyComponent .ComponentContainer .LeftOverlaidText.TwoChars,
.IntegerComponent .ComponentContainer .LeftOverlaidText.TwoChars,
.DoubleComponent .ComponentContainer .LeftOverlaidText.TwoChars {
  font-size: 125%;
}
.CurrencyComponent .ComponentContainer .LeftOverlaidText.ThreeChars,
.IntegerComponent .ComponentContainer .LeftOverlaidText.ThreeChars,
.DoubleComponent .ComponentContainer .LeftOverlaidText.ThreeChars {
  font-size: 75%;
}
.CurrencyComponent .ComponentContainer .RightOverlaidText,
.IntegerComponent .ComponentContainer .RightOverlaidText,
.DoubleComponent .ComponentContainer .RightOverlaidText {
  right: 1rem;
  font-size: 100%;
}
.CurrencyComponent .ComponentContainer .RightOverlaidText.ThreeChars,
.IntegerComponent .ComponentContainer .RightOverlaidText.ThreeChars,
.DoubleComponent .ComponentContainer .RightOverlaidText.ThreeChars {
  font-size: 75%;
}
.CurrencyComponent .ComponentContainer .LeftOverlaidText,
.CurrencyComponent .ComponentContainer .RightOverlaidText,
.IntegerComponent .ComponentContainer .LeftOverlaidText,
.IntegerComponent .ComponentContainer .RightOverlaidText,
.DoubleComponent .ComponentContainer .LeftOverlaidText,
.DoubleComponent .ComponentContainer .RightOverlaidText {
  position: absolute;
  color: #a7a7a9;
  overflow: hidden;
  line-height: unset;
  top: 1rem;
  text-align: left;
}
.CurrencyComponent .ComponentContainer select,
.IntegerComponent .ComponentContainer select,
.DoubleComponent .ComponentContainer select {
  max-width: 15rem;
  width: 15rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(/Images/Icons/DropSelectionArrow.svg), url(/Images/Components/SelectComponentVerticalSeparator.svg);
  background-position: right 1.1rem top 1.5rem, right 3.2rem top 0.4rem;
  background-repeat: no-repeat, no-repeat;
  background-size: 1rem 1rem, 1px 3rem;
  padding-right: 5rem;
  text-overflow: ellipsis;
}
.CurrencyComponent .ComponentContainer input,
.IntegerComponent .ComponentContainer input,
.DoubleComponent .ComponentContainer input {
  max-width: 15rem;
  width: 15rem;
}
.CurrencyComponent .ComponentContainer input[type=number],
.IntegerComponent .ComponentContainer input[type=number],
.DoubleComponent .ComponentContainer input[type=number] {
  -moz-appearance: textfield;
}
.CurrencyComponent .ComponentContainer input[type=number]::-webkit-outer-spin-button, .CurrencyComponent .ComponentContainer input[type=number]::-webkit-inner-spin-button,
.IntegerComponent .ComponentContainer input[type=number]::-webkit-outer-spin-button,
.IntegerComponent .ComponentContainer input[type=number]::-webkit-inner-spin-button,
.DoubleComponent .ComponentContainer input[type=number]::-webkit-outer-spin-button,
.DoubleComponent .ComponentContainer input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.CurrencyComponent .ComponentContainer:has(.RightOverlaidText) input,
.IntegerComponent .ComponentContainer:has(.RightOverlaidText) input,
.DoubleComponent .ComponentContainer:has(.RightOverlaidText) input {
  padding-right: 4rem;
}
.CurrencyComponent .ComponentContainer:has(.LeftOverlaidText) input,
.IntegerComponent .ComponentContainer:has(.LeftOverlaidText) input,
.DoubleComponent .ComponentContainer:has(.LeftOverlaidText) input {
  padding-left: 4rem;
}

.CurrencyComponent .ComponentContainer {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.CurrencyComponent .ComponentContainer select {
  line-height: unset;
}

.SelectComponent .InputSurround select {
  line-height: unset;
}

.OrgHierarchyComponent .TypeAhead,
.RoomPickerComponent .TypeAhead {
  margin-bottom: 1rem;
}

.CheckBoxListComponent .InputSurround .Results {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 20rem;
  overflow-y: auto;
  border: 0.2rem solid #a7a7a9;
  border-radius: 0.5rem;
  padding: 0.8rem 1rem 0.8rem 1rem;
  background-color: #ffffff;
}
.CheckBoxListComponent .InputSurround .Results label {
  display: flex;
  flex-wrap: nowrap;
  line-height: 1.5em;
  flex-direction: row;
  align-items: center;
}
.CheckBoxListComponent .InputSurround .Results label input[type=checkbox] {
  margin-top: 4px;
  margin-left: 0;
  margin-right: 1rem;
}
.CheckBoxListComponent .InputSurround .Results label span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.CheckBoxListComponent .InputSurround .Results label:has(input[type=checkbox]:focus-visible) {
  outline: 0.2rem solid #212127;
}
.CheckBoxListComponent .InputSurround .Results .CheckBoxListComponentSelectAll {
  font-weight: 700;
}

.TypeAheadComponent {
  position: relative;
}
.TypeAheadComponent .TypeAhead {
  border: 0.2rem solid #a7a7a9;
  border-radius: 0.5rem;
  padding: 0.8rem 1rem 0.8rem 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(/Images/Icons/DropSelectionArrow.svg), url(/Images/Components/SelectComponentVerticalSeparator.svg);
  background-position: right 1.1rem top 1.5rem, right 3.2rem top 0.4rem;
  background-repeat: no-repeat, no-repeat;
  background-size: 1rem 1rem, 1px 3rem;
  padding-right: 5rem;
  text-overflow: ellipsis;
  background-color: #ffffff;
  height: 4.2rem;
}
.TypeAheadComponent .TypeAhead .InputSurround > div[tabindex] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: unset;
}
.TypeAheadComponent .TypeAhead:has(div[tabindex]:empty) {
  min-height: 45px;
}
.TypeAheadComponent .DropDownContainer {
  display: none;
}
.TypeAheadComponent:has(.DropDownContainer.ShowList) .TypeAhead {
  border: 0.2rem solid #212127;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.TypeAheadComponent:has(.DropDownContainer.ShowList) .DropDownContainer.ShowList {
  border: 0.2rem solid #212127;
  /* Active state to show list of items */
  display: block;
  position: absolute;
  z-index: 10;
  top: 62px;
  left: 0;
  right: 0;
  background-color: #fcfcfc;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.TypeAheadComponent:has(.DropDownContainer.ShowList) .DropDownContainer .DropDownSearchContainer input[type=text] {
  background-position: center left 1rem;
  padding-right: 4rem;
}
.TypeAheadComponent:has(.DropDownContainer.ShowList) .DropDownContainer .NoMatchesFound {
  padding-left: 1rem;
}
.TypeAheadComponent:has(.DropDownContainer.ShowList) .DropDownContainer .TypeAheadSelectContainer {
  overflow-x: hidden;
  overflow-y: scroll;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  max-height: 50vh;
}
.TypeAheadComponent:has(.DropDownContainer.ShowList) .DropDownContainer .TypeAheadSelectContainer ul {
  list-style: none;
  border-color: transparent;
  overflow-x: hidden;
  max-width: 100%;
  padding: 0.5rem;
  margin: 0.5rem;
}
.TypeAheadComponent:has(.DropDownContainer.ShowList) .DropDownContainer .TypeAheadSelectContainer ul li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}
.TypeAheadComponent:has(.DropDownContainer.ShowList) .DropDownContainer .TypeAheadSelectContainer ul li:hover {
  background-color: #dededf;
}
.TypeAheadComponent:has(.DropDownContainer.ShowList) .DropDownContainer .TypeAheadSelectContainer ul li.selected {
  background-color: #dededf;
}
.TypeAheadComponent:not(:has(.ComponentLabelContainer)):has(.DropDownContainer.ShowList) .DropDownContainer.ShowList {
  top: 38px;
}

.UserSearchComponent {
  border: 0.2rem solid #e8e8e8;
  border-radius: 2rem;
  padding: 2rem;
}
.UserSearchComponent .SearchBarContainer {
  text-align: center;
}
.UserSearchComponent .SearchBarContainer .InputSurround {
  margin-bottom: 0;
  margin-top: 0;
}
.UserSearchComponent .SearchBarContainer .SearchBar {
  display: flex;
  gap: 2rem;
  flex-direction: column;
}
.UserSearchComponent .SearchBarContainer .SearchBar .SearchTextBoxContainer .TextComponent {
  width: unset;
  max-width: unset;
  margin-bottom: 0;
}
.UserSearchComponent .SearchBarContainer .SearchBar .SearchTextBoxContainer .TextComponent input[type=text] {
  width: 100%;
}
.UserSearchComponent .SearchBarContainer .SearchBar .SearchTextBoxContainer .TextComponent label {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}
.UserSearchComponent .SearchBarContainer .ButtonFilter {
  margin-bottom: 0.5rem;
}
.UserSearchComponent .SearchTags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.CurrencyComponent select,
.TypeAheadComponent select {
  background-image: none;
}

.DatePickerComponent input[type=date]::-webkit-calendar-picker-indicator,
.DatePickerComponent input[type=datetime]::-webkit-calendar-picker-indicator,
.DatePickerComponent input[type=datetime-local]::-webkit-calendar-picker-indicator {
  background-image: url(/Images/v3/Event_Calendar.svg);
  height: 2rem;
  width: 2rem;
  padding: 10px 6px;
  margin-right: -10px;
  background-color: #e8e8e8;
}
.DatePickerComponent.Disabled input[type=date]::-webkit-calendar-picker-indicator,
.DatePickerComponent.Disabled input[type=datetime]::-webkit-calendar-picker-indicator,
.DatePickerComponent.Disabled input[type=datetime-local]::-webkit-calendar-picker-indicator {
  background-image: url(/Images/v3/Event_Calendar_Disabled.svg);
}
.DatePickerComponent.No-Value input[type=date],
.DatePickerComponent.No-Value input[type=datetime],
.DatePickerComponent.No-Value input[type=datetime-local] {
  color: #a7a7a9;
}

@-moz-document url-prefix() {
  .DatePickerComponent input[type=date],
  .DatePickerComponent input[type=datetime],
  .DatePickerComponent input[type=datetime-local] {
    letter-spacing: -0.05em;
  }
}
.ListBoxComponent .InputSurround select {
  /* Standard select element in ListBoxComponent does not require bespoke down arrow because it always has all options displayed */
  background-image: none;
  overflow-x: hidden;
  text-overflow: ellipsis;
  padding-right: 0.5rem;
}
.ListBoxComponent .InputSurround select option {
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.WidthMatchFormComponents {
  max-width: 32rem;
  width: 32rem;
}

.Width100Maximum1000 {
  width: 100%;
  max-width: 1000px;
}
.Width100Maximum1000 tbody tr td:first-of-type {
  padding-right: 1.5rem;
}

.SearchAgainComponent .SearchAgainContainer {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 1rem 1rem 1rem 0;
  background-color: #fcfcfc;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.SearchAgainComponent .SearchAgainContainer .BtnContainer {
  flex: 0 1 auto;
}
.SearchAgainComponent .SearchAgainContainer .MsgContainer {
  flex: 1 1 auto;
}
@media all and (min-width: 769px) {
  .SearchAgainComponent .SearchAgainContainer {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
}

.DateCalculationComponent {
  margin-bottom: 1.5rem;
}
.DateCalculationComponent .ComponentLabelContainer {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  padding-bottom: 0;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.DateCalculationComponent .ComponentLabelContainer .ComponentLabel {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3em;
}
.DateCalculationComponent .InputSurround {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
}
.DateCalculationComponent .InputSurround input[type=number] {
  max-width: 15rem;
  width: 15rem;
}
.DateCalculationComponent .InputSurround select {
  max-width: 15rem;
  width: 15rem;
}

@media all and (min-width: 769px) {
  .UserSearchComponent .SearchBarContainer {
    text-align: left;
  }
  .UserSearchComponent .SearchBarContainer .SearchBar {
    flex-wrap: wrap;
    flex-direction: row;
    gap: 1rem;
  }
  .UserSearchComponent .SearchBarContainer .SearchBar .SearchTextBoxContainer {
    flex: 1 1 auto;
  }
  .UserSearchComponent .SearchBarContainer .SearchBar .SearchButtonContainer {
    flex: 1 1 auto;
    position: relative;
  }
  .UserSearchComponent .SearchBarContainer .SearchBar .SearchButtonContainer .ButtonPrimary {
    position: absolute;
    bottom: 0;
  }
}
/* #region SearchTags & Tags */
.SearchTagContainerScrollable {
  max-height: 24rem;
  overflow-y: scroll;
  border-bottom-right-radius: 0;
}

.SearchTags {
  max-height: 24rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.SearchTagsScrollable {
  border: 0.2rem solid #a7a7a9;
  border-radius: 0.5rem;
  width: 32rem;
  max-height: 24rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  overflow-y: auto;
  padding: 1rem;
}

.SearchTags + .SearchTags {
  margin-top: 0.5rem;
}

.Tag {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6em;
  display: inline-flex;
  align-items: center;
  background: #e8e8e8;
  border-radius: 1rem;
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
  gap: 1rem;
  text-align: center;
}
.Tag .Tag-Link {
  display: flex;
  gap: 1rem;
  text-decoration: none;
}
.Tag .TagIcon {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6em;
  flex: 0 0 auto;
  text-align: right;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  background-position: center center;
}
.Tag .TagIcon img {
  width: 1rem;
  height: 1rem;
}
.Tag .TagLabel {
  flex: 1 1 auto;
}
.Tag .TagLabel a {
  color: #212127;
  display: block;
  text-decoration: none;
  max-width: 23rem;
  text-overflow: ellipsis;
  overflow: hidden;
}
.Tag .TagLabel a:hover {
  color: #212127;
}
.Tag .TagAdditionalText {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6em;
  flex: 0 0 auto;
  border-radius: 1rem;
  background-color: #3f3f45;
  color: #ffffff;
  height: 1.5rem;
  line-height: 1.5rem;
  min-width: 2rem;
  text-align: center;
}
.Tag:has(.TagButton) {
  padding-left: 0.5rem;
}
.Tag:has(.TagAdditionalText) {
  padding-right: 0.2rem;
}
.Tag.TagNeutral, .Tag.TagSuccess, .Tag.TagWarning, .Tag.TagDanger, .Tag.TagInformation, .Tag.TagUnformatted, .Tag.TagBoldOnly {
  border-width: 0.1rem;
  border-style: solid;
}
.Tag.TagNeutral .TagLabel, .Tag.TagSuccess .TagLabel, .Tag.TagWarning .TagLabel, .Tag.TagDanger .TagLabel, .Tag.TagInformation .TagLabel, .Tag.TagNeutral .TagLabel, .Tag.TagBoldOnly .TagLabel {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6em;
}
.Tag.TagLight {
  border-color: #a7a7a9;
  background-color: #e8e8e8;
}
.Tag.TagLight .TagLabel {
  color: #212127;
}
.Tag.TagDark {
  border-color: #212127;
  background-color: #3f3f45;
}
.Tag.TagDark .TagLabel {
  color: #fcfcfc;
}
.Tag.TagSuccess.TagLight {
  border-color: #25a649;
  background-color: #deffe7;
}
.Tag.TagSuccess.TagLight .TagLabel {
  color: #0b3618;
}
.Tag.TagSuccess.TagMedium {
  border-color: #25a649;
  background-color: #4ad571;
}
.Tag.TagSuccess.TagMedium .TagLabel {
  color: #0b3618;
}
.Tag.TagSuccess.TagDark {
  border-color: #25a649;
  background-color: #0b3618;
}
.Tag.TagSuccess.TagDark .TagLabel {
  color: #deffe7;
}
.Tag.TagWarning.TagLight {
  border-color: #fdce35;
  background-color: #fff5d7;
}
.Tag.TagWarning.TagLight .TagLabel {
  color: #594500;
}
.Tag.TagWarning.TagMedium {
  border-color: #fdce35;
  background-color: #ffde72;
}
.Tag.TagWarning.TagMedium .TagLabel {
  color: #594500;
}
.Tag.TagWarning.TagDark {
  border-color: #fdce35;
  background-color: #594500;
}
.Tag.TagWarning.TagDark .TagLabel {
  color: #fff5d7;
}
.Tag.TagDanger.TagLight {
  border-color: #f94750;
  background-color: #feebec;
}
.Tag.TagDanger.TagLight .TagLabel {
  color: #2e0607;
}
.Tag.TagDanger.TagMedium {
  border-color: #f94750;
  background-color: #ff747a;
}
.Tag.TagDanger.TagMedium .TagLabel {
  color: #2e0607;
}
.Tag.TagDanger.TagDark {
  border-color: #f94750;
  background-color: #2e0607;
}
.Tag.TagDanger.TagDark .TagLabel {
  color: #feebec;
}
.Tag.TagInformation.TagLight {
  border-color: #1296e9;
  background-color: #dcf2ff;
}
.Tag.TagInformation.TagLight .TagLabel {
  color: #002658;
}
.Tag.TagInformation.TagMedium {
  border-color: #1296e9;
  background-color: #93d5ff;
}
.Tag.TagInformation.TagMedium .TagLabel {
  color: #002658;
}
.Tag.TagInformation.TagDark {
  border-color: #1296e9;
  background-color: #002658;
}
.Tag.TagInformation.TagDark .TagLabel {
  color: #dcf2ff;
}
.Tag.TagUnformatted.TagTransparent, .Tag.TagBoldOnly.TagTransparent {
  border-color: transparent;
  background-color: transparent;
}
.Tag.TagAction {
  border-color: #dededf;
  background-color: #dededf;
  text-align: left;
}
.Tag.TagAction:hover {
  background-color: #e8e8e8;
}
.Tag.TagAction .TagButton button {
  display: block;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  background-position: center center;
  background-color: transparent;
  border: none;
}
.Tag.TagAction .TagLabel {
  color: #212127;
}
.Tag.TagAction.TagActionDeleteAll {
  border-color: #3f3f45;
  background-color: #3f3f45;
  margin-bottom: 1rem;
}
.Tag.TagAction.TagActionDeleteAll:hover {
  background-color: #57575a;
}
.Tag.TagAction.TagActionDeleteAll .TagButton button {
  background-image: url(/Images/ButtonIcons/TagActionClearLight.svg);
}
.Tag.TagAction.TagActionDeleteAll .TagLabel a {
  color: #ffffff;
}
.Tag.TagAction.TagActionDeleteAll:hover .TagButton button {
  background-image: url(/Images/ButtonIcons/TagActionClearDark.svg);
}
.Tag.TagAction.TagActionDelete .TagButton button {
  background-image: url(/Images/ButtonIcons/TagActionClearLight.svg);
}
.Tag.TagAction.TagActionDelete:hover .TagButton button {
  background-image: url(/Images/ButtonIcons/TagActionClearDark.svg);
}

/* #endregion */
/* #endregion */
/* #region Status Messages */
.Success {
  color: #0b3618;
}

.Danger {
  color: #f94750;
}

.Warning {
  color: #594500;
}

.SuccessBanner {
  margin-top: 3rem;
  margin-bottom: 3rem;
  border-left-style: solid;
  border-left-width: 0.5rem;
  padding: 2rem 2rem 2rem 4rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  justify-content: flex-start;
  background-repeat: no-repeat;
  background-position: 1.5rem 2rem;
  background-size: 3rem 3rem;
  border-left-color: #25a649;
  background-color: #deffe7;
  background-image: url(/Images/UiMessageBox/SuccessIcon.svg);
}

.WarningBanner {
  margin-top: 3rem;
  margin-bottom: 3rem;
  border-left-style: solid;
  border-left-width: 0.5rem;
  padding: 2rem 2rem 2rem 4rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  justify-content: flex-start;
  background-repeat: no-repeat;
  background-position: 1.5rem 2rem;
  background-size: 3rem 3rem;
  border-left-color: #fdce35;
  background-color: #fff5d7;
  background-image: url(/Images/UiMessageBox/WarningIcon.svg);
}

.InformationBanner {
  margin-top: 3rem;
  margin-bottom: 3rem;
  border-left-style: solid;
  border-left-width: 0.5rem;
  padding: 2rem 2rem 2rem 4rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  justify-content: flex-start;
  background-repeat: no-repeat;
  background-position: 1.5rem 2rem;
  background-size: 3rem 3rem;
  border-left-color: #1296e9;
  background-color: #dcf2ff;
  background-image: url(/Images/UiMessageBox/Information.svg);
}

.FailureBanner {
  margin-top: 3rem;
  margin-bottom: 3rem;
  border-left-style: solid;
  border-left-width: 0.5rem;
  padding: 2rem 2rem 2rem 4rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  justify-content: flex-start;
  background-repeat: no-repeat;
  background-position: 1.5rem 2rem;
  background-size: 3rem 3rem;
  border-left-color: #f94750;
  background-color: #feebec;
  background-image: url(/Images/UiMessageBox/FailureIcon.svg);
}

.SuccessBanner .Details,
.WarningBanner .Details,
.InformationBanner .Details,
.FailureBanner .Details {
  padding-top: 0.2em;
}
.SuccessBanner .Details > p:first-of-type,
.SuccessBanner .Details > ul:first-of-type,
.WarningBanner .Details > p:first-of-type,
.WarningBanner .Details > ul:first-of-type,
.InformationBanner .Details > p:first-of-type,
.InformationBanner .Details > ul:first-of-type,
.FailureBanner .Details > p:first-of-type,
.FailureBanner .Details > ul:first-of-type {
  margin-top: 0;
}
.SuccessBanner .Details > p:last-of-type,
.SuccessBanner .Details > ul:last-of-type,
.WarningBanner .Details > p:last-of-type,
.WarningBanner .Details > ul:last-of-type,
.InformationBanner .Details > p:last-of-type,
.InformationBanner .Details > ul:last-of-type,
.FailureBanner .Details > p:last-of-type,
.FailureBanner .Details > ul:last-of-type {
  margin-bottom: 0;
}
.SuccessBanner .Details:has(ul:only-child),
.WarningBanner .Details:has(ul:only-child),
.InformationBanner .Details:has(ul:only-child),
.FailureBanner .Details:has(ul:only-child) {
  margin-left: 0;
  padding-left: 0;
}
.SuccessBanner .Details:has(ul:only-child) li,
.WarningBanner .Details:has(ul:only-child) li,
.InformationBanner .Details:has(ul:only-child) li,
.FailureBanner .Details:has(ul:only-child) li {
  margin-left: 0;
  padding-left: 0;
}
.SuccessBanner .Details .MarkupStringContainer > p:first-of-type,
.SuccessBanner .Details .MarkupStringContainer > ul:first-of-type,
.WarningBanner .Details .MarkupStringContainer > p:first-of-type,
.WarningBanner .Details .MarkupStringContainer > ul:first-of-type,
.InformationBanner .Details .MarkupStringContainer > p:first-of-type,
.InformationBanner .Details .MarkupStringContainer > ul:first-of-type,
.FailureBanner .Details .MarkupStringContainer > p:first-of-type,
.FailureBanner .Details .MarkupStringContainer > ul:first-of-type {
  margin-top: 0;
}

/*#endregion */
/*#region Links & Buttons */
.ButtonPrimary,
.ButtonSecondary,
.ButtonTertiary {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3em;
  display: inline-block;
  text-decoration: none;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
}
.ButtonPrimary:not(:disabled):not([readonly]),
.ButtonSecondary:not(:disabled):not([readonly]),
.ButtonTertiary:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.ButtonPrimary:disabled,
.ButtonSecondary:disabled,
.ButtonTertiary:disabled {
  cursor: not-allowed;
}
.ButtonPrimary.Processing,
.ButtonSecondary.Processing,
.ButtonTertiary.Processing {
  visibility: hidden;
}

.ButtonPrimary,
.ButtonPrimary:visited {
  padding: 0.8rem 1rem 0.8rem 1rem;
  border-color: #212127;
  border-radius: 3rem;
  border-style: solid;
  border-width: 0.3rem;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  height: 4.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  text-align: center;
  background-color: #212127;
  color: #ffffff;
  min-width: 10rem;
}
.ButtonPrimary:hover,
.ButtonPrimary:visited:hover {
  background-color: #57575a;
  border-color: #57575a;
  color: #ffffff;
}
.ButtonPrimary:active,
.ButtonPrimary:visited:active {
  border-color: #212127;
}
.ButtonPrimary:disabled,
.ButtonPrimary:visited:disabled {
  background-color: #dededf;
  border-color: #dededf;
}
.ButtonPrimary:focus-visible,
.ButtonPrimary:visited:focus-visible {
  outline: 0.2rem solid #000;
}

.ButtonSecondary,
.ButtonSecondary:visited {
  padding: 0.8rem 1rem 0.8rem 1rem;
  border-color: #212127;
  border-radius: 3rem;
  border-style: solid;
  border-width: 0.3rem;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  height: 4.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  text-align: center;
  background-color: transparent;
  color: #212127;
}
.ButtonSecondary:hover,
.ButtonSecondary:visited:hover {
  background-color: #dededf;
}
.ButtonSecondary:active,
.ButtonSecondary:visited:active {
  background-color: #a7a7a9;
}
.ButtonSecondary:disabled,
.ButtonSecondary:visited:disabled {
  border-color: #dededf;
  background-color: transparent;
  color: #a7a7a9;
}
.ButtonSecondary:focus-visible,
.ButtonSecondary:visited:focus-visible {
  outline: 0.2rem solid #212127;
}

.ButtonTertiary,
.ButtonTertiary:visited {
  color: #212127;
  background-color: transparent;
  border-width: 0;
}
.ButtonTertiary:hover,
.ButtonTertiary:visited:hover {
  color: #57575a;
}
.ButtonTertiary:disabled,
.ButtonTertiary:visited:disabled {
  color: #dededf;
}

.ButtonTertiary {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
}

.Back-To-Top-Button {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3em;
  display: inline-block;
  text-decoration: none;
  text-box-edge: cap alphabetic;
  position: fixed;
  bottom: 6rem;
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.Back-To-Top-Button.Show {
  opacity: 1;
  pointer-events: auto;
}
.Back-To-Top-Button.Hide {
  opacity: 0;
  pointer-events: none;
}

.SpinningButtonIcon {
  position: relative;
  padding-left: 5rem;
  padding-right: 2rem;
}
.SpinningButtonIcon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2rem;
  width: 2rem;
  height: 2rem;
  background-size: 2rem 2rem;
  background-repeat: no-repeat;
  transform: translateY(-50%) rotate(180deg);
  transition: transform 0.25s ease-in-out;
}
.SpinningButtonIcon.ButtonIconRight {
  padding-right: 3rem;
}
.SpinningButtonIcon.ButtonIconRight::before {
  left: auto;
  right: 0;
}
.SpinningButtonIcon.ButtonIconShowAll::before {
  background-image: url(/Images/v3/Show_All.svg);
}
.SpinningButtonIcon.Spin::before {
  transform: translateY(-50%) rotate(0deg);
}

.ButtonIcon {
  background-size: 2rem 2rem;
  background-repeat: no-repeat;
  padding-left: 5rem;
  padding-right: 2rem;
  background-position: left 2rem center;
}
.ButtonIcon.ButtonIconRight {
  padding-right: 5rem;
  padding-left: 2rem;
  background-position: right 2rem center;
}
.ButtonIcon.ButtonIconExcel {
  background-image: url(/Images/ButtonIcons/Excel.svg);
}
.ButtonIcon.ButtonIconFile {
  background-image: url(/Images/ButtonIcons/FileDownloadLight.svg);
}
.ButtonIcon.ButtonIconNewTab {
  background-image: url(/Images/ButtonIcons/OpenNewWindow.svg);
}
.ButtonIcon.ButtonIconSso {
  background-image: url(/Images/ButtonIcons/SSO.svg);
}
.ButtonIcon.ButtonIconAdd {
  background-image: url(/Images/ButtonIcons/AddLight.svg);
}
.ButtonIcon.ButtonIconDelete {
  background-image: url(/Images/ButtonIcons/BinRed.svg);
  padding-right: 5rem;
  padding-left: 2rem;
  background-position: right 2rem center;
}
.ButtonIcon.ButtonIconDeleteBlack {
  background-image: url(/Images/ButtonIcons/BinBlack.svg);
}
.ButtonIcon.ButtonIconCalendar {
  background-image: url(/Images/v3/Event_Calendar.svg);
}
.ButtonIcon.ButtonIconCancel {
  background-image: url(/Images/svg/Cancel.svg);
}
.ButtonIcon.ButtonIconTick {
  background-image: url(/Images/svg/Tick.svg);
}
.ButtonIcon.ButtonIconClear {
  background-image: url(/Images/ButtonIcons/Delete.svg);
}
.ButtonIcon.ButtonIconComplete {
  background-image: url(/Images/svg/TickGreen.svg);
}
.ButtonIcon.ButtonIconView {
  background-image: url(/Images/ButtonIcons/View.svg);
}
.ButtonIcon.ButtonIconView2 {
  background-image: url(/Images/ButtonIcons/View2.svg);
}
.ButtonIcon.ButtonIconEdit {
  background-image: url(/Images/svg/Edit2.svg);
}
.ButtonIcon.ButtonIconEdit:disabled {
  background-image: url(/Images/svg/Edit2Grey.svg);
}
.ButtonIcon.ButtonIconCompRecord {
  background-image: url(/Images/ButtonIcons/Competency_Record.svg);
}
.ButtonIcon.ButtonIconPersonalDetails {
  background-image: url(/Images/v3/Personal_Details.svg);
}
.ButtonIcon.ButtonIconCompHistory {
  background-image: url(/Images/ButtonIcons/CompHistory.svg);
}
.ButtonIcon.ButtonIconCareerPlanner {
  background-image: url(/Images/v3/Career_Planner.svg);
}
.ButtonIcon.ButtonIconAnonymiseUser {
  background-image: url(/Images/v3/Anonymise.svg);
}
.ButtonIcon.ButtonIconAttendanceStatus {
  background-image: url(/Images/svg/Attendance_Status.svg);
}
.ButtonIcon.ButtonIconApproveOrDecline {
  background-image: url(/Images/svg/Approve_or_Decline.svg);
}
.ButtonIcon.ButtonIconCompentencyDataEntry {
  background-image: url(/Images/svg/Comp_Data_Entry.svg);
}
.ButtonIcon.ButtonIconUpdate {
  background-image: url(/Images/ButtonIcons/update.svg);
}
.ButtonIcon.ButtonIconStartCourse {
  background-image: url(/Images/ButtonIcons/StartCourse.svg);
}
.ButtonIcon.ButtonIconResumeCourse {
  background-image: url(/Images/ButtonIcons/StartCourse.svg);
}
.ButtonIcon.ButtonIconRevisitCourse {
  background-image: url(/Images/ButtonIcons/RevisitCourse.svg);
}
.ButtonIcon.ButtonIconRestartCourse {
  background-image: url(/Images/ButtonIcons/RestartCourse.svg);
}
.ButtonIcon.ButtonIconActionPlan {
  background-image: url(/Images/ButtonIcons/ActionPlan.svg);
}
.ButtonIcon.ButtonIconActionPlanBlack {
  background-image: url(/Images/v3/Action_Plan_Link.svg);
}
.ButtonIcon.ButtonIconArchive {
  background-image: url(/Images/ButtonIcons/Archive.svg);
}
.ButtonIcon.ButtonIconActivate {
  background-image: url(/Images/ButtonIcons/Activate.svg);
}
.ButtonIcon.ButtonIconUpdate {
  background-image: url(/Images/ButtonIcons/update.svg);
}
.ButtonIcon.ButtonIconCopyAll {
  background-image: url(/Images/ButtonIcons/CopyAll.svg);
}
.ButtonIcon.ButtonIconEventFeedback {
  background-image: url(/Images/svg/EventFeedback.svg);
}
.ButtonIcon.ButtonIconLeftArrow {
  background-image: url(/Images/svg/ArrowLeft.svg);
}
.ButtonIcon.ButtonIconRightArrow {
  background-image: url(/Images/svg/ArrowRight.svg);
}
.ButtonIcon.ButtonIconQrCode {
  background-image: url(/Images/ButtonIcons/QrCode.svg);
}
.ButtonIcon.ButtonIconCog {
  background-image: url(/Images/ButtonIcons/cog.svg);
}
.ButtonIcon.ButtonIconReview {
  background-image: url(/Images/ButtonIcons/Review.svg);
}
.ButtonIcon.ButtonIconEmail {
  background-image: url(/Images/ButtonIcons/Email.svg);
}
.ButtonIcon.ButtonIconSortDown {
  background-image: url(/Images/svg/MoveDown.svg);
}
.ButtonIcon.ButtonIconSortDown:disabled {
  background-image: url(/Images/svg/MoveDownDisabled.svg);
}
.ButtonIcon.ButtonIconSortUp {
  background-image: url(/Images/svg/MoveUp.svg);
}
.ButtonIcon.ButtonIconSortUp:disabled {
  background-image: url(/Images/svg/MoveUpDisabled.svg);
}
.ButtonIcon.ButtonIconCollapsed {
  background-image: url("/Images/Icons/AccordionRight.svg");
}
.ButtonIcon.ButtonIconExpanded {
  background-image: url("/Images/Icons/AccordionDown.svg");
}
.ButtonIcon.ButtonIconExpandedUp {
  background-image: url("/Images/Icons/AccordionUp.svg");
}
.ButtonIcon.ButtonIconSearchResultGridColumnSelector {
  height: 3rem;
  width: 3rem;
  background-image: url(/Images/Icons/ColumnSelector.svg);
}
.ButtonIcon.ButtonIconEvidence {
  background-image: url("/Images/svg/evidence.svg");
}
.ButtonIcon.ButtonIconPrint {
  background-image: url("/Images/svg/Print.svg");
}
.ButtonIcon.ButtonIconPrintWhite {
  background-image: url("/Images/v3/Print_White.svg");
}
.ButtonIcon.ButtonIconSend {
  background-image: url("/Images/svg/Send.svg");
}
.ButtonIcon.ButtonIconAllocateToSkill {
  background-image: url("/Images/svg/AllocateToSkill.svg");
}
.ButtonIcon.ButtonIconContactUser {
  background-image: url("/Images/svg/Contact_User.svg");
}
.ButtonIcon.ButtonIconClear {
  background-image: url("/Images/svg/Clear.svg");
}
.ButtonIcon.ButtonIconTime {
  background-image: url("/Images/svg/Time.svg");
}
.ButtonIcon.ButtonIconFeedback {
  background-image: url("/Images/svg/Feedback.svg");
}
.ButtonIcon.ButtonIconFilter {
  background-image: url("/Images/Icons/Filter.svg");
}
.ButtonIcon.ButtonIconColumnSelector {
  background-image: url(/Images/Icons/ColumnSelector.svg);
}
.ButtonIcon.ButtonIconAddSkill {
  background-image: url(/Images/v3/Add_Skill.svg);
}
.ButtonIcon.ButtonIconExport {
  background-image: url(/Images/v3/Export.svg);
}
.ButtonIcon.ButtonIconAdminPermissions {
  background-image: url(/Images/v3/Deity.svg);
}
.ButtonIcon.ButtonIconShowAll {
  background-image: url(/Images/v3/Show_All.svg);
}
.ButtonIcon.ButtonIconUpArrowWhite {
  background-image: url(/Images/ButtonIcons/Arrow_Up_White.svg);
}
.ButtonIcon.ButtonIconCertificate {
  background-image: url(/Images/v3/Competency_&_Evidence_Admin.svg);
}

.ButtonPrimary.ButtonIcon.ButtonIconDelete {
  border-color: #f94750;
  background-color: #f94750;
  background-image: url(/Images/ButtonIcons/BinWhite.svg);
  padding-right: 5rem;
  padding-left: 2rem;
  background-position: right 2rem center;
}
.ButtonPrimary.ButtonIcon.ButtonIconDelete:hover {
  border-color: #ff747a;
  background-color: #ff747a;
}
.ButtonPrimary.ButtonIcon.ButtonIconDelete:active {
  border-color: #2e0607;
}
.ButtonPrimary.ButtonIcon.ButtonIconLeftArrow {
  background-image: url(/Images/svg/ArrowLeftLight.svg);
}
.ButtonPrimary.ButtonIcon.ButtonIconRightArrow {
  background-image: url(/Images/svg/ArrowRightLight.svg);
}

.ButtonSecondary.ButtonIcon.ButtonIconFile,
.ButtonTertiary.ButtonIcon.ButtonIconFile {
  background-image: url(/Images/ButtonIcons/FileDownloadDark.svg);
}
.ButtonSecondary.ButtonIcon.ButtonIconDuplicate,
.ButtonTertiary.ButtonIcon.ButtonIconDuplicate {
  background-image: url(/Images/v3/Duplicate.svg);
}
.ButtonSecondary.ButtonIcon.ButtonIconAdd,
.ButtonTertiary.ButtonIcon.ButtonIconAdd {
  background-image: url(/Images/ButtonIcons/Add.svg);
}
.ButtonSecondary.ButtonIcon.ButtonIconStartProcess,
.ButtonTertiary.ButtonIcon.ButtonIconStartProcess {
  background-image: url(/Images/ButtonIcons/StartProcess.svg);
}
.ButtonSecondary.ButtonIcon.ButtonIconReactivate,
.ButtonTertiary.ButtonIcon.ButtonIconReactivate {
  background-image: url(/Images/ButtonIcons/Reactivate.svg);
}

.ButtonSecondary.ButtonIcon.ButtonIconDelete {
  border-color: #f94750;
  background-image: url(/Images/ButtonIcons/BinRed.svg);
  padding-right: 5rem;
  padding-left: 2rem;
  background-position: right 2rem center;
}
.ButtonSecondary.ButtonIcon.ButtonIconDelete:disabled {
  border-color: #dededf;
  background-image: url(/Images/ButtonIcons/BinGrey.svg);
}

.ButtonTertiary {
  padding-left: 0;
  padding-right: 0; /* <-- No padding unless there is an icon */
}
.ButtonTertiary.ButtonIcon {
  background-position: left center;
  padding-left: 3rem;
  padding-right: 0;
}
.ButtonTertiary.ButtonIcon.ButtonIconRight {
  background-position: right center;
  padding-left: 0;
  padding-right: 3rem;
}
.ButtonTertiary.ButtonIcon.ButtonIconDelete {
  background-image: url(/Images/ButtonIcons/BinRed.svg);
  padding-right: 5rem;
  padding-left: 0;
  background-position: right 3rem center;
}
.ButtonTertiary.ButtonIcon.ButtonIconNoText {
  height: 2rem;
  width: 2rem;
  padding: 0;
  background-position: center center;
  content-visibility: hidden;
}
.ButtonTertiary.ButtonIcon.ButtonTertiaryUnderlined {
  text-underline-offset: 4px;
}
.ButtonTertiary.ButtonIconRight {
  background-position: right center;
  padding-left: 0;
  padding-right: 3rem;
}
.ButtonTertiary.ButtonTertiaryUnderlined {
  text-decoration: underline;
  text-decoration-thickness: 0.2rem;
}

a.ButtonTertiary {
  display: inline-block;
  line-height: unset;
}

.ButtonPrimary.ButtonIcon.ButtonIconNoText,
.ButtonSecondary.ButtonIcon.ButtonIconNoText {
  padding: 1.5rem 2rem 1.5rem 2rem;
  background-position: center center;
  content-visibility: hidden;
}

.ButtonFullWidth {
  width: 100%;
  min-width: 15rem;
}

.ButtonTextCentralAlign {
  text-align: center;
}

p:has(.ButtonPrimary),
p:has(.ButtonSecondary),
p:has(.ButtonTertiary),
p:has(.AnchorButton) {
  margin-top: 2rem;
}

/* Styles for paragraphs with at least two button children */
p:has(button:nth-of-type(2)),
p:has(.AnchorButton:nth-of-type(2)),
p:has(button + .AnchorButton),
p:has(.AnchorButton + button) {
  display: flex;
  row-gap: 2rem;
  column-gap: 1rem;
  flex-wrap: wrap;
}

/* Paragraphs with three or more buttons */
p:has(button:nth-of-type(3)).ModalButtons {
  justify-content: space-between;
}

p:has(button.Processing) {
  /*  
  	When a button has the class 'Processing' it is hidden. 
  	This class adds content at the start of the P that contains
  	the button to provide feedback to the user
  */
}
p:has(button.Processing)::before {
  content: attr(data-attr-loadingMessage);
}

/*#endregion */
/* #region Icons */
.ButtonFilter {
  background-image: url("/Images/Icons/Filter.svg");
}
/* #endregion */
/* #region Status Icons*/
p img[src$="/info-icon.svg"],
p img[src$="/info-icon-risk.svg"] img[src$="/info-icon-warning.svg"],
li img[src$="/info-icon.svg"],
li img[src$="/info-icon-risk.svg"] img[src$="/info-icon-warning.svg"],
td img[src$="/info-icon.svg"],
td img[src$="/info-icon-risk.svg"] img[src$="/info-icon-warning.svg"],
th img[src$="/info-icon.svg"],
th img[src$="/info-icon-risk.svg"] img[src$="/info-icon-warning.svg"],
h1 img[src$="/info-icon.svg"],
h1 img[src$="/info-icon-risk.svg"] img[src$="/info-icon-warning.svg"],
h2 img[src$="/info-icon.svg"],
h2 img[src$="/info-icon-risk.svg"] img[src$="/info-icon-warning.svg"],
h3 img[src$="/info-icon.svg"],
h3 img[src$="/info-icon-risk.svg"] img[src$="/info-icon-warning.svg"],
span img[src$="/info-icon.svg"],
span img[src$="/info-icon-risk.svg"] img[src$="/info-icon-warning.svg"],
a img[src$="/info-icon.svg"],
a img[src$="/info-icon-risk.svg"] img[src$="/info-icon-warning.svg"] {
  height: 1em;
  cursor: help;
}

/* #endregion */
/* #region Backgrounds */
.NotAllocatedBackground {
  background-color: #fcfcfc;
}

.CompetentBackground {
  background-color: #deffe7;
}

.Competent {
  background-color: #deffe7;
}

.NotCompetentBackground {
  background-color: #feebec;
}

.NotCompetent, Expired {
  background-color: #feebec;
}

.ArchivedBackground {
  background-color: #fcfcfc;
}

/* #endregion */
/* #region Related Actions */
/* #endregion */
/* #region Tabpanel */
.TabPanel {
  margin-top: 3rem;
  margin-bottom: 3rem;
  border-bottom: 0.2rem solid #e8e8e8;
  border-top: 1px solid transparent;
}
.TabPanel ul {
  margin: 0;
  padding: 0 0 0 3rem;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  list-style-type: none;
}
.TabPanel ul li {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}
.TabPanel ul li a {
  display: block;
  text-decoration: none;
  padding: 1rem;
  border-bottom: 0.3rem solid transparent;
}
.TabPanel ul li a:hover {
  color: #212127;
  border-bottom-color: #e8e8e8;
}
.TabPanel ul li a.Active {
  font-weight: bold;
  border-bottom-color: var(--SkillStationMedium);
  background-color: var(--SkillStationMenuLinkHover);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.TabPanel ul li a img {
  width: 2rem;
  height: 2rem;
  position: relative;
  top: 0.5rem;
  margin-right: 0.5rem;
}

@media all and (min-width: 1025px) {
  .TabPanel {
    /*margin-left: -1*$Space-10;
    margin-right: -1*$Space-10;*/
  }
  .TabPanel ul {
    margin-left: -3rem;
    margin-right: -3rem;
  }
}
/* #endregion */
/*#region Login & Forgot Passsword pages */
.LoginPage {
  background: radial-gradient(circle at top left, rgba(76, 64, 255, 0.2) 0%, transparent 40%), radial-gradient(circle at top right, rgba(76, 64, 255, 0.2) 0%, transparent 40%), radial-gradient(circle at bottom center, #4c40ff 0%, #241c3b 50%, #120f23 80%);
  min-height: 100vh;
  position: relative;
}
.LoginPage .LoginPageContainer {
  padding-top: 5rem;
  padding-bottom: 150px;
}
.LoginPage .LoginPageContainer .SkillStationLogoContainer {
  max-width: 38rem;
  background-color: #5f4ffc;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
  padding: 1.5rem;
  /* Removes line-heights so that text fits tightly against the rendered space it resides within.  Use when tight vertical alignment is needed between adjacent items, or when container padding appears too great. */
  line-height: 0;
}
.LoginPage .LoginPageContainer .SkillStationLogoContainer img {
  width: 16rem;
}
.LoginPage .LoginPageContainer .LoginFormContainer {
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  background-color: #ffffff;
  max-width: 38rem;
  margin: 0 auto 0 auto;
  border-bottom-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
}
.LoginPage .LoginPageContainer .LoginFormContainer .ClientLogoContainer {
  padding: 2rem;
  background-color: var(--SkillStationCompanyLogoBackground);
  margin: 0 auto;
  text-align: center;
  line-height: 1rem;
}
.LoginPage .LoginPageContainer .LoginFormContainer .ClientLogoContainer img {
  max-width: 100%;
  max-height: 8rem;
}
.LoginPage .LoginPageContainer .LoginFormContainer .NewsContainer {
  padding: 0 3rem 0 3rem;
}
.LoginPage .LoginPageContainer .LoginFormContainer .NewsContainer .InformationBanner {
  margin-bottom: 0;
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm {
  padding: 3rem;
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .SsoLinks > p {
  text-align: center;
  margin: 0;
  margin-bottom: 3rem;
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .SsoLinks .LoginOrWord {
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 32rem;
  width: 32rem;
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .SsoLinks .LoginOrWord hr {
  border: none;
  height: 1px;
  color: #707070;
  background-color: #707070;
  margin-top: 1rem;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .SsoLinks .LoginOrWord p {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1em;
  margin: 0;
  padding: 0;
  /* Removes line-heights so that text fits tightly against the rendered space it resides within.  Use when tight vertical alignment is needed between adjacent items, or when container padding appears too great. */
  line-height: 0;
  text-align: center;
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .SsoLinks .LoginOrWord p span {
  color: #707070;
  padding: 0 1.5rem 0 1.5rem;
  background-color: #fcfcfc;
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .EditForm .FormGroup {
  margin: 0 auto;
  max-width: 32rem;
  width: 32rem;
  width: unset;
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .EditForm .FormGroup .LoginPageUsernamePasswordFields .TextComponent {
  width: unset;
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .EditForm .FormGroup .LoginPageUsernamePasswordFields input[type=text],
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .EditForm .FormGroup .LoginPageUsernamePasswordFields input[type=password] {
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 3rem;
  background-size: 2rem 2rem;
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .EditForm .FormGroup .LoginPageUsernamePasswordFields input[type=text] {
  background-image: url(/Images/svg/username.svg);
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .EditForm .FormGroup .LoginPageUsernamePasswordFields input[type=password] {
  background-image: url(/Images/svg/password.svg);
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .EditForm .FormGroup .LoginPageUsernamePasswordFields p {
  margin-top: 2rem;
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .LoginPageForgotDetails {
  margin-top: 3rem;
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .LoginPageForgotDetails p {
  margin: 0;
}
.LoginPage .LoginPageContainer .LoginFormContainer .LoginForm .LoginPageForgotDetails p .ButtonTertiary {
  padding: 0;
}
.LoginPage .LoginPageContainer .LoginFormContainer.ForgotPasswordContainer {
  /* Forgot password screen only */
  border-top-left-radius: 2rem;
  border-top-right-radius: 2rem;
}
.LoginPage .LoginPageContainer .LoginFormContainer.ForgotPasswordContainer .Information {
  padding: 3rem 3rem 0 3rem;
}
.LoginPage .LoginPageFooter {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(28, 28, 28, 0.5);
  backdrop-filter: blur(4px);
}
.LoginPage .LoginPageFooter .LoginPageFooterContainer {
  margin: 0 auto;
}
.LoginPage .LoginPageFooter .LoginPageFooterContainer p {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.6em;
  text-align: center;
  color: #ffffff;
}
.LoginPage .LoginPageFooter .LoginPageFooterContainer p a {
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6em;
}

@media all and (min-width: 769px) {
  .LoginPage .LoginPageFooter .LoginPageFooterContainer {
    display: flex;
    flex-wrap: wrap;
    padding: 1.5rem;
    gap: 3rem;
  }
  .LoginPage .LoginPageFooter .LoginPageFooterContainer p {
    margin: 0;
  }
  .LoginPage .LoginPageFooter .LoginPageFooterContainer p:nth-child(1) {
    flex: 1 0 auto;
    text-align: left;
    max-width: unset;
  }
  .LoginPage .LoginPageFooter .LoginPageFooterContainer p:nth-child(2) {
    flex: 0 1 auto;
    justify-content: end;
  }
  .LoginPage .LoginPageFooter .LoginPageFooterContainer p:nth-child(3) {
    flex: 0 1 auto;
    justify-content: end;
  }
}
/*#endregion */
/* #region Charting */
.CareerPlannerChart {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 2rem;
}

@media all and (min-width: 1025px) {
  .CareerPlannerChart {
    max-width: 70%;
  }
}
/* #endregion */
/* #region MessageBox */
.MessageBoxComponent {
  display: flex;
  flex-direction: column;
  max-width: 50em;
}
.MessageBoxComponent .MessageBoxContent {
  display: flex;
  flex-direction: row;
}
.MessageBoxComponent .MessageBoxContent .MessageBoxIcon {
  align-self: center;
}
.MessageBoxComponent .MessageBoxContent .MessageBoxIcon img {
  height: 4em;
  width: 4em;
  margin-right: 1em;
}
.MessageBoxComponent .MessageBoxContent .MessageBoxText {
  align-self: center;
}
.MessageBoxComponent .MessageBoxButtons {
  padding-top: 1em;
  display: flex;
  flex-direction: row;
  align-self: center;
  justify-content: space-between;
}
.MessageBoxComponent .MessageBoxButtons button {
  margin-left: 1em;
}

/* #endregion*/
/* #region Search bar */
@media all and (min-width: 769px) {
  .TwoColumnEqualWidths {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
  }
  .TwoColumnEqualWidths > div {
    flex: 1 0 auto;
  }
  .TwoColumnContentWidths {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
  }
  .TwoColumnContentWidths > div {
    flex: 1 1 auto;
    flex-basis: content;
  }
}
/* #endregion */
/* #region Blazored Modal */
/* Modal contents */
.bm-container {
  backdrop-filter: blur(3px);
  background-color: rgba(63, 63, 69, 0.75) !important;
  display: block !important;
  /* Shared layout for any modal that uses header-icon */
  /* map icon names to image URLs */
  /* add more key/value pairs ("selector":"url") here to extend for more icons */
  /* Mixin to insert the correct icon into the placeholder abover based on class */
  /* Auto-generate all icon selectors - basically a foreach to create selectors for applying the background-image with the correct icon */
  /* E.g. 
  	:has(.header-icon):has(.QrCode) .bm-header::before { 
  		background-image: url(/Images/ButtonIcons/QrCode.svg)
  	} 
  */
}
.bm-container:has(.header-icon) .bm-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bm-container:has(.header-icon) .bm-header::before {
  content: "";
  background-repeat: no-repeat;
  background-size: 24px;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.bm-container:has(.header-icon):has(.QrCode) .bm-header::before {
  background-image: url(/Images/ButtonIcons/QrCode.svg);
}
.bm-container:has(.header-icon):has(.Add) .bm-header::before {
  background-image: url(/Images/ButtonIcons/Add.svg);
}
.bm-container:has(.header-icon):has(.AddSkill) .bm-header::before {
  background-image: url(/Images/v3/Add_Skill.svg);
}
.bm-container:has(.header-icon):has(.Export) .bm-header::before {
  background-image: url(/Images/v3/Export.svg);
}
.bm-container div[role=dialog].blazored-modal {
  padding: 0.5rem;
  border-radius: 1rem;
  box-shadow: 2px 6px 10px 0 rgba(63, 63, 69, 0.1450980392);
  margin-top: 0;
  margin-bottom: 0;
  /* Header flex grid */
}
.bm-container div[role=dialog].blazored-modal .bm-header {
  align-items: center;
  padding: 0 0 1rem 0;
}
.bm-container div[role=dialog].blazored-modal .bm-header .bm-title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1em;
  margin-top: 0;
}
.bm-container div[role=dialog].blazored-modal .bm-header:not(:has(.bm-title)) {
  line-height: 0;
  padding-bottom: 0; /* Check edit form modal on /Master/QualificationGeographicalAreas if changed */
}
.bm-container div[role=dialog].blazored-modal .bm-header:not(:has(.bm-title)) .bm-header {
  padding-bottom: 0;
}
.bm-container div[role=dialog].blazored-modal .bm-content .ModalHost:focus-visible {
  outline: none;
}
.bm-container div[role=dialog].blazored-modal .bm-content .SearchResultsGridComponent {
  margin-top: 0;
}
.bm-container div[role=dialog].blazored-modal .bm-content .SearchResultsGridComponent .SearchResultsGrid {
  max-height: 50vh;
}
.bm-container div[role=dialog].blazored-modal .bm-content .Modal {
  min-width: 320px;
  /* Header text */
}
.bm-container div[role=dialog].blazored-modal .bm-content .Modal h1,
.bm-container div[role=dialog].blazored-modal .bm-content .Modal h2,
.bm-container div[role=dialog].blazored-modal .bm-content .Modal h3 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1em;
  margin-top: 0;
  margin-bottom: 3rem;
}
.bm-container div[role=dialog].blazored-modal .bm-content .Modal .ModalContent {
  max-height: 75vh;
  overflow-y: auto;
  padding: 0;
}
.bm-container div[role=dialog].blazored-modal .bm-content .Modal.AddEditQualificationModal .AddEditQualificationCertificateMessage {
  font-weight: 700;
}
.bm-container div[role=dialog].blazored-modal .bm-content .Modal.AnnouncementModal .AnnouncementAttachment {
  padding: 1rem;
}
.bm-container div[role=dialog].blazored-modal .bm-content .Modal.AnnouncementModal .AnnouncementAttachment img {
  display: block;
  height: 200px;
}
.bm-container div[role=dialog].blazored-modal .bm-content .Modal.AnnouncementModal .AnnouncementCompliedDate {
  font-weight: 700;
}
.bm-container div[role=dialog].blazored-modal .bm-content .Modal.AnnouncementModal .AnnouncementCompliance {
  padding-bottom: 2rem;
}
.bm-container div[role=dialog].blazored-modal .bm-content:has(.ModalContent):has(.ModalButtons) .ModalButtons {
  padding-top: 0;
}
.bm-container div[role=dialog].blazored-modal > div:first-of-type {
  /* Close button */
}
.bm-container div[role=dialog].blazored-modal > div:first-of-type button::after {
  content: url("/Images/Icons/CloseModal.svg");
  width: 2rem;
  height: 2rem;
  display: inline-block;
}
.bm-container div[role=dialog].blazored-modal > div:first-of-type button span {
  display: none;
}
.bm-container div[role=dialog].blazored-modal:has(.bm-header):has(.bm-content) .bm-header {
  z-index: 2;
}
.bm-container div[role=dialog].blazored-modal:has(.bm-header):has(.bm-content) .bm-content {
  z-index: 1;
}

@media all and (min-width: 769px) {
  .bm-container {
    display: grid !important;
    padding: 2rem;
  }
  .bm-container div[role=dialog].blazored-modal {
    padding: 2rem;
  }
}
/* #endregion */
/*#region Simple Modal*/
.Simple-Modal-Overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.Simple-Modal-Overlay .Simple-Modal {
  background-color: white;
  border-radius: 1rem;
  width: 90%;
  max-width: 960px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.7);
}
.Simple-Modal-Overlay .Simple-Modal-Header,
.Simple-Modal-Overlay .Simple-Modal-Footer {
  background-color: #dededf;
  padding: 1rem;
}
.Simple-Modal-Overlay .Simple-Modal-Header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.2rem solid #57575a;
}
.Simple-Modal-Overlay .Simple-Modal-Header h3 {
  margin: 0;
}
.Simple-Modal-Overlay .Simple-Modal-Body {
  padding: 1rem;
  overflow: auto;
  background: #fcfcfc;
}
.Simple-Modal-Overlay .Simple-Modal-Body pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: monospace;
}
.Simple-Modal-Overlay .Simple-Modal-Footer {
  display: flex;
  justify-content: flex-end;
  border-top: 0.2rem solid #57575a;
}

/*#endregion */
/* #region Accordion */
.AccordionComponentContainer .AccordionComponent .AccordionComponentHeader {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-right: 1.5rem;
}
.AccordionComponentContainer .AccordionComponent .AccordionComponentHeader:has(.ComponentLabelHelpIcon) {
  padding-left: 0.5rem;
}
.AccordionComponentContainer .AccordionComponent .AccordionComponentHeader .AccordionHeaderLabel {
  flex: 1 1 auto;
  min-width: 0;
}
.AccordionComponentContainer .AccordionComponent .AccordionComponentHeader .AccordionHeaderLabel button {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3em;
  display: block;
  padding: 1.5rem 0 1.5rem 2rem;
  border: none;
  background-color: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.AccordionComponentContainer .AccordionComponent .AccordionComponentHeader:has(.ComponentLabelHelpIcon) .AccordionHeaderLabel button {
  padding: 1.5rem 0;
}
.AccordionComponentContainer .AccordionComponent .AccordionComponentHeader .AccordionHeaderTag {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6em;
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: 0.3rem;
  background-color: #212127;
  color: #ffffff;
  flex: 0 0 auto;
}
.AccordionComponentContainer .AccordionComponent .AccordionComponentHeader .AccordionHeaderTag.Warning {
  color: #212127;
  background-color: #fdce35;
}
.AccordionComponentContainer .AccordionComponent .AccordionComponentHeader .AccordionHeaderTag.Warning text::before {
  content: "Warning";
}
@media all and (max-width: 769px) {
  .AccordionComponentContainer .AccordionComponent .AccordionComponentHeader .AccordionHeaderTag.Warning text::before {
    content: "!";
  }
}
.AccordionComponentContainer .AccordionComponent .AccordionComponentHeader .AccordionHeaderTag.Danger {
  background-color: #f94750;
}
.AccordionComponentContainer .AccordionComponent .AccordionComponentHeader .AccordionHeaderTag.Danger text::before {
  content: "Action Required";
}
@media all and (max-width: 769px) {
  .AccordionComponentContainer .AccordionComponent .AccordionComponentHeader .AccordionHeaderTag.Danger text::before {
    content: "!!";
  }
}
.AccordionComponentContainer .AccordionComponent .AccordionComponentHeader .Arrow {
  background: url("/Images/Icons/AccordionDown.svg");
  background-repeat: no-repeat;
  height: 2rem;
  width: 2rem;
  transform: rotate(180deg);
  transition: 0.25s ease-in-out;
  flex: 0 0 auto;
  cursor: pointer;
}
.AccordionComponentContainer .AccordionComponent .AccordionComponentHeader.Active + .AccordionComponentBody {
  display: block;
}
.AccordionComponentContainer .AccordionComponent .AccordionComponentHeader.Active .Arrow {
  transform: rotate(0deg);
}
.AccordionComponentContainer .AccordionComponent .AccordionComponentBody {
  min-height: 8rem;
  display: none;
}
.AccordionComponentContainer .AccordionComponent .AccordionComponentBody .Results {
  max-height: 24rem;
  overflow-y: scroll;
}
.AccordionComponentContainer.Type-1 .AccordionComponentHeader {
  background-color: #e8e8e8;
  border: 0.1rem solid #a7a7a9;
}
.AccordionComponentContainer.Type-1 .AccordionComponentHeader.Active {
  border: 0.1rem solid #a7a7a9;
}
.AccordionComponentContainer.Type-1 .AccordionComponentBody {
  background-color: #fcfcfc;
  box-shadow: inset 2px 2px 6px rgba(63, 63, 69, 0.5);
  border: 0.1rem solid #a7a7a9;
  padding: 2rem 2rem 3rem 2rem;
}
.AccordionComponentContainer.Type-1 > .AccordionComponent:nth-child(1) > .AccordionComponentHeader {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.AccordionComponentContainer.Type-1 > .AccordionComponent:last-child:has(.AccordionComponentHeader.Active) > .AccordionComponentBody {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.AccordionComponentContainer.Type-1 > .AccordionComponent:last-child:not(:has(.AccordionComponentHeader.Active)) > .AccordionComponentHeader {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.AccordionComponentContainer.Type-2 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.AccordionComponentContainer.Type-2 .AccordionComponentHeader {
  border-bottom: 0.1rem solid #a7a7a9;
}
.AccordionComponentContainer.Type-2 .AccordionComponentHeader.Active {
  border-bottom: none;
}
.AccordionComponentContainer.Type-2 .AccordionComponentBody .SearchResultsGridComponent {
  margin-top: 0;
  margin-bottom: 0;
}

/* #endregion */
/* #region User Search Filter Modal */
.UserSearchFilterModal .UserSearchFilterButtons {
  margin-top: 3rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
}
.UserSearchFilterModal .AccordionComponentContainer.Type-1 .AccordionComponent .AccordionComponentBody:has(.CheckBoxListComponent:only-child) {
  padding: 0.5rem;
}
.UserSearchFilterModal .AccordionComponentContainer.Type-1 .AccordionComponent .AccordionComponentBody {
  border: 0.1rem solid #a7a7a9;
  background-color: #fcfcfc;
  box-shadow: inset 2px 2px 6px rgba(63, 63, 69, 0.5);
}
.UserSearchFilterModal .AccordionComponentContainer.Type-1 .AccordionComponent .AccordionComponentBody .CheckBoxListComponent:only-child {
  margin-bottom: 0;
}
.UserSearchFilterModal .AccordionComponentContainer.Type-1 .AccordionComponent .AccordionComponentBody .CheckBoxListComponent {
  max-width: unset;
}
.UserSearchFilterModal .AccordionComponentContainer.Type-1 .AccordionComponent .AccordionComponentBody .CheckBoxListComponent .InputSurround {
  margin: 0;
}
.UserSearchFilterModal .AccordionComponentContainer.Type-1 .AccordionComponent .AccordionComponentBody .CheckBoxListComponent .InputSurround.CheckBoxListComponentSearchBarContainer {
  margin: 0;
}
.UserSearchFilterModal .AccordionComponentContainer.Type-1 .AccordionComponent .AccordionComponentBody .CheckBoxListComponent .InputSurround.CheckBoxListComponentCheckBoxListContainer {
  border: none;
}
.UserSearchFilterModal .AccordionComponentContainer.Type-1 .AccordionComponent .AccordionComponentBody .CheckBoxListComponent .InputSurround.CheckBoxListComponentCheckBoxListContainer .Results input[type=checkbox] {
  margin-left: 0;
}

.UserSearchFilterOptions {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6em;
}

/* #endregion */
/* #region GeoSearch */
.GeoSearchComponentContainer .GeoSearchComponent .FilterSections {
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
}
.GeoSearchComponentContainer .GeoSearchComponent .FilterSections > div {
  width: 32rem;
}
.GeoSearchComponentContainer .GeoSearchComponent .FilterSections .AddSelectedButtonContainer {
  text-align: right;
  max-width: 32rem;
}
.GeoSearchComponentContainer .GeoSearchActionButtons {
  text-align: right;
}
/* #endregion*/
/* #region Skill Search  */
.SkillSearchComponentContainer .SkillSearchComponent {
  display: flex;
  flex-wrap: wrap;
  gap: 8rem;
}
.SkillSearchComponentContainer .SkillSearchComponent > div {
  width: 32rem;
}
.SkillSearchComponentContainer .SkillSearchComponent .AddSelectedButtonContainer {
  text-align: right;
  max-width: 32rem;
}

/* #endregion */
/*#region Footer */
.Footer {
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  background-color: #ffffff;
  border-radius: 0.5rem;
  padding: 1rem 3rem;
  margin-top: 3rem;
  max-width: 1280px;
}
.Footer ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  gap: 3rem;
  align-content: space-between;
  margin: 0;
  padding: 0;
}
.Footer ul li {
  flex: 0 1 auto;
  margin: 0;
  padding: 0;
}
.Footer ul li .ButtonTertiary {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3em;
  text-decoration: none;
  /* Icons are spans with background CSS masks, not background images, so adjust padding to suit */
}
.Footer ul li .ButtonTertiary .BrandedIconLinkComponent {
  vertical-align: text-top;
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
}
.Footer ul li .ButtonTertiary .BrandedIconLinkComponent span {
  -webkit-mask-size: 2rem;
  mask-size: 2rem;
}

/*#endregion */
/* #region SearchResultsGrid */
.SearchResultsGrid {
  overflow-x: auto;
  max-width: fit-content;
  overflow-y: auto;
  max-height: 80vh;
  border: 1px solid #dededf;
}
.SearchResultsGrid.NoScroll {
  max-height: unset;
  overflow-y: unset;
  overflow-x: unset;
}
.SearchResultsGrid.NoXScroll {
  max-width: unset;
  overflow-x: unset;
}
.SearchResultsGrid.NoYScroll {
  max-height: unset;
  overflow-y: unset;
}
.SearchResultsGrid table {
  border: none;
}
.SearchResultsGrid table.FullWidthTable {
  width: 100%;
}
.SearchResultsGrid table thead tr th {
  padding: 1rem;
  text-align: left;
  font-weight: 700;
  background-color: #dededf;
  position: sticky;
  top: 0;
  z-index: 5;
  /*&.Kebab {
  	position: sticky;
  	right: -0.01rem;
  }*/
}
.SearchResultsGrid table thead tr th.Frozen {
  position: sticky;
  z-index: 2;
}
.SearchResultsGrid table thead tr th.Sortable {
  padding-right: 2rem;
  background-repeat: no-repeat;
  background-size: 2rem 2rem;
  background-position: right 0 bottom calc(1rem + 0.2em);
}
.SearchResultsGrid table thead tr th.Sortable:hover {
  background-color: #a7a7a9;
  cursor: pointer;
}
.SearchResultsGrid table thead tr th.Sortable.SortAsc {
  background-image: url(/Images/Icons/ResultGrid_Sort_Arrow_Asc.svg);
}
.SearchResultsGrid table thead tr th.Sortable.SortDesc {
  background-image: url(/Images/Icons/ResultGrid_Sort_Arrow_Desc.svg);
}
.SearchResultsGrid table thead tr th.DateAttained, .SearchResultsGrid table thead tr th.ExpiryDate {
  width: 12rem;
}
.SearchResultsGrid table thead tr th.Definition {
  width: 15rem;
}
.SearchResultsGrid table thead tr th.Level {
  width: 8rem;
}
.SearchResultsGrid table thead tr th.Icon {
  width: 2rem;
}
.SearchResultsGrid table thead tr th.InformationIconComponentOnlyHeader {
  text-align: center;
}
.SearchResultsGrid table thead tr th .ButtonCollection p {
  margin: 0;
  padding: 0;
}
.SearchResultsGrid table thead tr th .CheckBoxComponent + .ButtonCollection {
  margin-top: -1rem;
}
.SearchResultsGrid table thead tr th .DoubleComponent + .ButtonCollection,
.SearchResultsGrid table thead tr th .DatePickerComponent + .ButtonCollection {
  margin-top: -1rem;
}
.SearchResultsGrid table thead tr th > .ButtonTertiary {
  padding-top: 0;
  padding-bottom: 0;
}
.SearchResultsGrid table thead tr th .CheckBoxComponent {
  width: unset;
}
.SearchResultsGrid table tbody tr:not(:first-of-type) td {
  border-top: 0.1rem solid #dededf;
}
.SearchResultsGrid table tbody tr:has(td > input[type=checkbox]:checked) td {
  background-color: #dcf2ff;
}
.SearchResultsGrid table tbody tr td {
  padding: 1rem;
}
.SearchResultsGrid table tbody tr td ul, .SearchResultsGrid table tbody tr td ol {
  padding-left: 0;
  margin: 0;
  list-style-position: inside;
}
.SearchResultsGrid table tbody tr td > p:first-of-type {
  margin-top: 0;
}
.SearchResultsGrid table tbody tr td > ul:first-of-type {
  margin-top: 0;
}
.SearchResultsGrid table tbody tr td > .ButtonTertiary {
  padding-top: 0;
  padding-bottom: 0;
}
.SearchResultsGrid table tbody tr td.Important::after {
  font-weight: 700;
  color: #f94750;
}
.SearchResultsGrid table tbody tr td.Frozen {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #fcfcfc;
}
.SearchResultsGrid table tbody tr td.Bold {
  font-weight: 700;
}
.SearchResultsGrid table tbody tr td.KebabMenuColumn {
  position: sticky;
  right: -0.1rem;
  z-index: 4;
  background-color: #fcfcfc;
  border-left: 0.1rem solid #dededf;
  padding: 1rem 0.5rem 1rem 0.5rem;
}
.SearchResultsGrid table tbody tr td.Competent a {
  color: #25a649;
  text-decoration: none;
}
.SearchResultsGrid table tbody tr td.SupportingEvidence ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.SearchResultsGrid table tbody tr td.SupportingEvidence ul li {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
}
.SearchResultsGrid table tbody tr td.SupportingEvidence ul li div:first-of-type {
  flex: 1 1 auto;
}
.SearchResultsGrid table tbody tr td.SupportingEvidence ul li div:first-of-type button {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 20rem;
}
.SearchResultsGrid table tbody tr td.SupportingEvidence ul li div:last-of-type {
  flex: 0 1 auto;
}
.SearchResultsGrid table tbody tr td.NonCompetent a {
  color: #f94750;
  text-decoration: none;
}
.SearchResultsGrid table tbody tr td.Archived, .SearchResultsGrid table tbody tr td.NoData {
  color: #a7a7a9;
}
.SearchResultsGrid table tbody tr td > .ButtonCollection:first-child p:first-child > .ButtonTertiary:first-child {
  padding-top: 0;
  background-position: left top;
}
.SearchResultsGrid table tbody tr td .ButtonCollection p {
  margin: 0;
  padding: 0;
}
.SearchResultsGrid table tbody tr td .GridIconContainer {
  display: flex;
  gap: 0.5rem;
}
.SearchResultsGrid table tbody tr td .GridIconContainer a {
  text-decoration: none;
}
.SearchResultsGrid table tbody tr td .GridIconContainer .GridIcon {
  height: 2rem;
  width: 2rem;
  vertical-align: bottom;
}
.SearchResultsGrid table tbody tr td .GridIconContainer .GridIconSupportingText {
  padding-left: 1rem;
  font-weight: 700;
}
.SearchResultsGrid table tbody tr td .CurrencyContainer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.SearchResultsGrid table tbody tr td .CurrencyContainer .Currency .CurrencyAmount {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.SearchResultsGrid table tbody tr td .EditableGridField.invalid {
  border: 0.2rem solid #f94750;
}
.SearchResultsGrid table tbody tr td .ThumbnailImage {
  width: 12rem;
  max-width: 100%;
}
.SearchResultsGrid table tbody tr td.RowIsSelected {
  background-color: #e8e8e8;
}
.SearchResultsGrid table tbody tr td.CostAmount {
  text-align: right;
  white-space: nowrap;
}
.SearchResultsGrid table tbody tr td.CostName {
  white-space: nowrap;
}
.SearchResultsGrid table tbody tr td .CheckBoxComponent {
  width: unset;
}
.SearchResultsGrid table tbody tr td:has(table) {
  padding: 0;
}
.SearchResultsGrid table tbody tr td.Width50 {
  max-width: 15rem;
  width: 15rem;
}
.SearchResultsGrid table tbody tr td.WidthSquished {
  max-width: unset;
  min-width: unset;
  width: unset;
}
.SearchResultsGrid table tbody tr td.WidthSquished .ComponentLabelContainer {
  display: inline-flex;
}
.SearchResultsGrid table tbody tr td.Width100 {
  max-width: 32rem;
  width: 32rem;
}
.SearchResultsGrid table tbody tr td.WidthMaximumAvailable {
  width: 100%;
  max-width: 100rem;
}
.SearchResultsGrid table tbody tr td.InformationIconComponentOnly {
  border-left: 1px solid #e8e8e8;
  background-color: #fcfcfc;
  vertical-align: middle;
  text-align: center;
}
.SearchResultsGrid table tbody tr td.InformationIconComponentOnly .InformationIconComponent {
  transform: scale(1.5);
}
.SearchResultsGrid table tbody tr td table {
  width: 100%;
}
.SearchResultsGrid table tbody tr td table tbody tr:not(:first-child) td {
  padding-top: 0.5rem;
}
.SearchResultsGrid table tbody tr td table tbody tr:not(:last-child) td {
  padding-bottom: 0.5rem;
}
.SearchResultsGrid table tbody tr td table tbody tr td {
  border-top: none;
}
.SearchResultsGrid table tbody tr:hover {
  background-color: #fcfcfc;
}
.SearchResultsGrid table tfoot tr td {
  padding: 1rem;
}
.SearchResultsGrid table tfoot tr td:has(table) {
  padding: 0;
}
.SearchResultsGrid table tfoot tr td table {
  width: 100%;
}
.SearchResultsGrid.ghosted table thead tr th {
  background-color: #a7a7a9;
  color: #dededf;
}

.SearchResultsGridComponent {
  border-radius: 2rem;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  width: fit-content;
  max-width: 100%;
}
.SearchResultsGridComponent .SearchResultsGridHeader {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 0.5rem;
}
.SearchResultsGridComponent .SearchResultsGridHeader .ResultCount {
  flex: 1 1 auto;
  order: 1;
  line-height: 2em;
}
.SearchResultsGridComponent .SearchResultsGridHeader .MenuContainer {
  flex: 1 1 auto;
  order: 2;
}
.SearchResultsGridComponent .SearchResultsGridHeader:not(:has(.MenuOnRight)) .ResultCount {
  order: 2;
}
.SearchResultsGridComponent .SearchResultsGridHeader:not(:has(.MenuOnRight)) .MenuContainer {
  order: 1;
}
.SearchResultsGridComponent .SearchResultsGridSearchBox {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.SearchResultsGridComponent .SearchResultsGridSearchBox .SearchField {
  background-image: url(/Images/Icons/Search.svg);
  background-repeat: no-repeat;
  background-size: 2rem 2rem;
  padding-left: 4rem;
  background-position: center left 1rem;
}
.SearchResultsGridComponent:has(.SearchResultsGrid) .SearchResultsGrid {
  max-width: 100%;
  border: 1px solid #a7a7a9;
  border-radius: 0.5rem 0.5rem 0 0;
}
.SearchResultsGridComponent:has(.SearchResultsGrid) .SearchResultsGrid.Dimmed {
  filter: blur(1px);
  opacity: 0.5;
  pointer-events: none;
}
.SearchResultsGridComponent:has(.SearchResultsGrid) .SearchResultsGrid table {
  border: none;
}
.SearchResultsGridComponent.WithOverlay {
  background-color: #ffffff;
  box-shadow: 2px 6px 10px rgba(63, 63, 69, 0.15);
  padding: 2rem;
}
.SearchResultsGridComponent.Width100Maximum1000 {
  width: initial;
  max-width: 1000px;
}
.SearchResultsGridComponent.Width100Maximum1000 .SearchResultsGrid {
  width: initial;
}
.SearchResultsGridComponent.Width100Maximum1000 .SearchResultsGrid table {
  width: 100%;
  max-width: 1000px;
}

.MenuContainer {
  /* Removes line-heights so that text fits tightly against the rendered space it resides within.  Use when tight vertical alignment is needed between adjacent items, or when container padding appears too great. */
  line-height: 0;
  position: relative;
}
.MenuContainer.MenuOnLeft .HoverMenuWrapper,
.MenuContainer.MenuOnLeft .KebabMenuWrapper, .MenuContainer.MenuOnRight .HoverMenuWrapper,
.MenuContainer.MenuOnRight .KebabMenuWrapper {
  top: 0;
  z-index: 10;
}
.MenuContainer.MenuOnRight {
  text-align: right;
}
.MenuContainer.MenuOnRight .HoverMenuWrapper,
.MenuContainer.MenuOnRight .KebabMenuWrapper {
  right: 3rem;
}
.MenuContainer.MenuOnLeft .HoverMenuWrapper,
.MenuContainer.MenuOnLeft .KebabMenuWrapper {
  left: 3rem;
}

.KebabMenuContainer > button {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3em;
  display: inline-block;
  text-decoration: none;
  text-box-edge: cap alphabetic;
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  border: 0.2rem solid #e8e8e8;
  border-radius: 0.5rem;
  background-color: #ffffff;
  background-image: url("/Images/Icons/KebabMenu.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 2rem 2rem;
}
.KebabMenuContainer > button:hover {
  background-color: #e8e8e8;
}

.CurrencyComponent + .KebabMenuContainer > button,
.DatePickerComponent + .KebabMenuContainer > button,
.DoubleComponent + .KebabMenuContainer > button,
.IntegerComponent + .KebabMenuContainer > button,
.SelectComponent + .KebabMenuContainer > button,
.TextComponent + .KebabMenuContainer > button,
.TypeAheadComponent + .KebabMenuContainer > button {
  height: 4.2rem;
  width: 4.2rem;
}

.KebabMenuWrapper {
  position: absolute; /* Break out of normal page flow */
  z-index: 5;
  display: none;
  background-color: #ffffff;
  text-align: left;
  background-color: #ffffff;
  box-shadow: 2px 6px 10px rgba(63, 63, 69, 0.15);
  border: 0.1rem solid #a7a7a9;
  border-radius: 0.5rem;
}
.KebabMenuWrapper > ul {
  background-color: #ffffff;
  box-shadow: 2px 6px 10px rgba(63, 63, 69, 0.15);
  margin: 0;
  padding: 1rem;
  list-style-type: none;
  border-radius: 0.5rem;
}
.KebabMenuWrapper > ul li {
  margin: 0;
  padding: 0;
}
.KebabMenuWrapper > ul li:not(:last-of-type) {
  padding-bottom: 0.5rem;
}
.KebabMenuWrapper > ul li a {
  font-weight: 700;
  display: block;
  padding: 1rem;
  white-space: nowrap;
  text-decoration: none;
}
.KebabMenuWrapper > ul li a:hover {
  background-color: #e8e8e8;
}
.KebabMenuWrapper > ul li .ButtonTertiary {
  width: 100%;
  text-align: left;
  background-position: 0.5rem center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 1rem;
  white-space: nowrap;
  font-weight: normal;
}
.KebabMenuWrapper > ul li .ButtonTertiary:hover {
  background-color: #e8e8e8;
}
.KebabMenuWrapper > ul li hr {
  height: 0;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.KebabMenuWrapper > ul li label {
  display: block;
  padding: 1rem;
  white-space: nowrap;
}
.KebabMenuWrapper > ul li label input[type=checkbox] {
  vertical-align: middle;
  margin-right: 0.5rem;
}
.KebabMenuWrapper > ul li label:hover {
  background-color: #e8e8e8;
}

.HoverMenuWrapper {
  position: absolute; /* Break out of normal page flow */
  z-index: 5;
  display: none;
  background-color: #ffffff;
  box-shadow: 2px 6px 10px rgba(63, 63, 69, 0.15);
  border: 0.1rem solid #e8e8e8;
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: left;
}
.HoverMenuWrapper > ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.HoverMenuWrapper > ul li {
  margin: 0;
  padding: 0;
}
.HoverMenuWrapper > ul li a {
  font-weight: 700;
  display: block;
  padding: 1rem;
  white-space: nowrap;
  text-decoration: none;
}
.HoverMenuWrapper > ul li a:hover {
  background-color: #e8e8e8;
}
.HoverMenuWrapper > ul li label {
  display: block;
  padding: 1rem;
  white-space: nowrap;
}
.HoverMenuWrapper > ul li label input[type=checkbox] {
  vertical-align: middle;
  margin-right: 0.5rem;
}
.HoverMenuWrapper > ul li label:has(input[type=checkbox]:focus-visible) {
  outline: 0.2rem solid #212127;
}
.HoverMenuWrapper > ul li label:hover {
  background-color: #e8e8e8;
}
@media all and (min-width: 769px) {
  .HoverMenuWrapper > ul {
    columns: 2; /* number of columns */
    -webkit-columns: 2; /* Safari support */
    -moz-columns: 2; /* Firefox support */
    column-gap: 0rem; /* optional spacing between columns */
  }
}
.HoverMenuWrapper .HoverMenuFooter {
  display: flex;
  gap: 2rem;
  padding: 1rem;
}

.HoverMenuWrapper.ShowMenu,
.KebabMenuWrapper.ShowMenu {
  display: block;
}
.HoverMenuWrapper.ShowMenu.Place-To-The-Right,
.KebabMenuWrapper.ShowMenu.Place-To-The-Right {
  right: auto;
}
.HoverMenuWrapper.ShowMenu.Place-To-The-Right > ul,
.KebabMenuWrapper.ShowMenu.Place-To-The-Right > ul {
  columns: 1; /* number of columns */
  -webkit-columns: 1; /* Safari support */
  -moz-columns: 1; /* Firefox support */
  column-gap: 0rem; /* optional spacing between columns */
}
.HoverMenuWrapper.ShowMenu.Place-Center,
.KebabMenuWrapper.ShowMenu.Place-Center {
  right: auto;
  left: auto;
}
.HoverMenuWrapper.ShowMenu.Place-Center > ul,
.KebabMenuWrapper.ShowMenu.Place-Center > ul {
  columns: 1; /* number of columns */
  -webkit-columns: 1; /* Safari support */
  -moz-columns: 1; /* Firefox support */
  column-gap: 0rem; /* optional spacing between columns */
}

/* #endregion */
/* #region Progress Box*/
.ProgressBoxComponent {
  text-align: center;
}
.ProgressBoxComponent .ProgressBoxComponentTitle {
  font-weight: 700;
  font-size: 1.6rem;
}
.ProgressBoxComponent .ProgressBoxComponentProgressMessage {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6em;
}
/* #endregion */
/* #region Progress Bar Component */
.ProgressBarComponent {
  padding-bottom: 2rem;
  padding-top: 2rem;
  margin-top: 5rem;
  border-top: 1px solid #dededf;
}
.ProgressBarComponent .ProgressBarContainer {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  row-gap: 1rem;
}
.ProgressBarComponent .ProgressBarContainer .CancelButtonContainer {
  order: 4;
}
.ProgressBarComponent .ProgressBarContainer .PreviousButtonContainer {
  order: 3;
}
.ProgressBarComponent .ProgressBarContainer .NextButtonContainer {
  order: 1;
}
.ProgressBarComponent .ProgressBarContainer .CompleteButtonContainer {
  order: 5;
}
.ProgressBarComponent .ProgressBarContainer .ProgressContainer {
  order: 2;
  width: 100%;
}
.ProgressBarComponent .ProgressBarContainer .ProgressContainer .ProgressBarBackground {
  position: relative;
  height: 1rem;
  border-radius: 0.5rem;
  background-color: #e8e8e8;
  box-shadow: 0 1px 1px 0 #a7a7a9 inset;
}
.ProgressBarComponent .ProgressBarContainer .ProgressContainer .ProgressBarBackground .ProgressBarForeground {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 0.5rem;
  background-color: #3f3f45;
}
.ProgressBarComponent .ProgressBarContainer:has(.PreviousButtonContainer) .ProgressContainer {
  padding-left: 1.5rem;
}
.ProgressBarComponent .ProgressBarContainer:has(.CancelButtonContainer) .ProgressContainer {
  padding-left: 1.5rem;
}
.ProgressBarComponent .ProgressBarContainer:has(.NextButtonContainer) .ProgressContainer {
  padding-right: 1.5rem;
}
.ProgressBarComponent .ProgressBarContainer:has(.CompleteButtonContainer) .ProgressContainer {
  padding-right: 1.5rem;
}

@media all and (min-width: 400px) {
  .ProgressBarComponent .ProgressBarContainer {
    width: 400px;
    max-width: 100%;
    flex-direction: row;
    align-content: space-between;
    margin-left: auto;
    margin-right: auto;
  }
  .ProgressBarComponent .ProgressBarContainer .CancelButtonContainer {
    flex: 0 0 auto;
    order: unset;
    margin-right: 3rem;
  }
  .ProgressBarComponent .ProgressBarContainer .PreviousButtonContainer {
    flex: 0 0 auto;
    order: unset;
  }
  .ProgressBarComponent .ProgressBarContainer .ProgressContainer {
    flex: 1 1 auto;
    order: unset;
  }
  .ProgressBarComponent .ProgressBarContainer .NextButtonContainer {
    flex: 0 0 auto;
    order: unset;
  }
  .ProgressBarComponent .ProgressBarContainer .CompleteButtonContainer {
    flex: 0 0 auto;
    order: unset;
  }
}
/* #endregion */
/* #region Move To illustrative elements */
.MovingToDivider {
  background-color: #dcf2ff;
  padding: 1rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.MovingToDivider .Arrow {
  /* Removes line-heights so that text fits tightly against the rendered space it resides within.  Use when tight vertical alignment is needed between adjacent items, or when container padding appears too great. */
  line-height: 0;
}
.MovingToDivider .Arrow img {
  width: 3rem;
  height: 3rem;
}
.MovingToDivider .Description {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3em;
  color: #1296e9;
}

.MoveToRightComponent {
  margin-left: 2rem;
  margin-right: 2rem;
  vertical-align: middle;
}

/* #endregion */
/* #region Display Login Details */
.DisplayLoginDetails .LoginDetails {
  background-color: #ffffff;
  box-shadow: 2px 6px 10px rgba(63, 63, 69, 0.15);
  padding: 1rem;
  display: grid;
  grid-template-areas: "LoginLabel Login" "UsernameLabel Username" "PasswordLabel Password";
  grid-template-columns: 1fr 3fr;
}
.DisplayLoginDetails .LoginDetails .LoginLabel {
  grid-area: LoginLabel;
}
.DisplayLoginDetails .LoginDetails .Login {
  grid-area: Login;
}
.DisplayLoginDetails .LoginDetails .UsernameLabel {
  grid-area: UsernameLabel;
}
.DisplayLoginDetails .LoginDetails .Username {
  grid-area: Username;
}
.DisplayLoginDetails .LoginDetails .PasswordLabel {
  grid-area: PasswordLabel;
}
.DisplayLoginDetails .LoginDetails .Password {
  grid-area: Password;
}
.DisplayLoginDetails .Header {
  font-weight: 700;
}

/* #endregion */
/* #region Anonymise user  */
.AnonymiseUser .AnonymiseUserDetails {
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  padding: 1rem;
}
.AnonymiseUser .AnonymiseUserDetails table {
  width: 100%;
  padding: 1rem;
  border: none;
}
.AnonymiseUser .AnonymiseUserDetails table tr td:first-of-type {
  width: 35%;
}
.AnonymiseUser .AnonymiseUserDetails .StrikeThrough {
  text-decoration: line-through;
}
.AnonymiseUser .AnonymiseUserDetails .AnonymiseUserOptions {
  padding-top: 1.5rem;
}
.AnonymiseUser .AnonymiseUserDetails .AnonymiseUserOptions .AnonymiseUserExample {
  font-weight: 700;
}

/* #endregion */
/*#region Breadcrumb trail */
.BreadcrumbNav {
  margin-bottom: 1.5rem;
}
.BreadcrumbNav ul,
.BreadcrumbNav ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.BreadcrumbNav ul li,
.BreadcrumbNav ol li {
  margin: 0;
  padding: 0;
}
.BreadcrumbNav ul li .ButtonTertiary,
.BreadcrumbNav ol li .ButtonTertiary {
  font-weight: normal;
  text-decoration-thickness: unset;
}
.BreadcrumbNav ul li:not(:last-child)::after,
.BreadcrumbNav ol li:not(:last-child)::after {
  display: inline-block;
  content: ">";
  margin: 0 1.5rem;
  color: #a7a7a9;
}

/*#endregion */
/* #region Excel spreadsheet visual imitation  */
table.ExcelSheet {
  margin-bottom: 2rem;
}
table.ExcelSheet th,
table.ExcelSheet td {
  padding: 0.5rem;
}
table.ExcelSheet .ExcelHeader {
  font-weight: 700;
  border: 1px solid #e8e8e8;
  background-color: #e8e8e8;
}
table.ExcelSheet .ExcelCell {
  border: 1px solid #e8e8e8;
  background-color: #ffffff;
}
table.ExcelSheet .Description {
  background-color: transparent;
}
table.ExcelSheet .Correct {
  color: #25a649;
}
table.ExcelSheet .Incorrect {
  color: #f94750;
}
table.ExcelSheet .Number {
  text-align: right;
}

/* #endregion */
/* #region Dashboard */
.AdminDashboard {
  margin-top: 3rem;
}

.DashboardWidget {
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  border: 0.1rem solid #e8e8e8;
  border-radius: 0.5rem;
  background-color: #ffffff;
  width: 280px;
  position: relative;
  cursor: grab;
}
.DashboardWidget.WidgetMedium {
  width: 490px;
}
.DashboardWidget .Heading {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem 2rem 1rem 2rem;
  background-color: #e8e8e8;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.DashboardWidget .Heading .Title {
  flex: 1 1 auto;
  overflow: hidden;
}
.DashboardWidget .Heading .Title p {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.DashboardWidget .Heading .EditLink {
  flex: 0 0 auto;
}
.DashboardWidget .Heading .EditLink a img {
  width: 2rem;
  height: 2rem;
  vertical-align: middle;
}
.DashboardWidget .Content {
  padding: 2rem 2rem 2rem 2rem;
  height: 250px;
  overflow-y: auto;
}
.DashboardWidget .Content table {
  width: 100%;
  border-collapse: collapse;
}
.DashboardWidget .Content table tr th,
.DashboardWidget .Content table tr td {
  border: 1px solid #dededf;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6em;
  color: #212127;
  padding: 0.5rem;
}
.DashboardWidget .Content table thead tr {
  background-color: #e8e8e8;
}
.DashboardWidget .Content table thead tr th {
  text-align: left;
}
.DashboardWidget .Content table tr td {
  white-space: nowrap;
  text-overflow: ellipsis;
}
.DashboardWidget .Content .WidgetChart {
  height: calc(100% - 2rem);
}
.DashboardWidget .Undraggable {
  cursor: default;
}
.DashboardWidget .Links {
  padding: 0 2rem 2rem 2rem;
  background-color: #ffffff;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.DashboardWidget .Links p {
  margin: 0;
}
.DashboardWidget .Links p .ButtonTertiary {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6em;
  display: block;
}

.DashboardWidgetList {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  height: 75vh;
  width: 85vw;
  overflow-y: scroll;
}
.DashboardWidgetList .DashboardWidgetListItem {
  background-color: #ffffff;
  box-shadow: 2px 6px 10px rgba(63, 63, 69, 0.15);
  border-radius: 0.5rem;
  width: 300px;
  height: 250px;
  padding: 2rem;
  gap: 2rem;
  display: flex;
  flex-direction: column;
}
.DashboardWidgetList .DashboardWidgetListItem .DashboardWidgetListItemTitle {
  font-weight: 700;
}
.DashboardWidgetList .DashboardWidgetListItem .DashboardWidgetListItemDescription {
  flex: 1 0 auto;
}
/* #endregion */
/* #region SortableList */
.SortableList {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.SortableList ::deep .sortable-ghost {
  visibility: hidden;
}
.SortableList ::deep .sortable-fallback {
  opacity: 1 !important;
}

/* #endregion */
/* #region Event calendar */
.CalendarContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: left;
  margin-top: 3rem;
}
.CalendarContainer .MonthOrWeek {
  width: 30rem;
}
.CalendarContainer .MonthOrWeek .MonthOrWeekHeader {
  border-left: 0.5rem solid #190b2f;
  padding: 1rem;
  margin-bottom: 2rem;
}
.CalendarContainer .MonthOrWeek .MonthOrWeekHeader .WeekCommencing {
  font-size: 90%;
  font-weight: 600;
}
.CalendarContainer .MonthOrWeek .MonthOrWeekHeader .WeekOrDayTitle {
  font-size: 1.5rem;
  font-weight: 800;
}
.CalendarContainer .MonthOrWeek .DayContainer {
  margin: 1rem 0 2rem 0;
  padding: 1rem;
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  border: 0.1rem solid #e8e8e8;
  border-radius: 0.5rem;
}
.CalendarContainer .MonthOrWeek .DayContainer:has(.EventContainer) .DayNumberName {
  border-bottom: 1px solid #212127;
  margin-bottom: 2rem;
}
.CalendarContainer .MonthOrWeek .DayContainer .DayNumberName {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.CalendarContainer .MonthOrWeek .DayContainer .DayNumberName .DayNumber {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: content;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.3em;
  color: #212127;
}
.CalendarContainer .MonthOrWeek .DayContainer .DayNumberName .DayName {
  flex-grow: 1;
  flex-shrink: 1;
  color: #57575a;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6em;
}
.CalendarContainer .MonthOrWeek .DayContainer.DayContainerPast {
  opacity: 0.8;
}
.CalendarContainer .MonthOrWeek .DayContainer.DayContainerToday {
  border: 2px solid #002658;
  border-top-width: 5px;
}
.CalendarContainer .MonthOrWeek .DayContainer .EventContainer {
  margin-top: 1rem;
  padding-bottom: 1rem;
}
.CalendarContainer .MonthOrWeek .DayContainer .EventContainer:not(:last-of-type) {
  border-bottom: 1px solid #212127;
  margin-bottom: 2rem;
}
.CalendarContainer .MonthOrWeek .DayContainer .EventContainer .StartTimeTitle .EventTitle {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6em;
}
.CalendarContainer .MonthOrWeek .DayContainer .EventContainer .StartTimeTitle .EventStartTime {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6em;
}
.CalendarContainer .MonthOrWeek .DayContainer .EventContainer .StartTimeTitle .EventStartTimeZone {
  color: #57575a;
}
.CalendarContainer .MonthOrWeek .DayContainer .EventContainer .AttendanceStatus {
  font-weight: 600;
  text-align: right;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.CalendarContainer .MonthOrWeek .DayContainer .EventContainer .EventOverview {
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid #a7a7a9;
  margin-top: 1rem;
}
.CalendarContainer .MonthOrWeek .DayContainer .EventContainer .EventOverview p {
  margin: 1rem;
}
.CalendarContainer .MonthOrWeek .DayContainer .EventContainer .EventLink {
  margin-top: 1rem;
}
.CalendarContainer .MonthOrWeek .DayContainer .EventContainer .EventLink .ButtonSecondary {
  border-color: #dededf;
  background-color: #dededf;
}

/* #endregion */
/* #region Reports */
.Report .ReportResults .Competent, .Report .ReportResults .NotExpired {
  color: #25a649;
}
.Report .ReportResults .CompetentBackground {
  background-color: #25a649;
}
.Report .ReportResults .NonCompetent, .Report .ReportResults .Expired, .Report .ReportResults .Important {
  color: #f94750;
}
.Report .ReportResults .NonCompetentBackground {
  background-color: #f94750;
}
.Report .ReportResults .NonCompetentBackground.Archived {
  font-style: italic;
}
.Report .ReportResults .FrameworkTarget,
.Report .ReportResults .FrameworkTarget.Frozen {
  background-color: #fff5d7;
}
.Report .ReportResults .NotAllocated {
  color: #707070;
  background-color: #dededf;
}
.Report .ReportResults .NoData {
  color: #707070;
  background-color: #ffffff;
}
.Report .ReportResults .Comments {
  width: 10rem;
}
.Report .ReportResults .Average {
  background-color: #a7a7a9;
}
.Report .ReportResults .Key {
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: flex;
  gap: 3rem;
}
.Report .ReportResults .Key div {
  display: flex;
  gap: 1rem;
}
.Report .ReportResults .Key div .CompetentKey,
.Report .ReportResults .Key div .NonCompetentKey,
.Report .ReportResults .Key div .NoDataKey {
  border: 1px solid #dededf;
  width: 3rem;
}
.Report .ReportResults .Key div .CompetentKey {
  background-color: #25a649;
}
.Report .ReportResults .Key div .NonCompetentKey {
  background-color: #f94750;
}
.Report .ReportResults .EventScheduleList .EventScheduleTitle {
  font-weight: 700;
}
.Report .ReportResults .EventScheduleList .EventScheduleDate {
  font-weight: 700;
}
.Report .ReportResults .Archived {
  color: #a7a7a9;
}
.Report .ReportResults .Archived.Bold {
  font-weight: 700;
}
.Report .ReportResults .Bold {
  font-weight: 700;
}
.Report .ReportResults .UserIcon img {
  width: 1.5rem;
  height: 1.5rem;
}
.Report .ReportResults .PdrProgressBar img {
  width: 150px;
  max-width: 100%;
}
.Report .ReportResults .PdrProgressBarDescription p {
  text-align: center;
}
.Report .ReportResults .ReportChart {
  position: relative;
  resize: both;
  overflow: auto;
  border: 1px solid black;
}

/* #endregion */
/* #region InformationIconComponent */
.InformationIconComponent {
  display: inline-block;
  line-height: 1.6em;
  width: 20px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  cursor: help;
}
.InformationIconComponent.Clickable:hover {
  cursor: pointer;
}
.InformationIconComponent.ToolTipInfo {
  background-image: url(/Images/v3/TooltipInfo.svg);
}
.InformationIconComponent.ToolTipInfo:hover {
  background-image: url(/Images/v3/TooltipInfoHover.svg);
}
.InformationIconComponent.Warning {
  background-image: url(/Images/svg/MessageBoxWarningIcon.svg);
}
.InformationIconComponent.Risk {
  background-image: url(/Images/svg/MessageBoxErrorIcon.svg);
}
.InformationIconComponent.Invalid {
  background-image: url(/Images/svg/Invalid.svg);
}
.InformationIconComponent.Valid {
  background-image: url(/Images/svg/Valid.svg);
}

.QrCodeComponent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-width: 320px;
  padding-top: 2rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
}
.QrCodeComponent .QrCodeImgContainer {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 270px;
  height: 270px;
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  border-radius: 0.5rem;
  padding: 2rem;
}
.QrCodeComponent .QrCodeImgContainer > img {
  width: 233px;
  height: 233px;
  object-fit: cover;
}
.QrCodeComponent .QrCodeDetailsContainer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 0;
}
.QrCodeComponent .QrCodeDetailsContainer h4 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3em;
  margin: 0;
}
.QrCodeComponent .QrCodeDetailsContainer p {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3em;
  color: #57575a;
  margin: 0;
}
.QrCodeComponent .QrCodeComponentSectionSeparator {
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #dededf;
}

.CompetencyHistoryComponentHeader {
  display: flex;
  gap: 1rem;
}
.CompetencyHistoryComponentHeader > span {
  position: relative;
  top: 3px;
}

/* #endregion */
/* #region Blazor System Classes */
#blazor-error-ui {
  color: #ffffff;
  background-color: #2e0607;
  bottom: 0;
  display: none;
  left: 0;
  padding: 1.5rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
}
#blazor-error-ui a {
  color: #ffffff;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1.5rem 1.5rem 1.5rem 5rem;
  color: #ffffff;
}
.blazor-error-boundary::after {
  content: "An error has occurred.";
}

/* #endregion */
/*#region QR Code printing (on-screen + labels) */
.QrScreenOnlyContainer {
  display: grid;
  gap: 5mm;
}
.QrScreenOnlyContainer .PersonData {
  border: 1px dotted #212127;
  padding: 1rem;
}
.QrScreenOnlyContainer .PersonData p {
  margin: 0;
  padding: 0;
}
.SideTwo:has(.QrPrintContainer) {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}
.SideTwo:has(.QrPrintContainer) .PageContent {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.QrPrintContainer {
  background-color: #ffffff;
  border: 1px solid #a7a7a9;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.QrPrintContainer .PersonData {
  border: 1px dotted #212127;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
}
.QrPrintContainer .PersonData div {
  flex: 1 1 50%;
}
.QrPrintContainer .PersonData div p {
  margin: 0;
  padding: 0;
}
.QrPrintContainer .PageBreak {
  page-break-after: always;
  height: 0;
}

@media print {
  .QrPrintContainer {
    border: none;
  }
  .QrPrintContainer .PersonData {
    border: none;
  }
}
/*#endregion */
/*#region Razor page container*/
.RazorPageBody {
  background: radial-gradient(circle at top left, rgba(76, 64, 255, 0.2) 0%, transparent 40%), radial-gradient(circle at top right, rgba(76, 64, 255, 0.2) 0%, transparent 40%), radial-gradient(circle at bottom center, #4c40ff 0%, #241c3b 50%, #120f23 80%);
  min-height: 100vh;
  background-size: cover;
  position: relative;
  padding: 1rem;
}
.RazorPageBody .RazorPageContent {
  margin: 0 auto;
  max-width: 60rem;
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 2rem;
}

/*#endregion*/
/* #region Competency record */
.CompetencyRecord .PersonDetails {
  gap: 2rem;
  align-content: flex-start;
  margin-bottom: 2rem;
  justify-content: space-between;
}
.CompetencyRecord .PersonDetails .Details {
  display: flex;
  flex-direction: column;
}
.CompetencyRecord .PersonDetails .Details .Name {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.3em;
}
.CompetencyRecord .CompetencyRecordWidgets {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.CompetencyRecord .CompetencyRecordWidgets .WidgetHeader {
  font-weight: 700;
  text-align: center;
}
.CompetencyRecord .CompetencyRecordWidgets .CompetencyRecordCompetencyStatusCount,
.CompetencyRecord .CompetencyRecordWidgets .CompetencyRecordExpiredLevels,
.CompetencyRecord .CompetencyRecordWidgets .CompetencyRecordAverage,
.CompetencyRecord .CompetencyRecordWidgets .CompetencyRecordActiveArchive {
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  padding: 1rem;
  flex: 1 1 calc(50% - 1rem - 2rem);
  min-width: 200px;
}
.CompetencyRecord .CompetencyRecordWidgets .CompetencyRecordCompetencyStatusCount .ChartCanvasContainer {
  margin-top: 1.5rem;
}
.CompetencyRecord .CompetencyRecordOptions {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.CompetencyRecordQualificationsTab td {
  vertical-align: middle;
}
.CompetencyRecordQualificationsTab .ReadOnlyComponent {
  width: unset;
  margin-bottom: 0;
}

@media all and (min-width: 1025px) {
  .CompetencyRecord .CompetencyRecordWidgets {
    gap: 3rem;
  }
  .CompetencyRecord .CompetencyRecordWidgets .CompetencyRecordCompetencyStatusCount,
  .CompetencyRecord .CompetencyRecordWidgets .CompetencyRecordExpiredLevels,
  .CompetencyRecord .CompetencyRecordWidgets .CompetencyRecordAverage,
  .CompetencyRecord .CompetencyRecordWidgets .CompetencyRecordActiveArchive {
    max-width: unset;
    flex: 1 1 calc(25% - 3rem);
  }
}
/* #endregion */
/* #region Lozenge */
.Lozenge {
  text-align: center;
  margin: 1rem;
}
.Lozenge .Counter {
  font-size: 250%;
  color: #212127;
  border-radius: 2rem;
  display: block;
}
.Lozenge .Counter.Danger {
  background-color: #2e0607;
  color: #ffffff;
}
.Lozenge .Counter.Warning {
  background-color: #594500;
  color: #ffffff;
}
.Lozenge .Counter.Success {
  background-color: #0b3618;
  color: #ffffff;
}
.Lozenge .Counter.Bold {
  font-weight: 700;
}
.Lozenge .Counter a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.Lozenge .Description {
  display: block;
  color: #212127;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

/* #endregion */
/* #region CompetencyRecordSkillGroup */
.CompetencyRecordSkillGroup .SearchResultsGridComponent {
  width: 100%;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid {
  width: 100%;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table {
  width: 100%;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table tr > .Archived {
  background-color: rgba(63, 63, 69, 0.1450980392);
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table tbody tr td:first-child {
  width: fit-content;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table th {
  padding: 1rem 0.5rem;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table th.Skill-Title-Width {
  width: 4rem;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table th.Text-Center {
  text-align: center;
}
@media all and (max-width: 769px) {
  .CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table th.Hidden-On-Mobile {
    display: none;
  }
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td {
  min-width: 1rem;
  padding: 1rem 0.5rem;
  width: 120px;
  max-width: 120px;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td:not(:has(.Tag)) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td.Skill-Title-Width {
  width: 400px;
  max-width: 400px;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td.Skill-Title-Width a {
  width: 350px;
  max-width: 350px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td.Text-Center {
  text-align: center;
}
@media all and (max-width: 769px) {
  .CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td.Hidden-On-Mobile {
    display: none;
  }
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td .Tag {
  max-width: 120px;
  gap: 0.5rem;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td .Tag .Tag-Link {
  overflow: hidden;
  gap: 0.5rem;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td .Tag .TagLabel {
  overflow: hidden;
  text-overflow: ellipsis;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td a:not(.Tag-Link) {
  text-decoration: none;
  display: block;
  white-space: nowrap;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td a:not(.Tag-Link).No-Content {
  opacity: 0.1;
  cursor: default;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td a:not(.Tag-Link).No-Access {
  cursor: not-allowed;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td a:not(.Tag-Link).Has-Access {
  cursor: pointer;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td a:not(.Tag-Link):hover {
  color: #212127;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td.Competent a {
  color: #25a649;
  text-decoration: none;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td.NonCompetent a {
  color: #f94750;
  text-decoration: none;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td.Archived, .CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td.NoData {
  color: #a7a7a9;
}
.CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td.Archived a, .CompetencyRecordSkillGroup .SearchResultsGridComponent .SearchResultsGrid table td.NoData a {
  color: #a7a7a9;
}

/* #endregion */
/* #region Hierarchical Data Editor */
.HierarchicalDataEditor {
  margin-top: 2rem;
  max-width: 740px;
}
.HierarchicalDataEditor .Archived {
  opacity: 0.7;
  color: #a7a7a9;
}
.HierarchicalDataEditor .Number {
  text-align: center;
  background-color: #e8e8e8;
}
.HierarchicalDataEditor .SupportingText {
  color: #707070;
}
.HierarchicalDataEditor .CreateItemContainer {
  flex-basis: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
}
.HierarchicalDataEditor .CreateItemContainer.CreateItemContainerShaded {
  background-color: #e8e8e8;
}
.HierarchicalDataEditor .CreateItemContainer.CreateItemContainerGrandParent {
  margin-top: 3rem;
  padding-top: 3rem;
  border-radius: 1rem;
}
.HierarchicalDataEditor .CreateItemContainer.CreateItemContainerGrandParent > .EditForm {
  padding-left: 2rem;
}
.HierarchicalDataEditor .CreateItemContainer.CreateItemContainerParent {
  border-top: 1px solid #dededf;
}
.HierarchicalDataEditor .CreateItemContainer.CreateItemContainerParent > .EditForm {
  padding-left: 3rem;
}
.HierarchicalDataEditor .CreateItemContainer.CreateItemContainerChild {
  background-color: #e8e8e8;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.HierarchicalDataEditor .CreateItemContainer.CreateItemContainerChild > .EditForm {
  padding-left: 4rem;
}
.HierarchicalDataEditor .CreateItemContainer .CreateItemContainerGrandParent,
.HierarchicalDataEditor .CreateItemContainer .CreateItemContainerParent,
.HierarchicalDataEditor .CreateItemContainer .CreateItemContainerChild,
.HierarchicalDataEditor .CreateItemContainer .EditForm {
  text-align: initial;
}
.HierarchicalDataEditor .GrandParent {
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  margin-top: 2rem;
  border: 1px solid #dededf;
  border-radius: 1rem;
}
.HierarchicalDataEditor .GrandParent .GrandParentFunctions {
  display: flex;
  gap: 1.5rem;
  padding: 2rem 2rem 2rem 1.5rem;
  border-bottom: 1px solid #dededf;
}
.HierarchicalDataEditor .GrandParent .GrandParentFunctions .Sorting {
  flex: 0 0 5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.HierarchicalDataEditor .GrandParent .GrandParentFunctions .Sorting .Number {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1em;
  border-radius: 0.5rem;
  padding: 0.5rem;
}
.HierarchicalDataEditor .GrandParent .GrandParentFunctions .Sorting .SortButtons {
  display: flex;
  gap: 1rem;
}
.HierarchicalDataEditor .GrandParent .GrandParentFunctions .Sorting .SortButtons .ButtonTertiary {
  margin-left: 0;
}
.HierarchicalDataEditor .GrandParent .GrandParentFunctions .Heading {
  flex: 1 1 auto;
}
.HierarchicalDataEditor .GrandParent .GrandParentFunctions .Heading .EntityTitle {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1em;
  margin-top: 0;
}
.HierarchicalDataEditor .GrandParent .GrandParentFunctions .Heading .Buttons {
  margin-top: 3rem;
  flex: 0 0 5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: flex-start;
}
.HierarchicalDataEditor .GrandParent .GrandParentFunctions .Heading .Buttons .ButtonTertiary {
  margin-left: 0;
}
.HierarchicalDataEditor .ParentCollectionContainer .Parent {
  display: flex;
  gap: 1.5rem;
  padding-left: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}
.HierarchicalDataEditor .ParentCollectionContainer .Parent .Sorting {
  width: 2rem;
}
.HierarchicalDataEditor .ParentCollectionContainer .Parent .Sorting .SortButtons {
  display: inline-flex;
  flex-direction: column;
  gap: 1rem;
}
.HierarchicalDataEditor .ParentCollectionContainer .Parent .Sorting .SortButtons .ButtonTertiary {
  margin-left: 0;
}
.HierarchicalDataEditor .ParentCollectionContainer .Parent .AllOtherFunctionality {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  justify-content: space-between;
  padding-right: 1rem;
}
.HierarchicalDataEditor .ParentCollectionContainer .Parent .AllOtherFunctionality .Number {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6em;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.HierarchicalDataEditor .ParentCollectionContainer .Parent .AllOtherFunctionality .ItemType {
  flex: 1 1 auto;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1em;
  color: #707070;
}
.HierarchicalDataEditor .ParentCollectionContainer .Parent .AllOtherFunctionality .Buttons {
  margin-left: auto;
  display: flex;
  gap: 2rem;
}
.HierarchicalDataEditor .ParentCollectionContainer .Parent .AllOtherFunctionality .EntityDetails {
  flex-basis: 100%;
}
.HierarchicalDataEditor .ParentCollectionContainer .Parent .AllOtherFunctionality .EntityDetails .EntityTitle {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6em;
}
.HierarchicalDataEditor .ParentCollectionContainer .Parent .AllOtherFunctionality .EntityDetails .ShowHideDetail {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.HierarchicalDataEditor .ParentCollectionContainer .Parent .AllOtherFunctionality .EntityDetails .MoreInformation {
  border-radius: 0.5rem;
  background-color: #fcfcfc;
  border: 1px solid #dededf;
  padding: 1.5rem;
}
.HierarchicalDataEditor .ChildCollectionContainer {
  padding-bottom: 2rem;
  padding-right: 2rem;
  padding-left: 2rem;
}
.HierarchicalDataEditor .ChildCollectionContainer .WarningBanner, .HierarchicalDataEditor .ChildCollectionContainer .InformationBanner {
  margin-top: 0;
  margin-bottom: 0;
  border-left: 1px solid #dededf;
  border-right: 1px solid #dededf;
}
.HierarchicalDataEditor .ChildCollectionContainer .InformationBanner {
  background-color: transparent;
}
.HierarchicalDataEditor .ChildCollectionContainer h3 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6em;
  padding: 1rem 4rem;
  background-color: #e8e8e8;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  margin-top: 0;
  margin-bottom: 0;
  border-top: 1px solid #dededf;
  border-left: 1px solid #dededf;
  border-right: 1px solid #dededf;
}
.HierarchicalDataEditor .ChildCollectionContainer .NoChildren {
  padding: 1rem 2rem 1rem 4rem;
  border-left: 1px solid #dededf;
  border-right: 1px solid #dededf;
}
.HierarchicalDataEditor .ChildCollectionContainer:has(.SortButtons) h3 {
  padding: 1rem 5rem;
}
.HierarchicalDataEditor .ChildCollectionContainer .Child {
  display: flex;
  min-height: 10rem;
  border-left: 1px solid #dededf;
  border-right: 1px solid #dededf;
  border-bottom: 1px solid #dededf;
}
.HierarchicalDataEditor .ChildCollectionContainer .Child .Sorting {
  flex-basis: 3rem;
  padding-left: 1.5rem;
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}
.HierarchicalDataEditor .ChildCollectionContainer .Child .Sorting .SortButtons {
  display: inline-flex;
  flex-direction: column;
  gap: 1rem;
}
.HierarchicalDataEditor .ChildCollectionContainer .Child .Sorting .SortButtons .ButtonTertiary {
  margin-left: 0;
}
.HierarchicalDataEditor .ChildCollectionContainer .Child .EntityDetails {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  padding-right: 3rem;
  padding-top: 2rem;
  padding-bottom: 1.5rem;
  padding-left: 1rem;
}
.HierarchicalDataEditor .ChildCollectionContainer .Child .EntityDetails .EntityTitle {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6em;
}
.HierarchicalDataEditor .ChildCollectionContainer .Child .EntityDetails .EntityDescription {
  margin-top: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.HierarchicalDataEditor .ChildCollectionContainer .Child .PointValue {
  flex-basis: 7rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
  text-align: center;
  border-left: 1px solid #e8e8e8;
}
.HierarchicalDataEditor .ChildCollectionContainer .Child .Buttons {
  flex: 0 1 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 2rem;
  padding-bottom: 1.5rem;
  border-left: 1px solid #e8e8e8;
}
.HierarchicalDataEditor .ChildCollectionContainer .Child .Buttons .ButtonTertiary {
  margin-left: 0;
}
.HierarchicalDataEditor .ChildCollectionContainer .Child .EditForm {
  padding-left: 4rem;
}

@media all and (min-width: 769px) {
  .HierarchicalDataEditor .ChildCollectionContainer .Child .AnswerText .AnswerDescription {
    -webkit-line-clamp: 3;
  }
}
hr:has(~ .HierarchicalDataEditor),
.HierarchicalDataEditor + hr {
  max-width: 740px;
  margin-left: 0;
}

/* #endregion */
/*#region Print Rules*/
@media print {
  .NoPrint {
    display: none;
  }
}
/*#endregion */
/*#region LoadingContent component*/
#blazor-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}
#blazor-loading span {
  font-size: 1rem;
}
#blazor-loading #loading-app-spinner {
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side, var(--SkillStationMedium) 94%, rgba(0, 0, 0, 0)) top/4px 4px no-repeat, conic-gradient(rgba(0, 0, 0, 0) 40%, var(--SkillStationMedium));
  mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 0);
  animation: spin 1s infinite cubic-bezier(0.1, 0.6, 0.7, 0.2);
  margin: 1rem;
}

.Loading-Content {
  /*position: the postion is unset until loading, when it is set to relative (inline on the component)*/
  /*this is because position:relative plays havoc with the kebab menus on tables*/
}
.Loading-Content .Content-Area {
  transition: filter 0.3s ease;
}
.Loading-Content .Content-Area .Blurred {
  filter: blur(1px);
  opacity: 0.2;
  pointer-events: none;
  height: 100%;
}
.Loading-Content .Content-Area .Empty-Loading-Placeholder {
  width: 100%;
  /* Animated gradient border */
  /* Overlay to create inner mask */
}
.Loading-Content .Content-Area .Empty-Loading-Placeholder.Bordered {
  height: 100px;
  position: relative;
  border-radius: 0.5rem;
  background-color: #e8e8e8; /* $Neutral-15 */
  overflow: hidden;
}
.Loading-Content .Content-Area .Empty-Loading-Placeholder.Bordered::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(270deg, #ffffff, #fcfcfc, #e8e8e8, #dededf, #a7a7a9, #dededf, #e8e8e8, #fcfcfc, #ffffff);
  background-size: 800% 800%;
  animation: borderAnimation 1s linear infinite;
}
.Loading-Content .Content-Area .Empty-Loading-Placeholder.Bordered::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background: #e8e8e8; /* $Neutral-15 */
  border-radius: inherit;
  z-index: 2;
}
@keyframes borderAnimation {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
.Loading-Content .Content-Area .Simple-Loading-Placeholder {
  width: 100%;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border: 0.1rem solid #a7a7a9;
  background-color: #fcfcfc;
  box-shadow: inset 2px 2px 6px rgba(63, 63, 69, 0.5);
}
.Loading-Content .Content-Area .Simple-Loading-Placeholder .Placeholder-Header {
  background-color: #57575a;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.Loading-Content .Content-Area .Table-Loading-Placeholder {
  width: 100%;
  height: 100%;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border: 0.1rem solid #a7a7a9;
  background-color: #fcfcfc;
  box-shadow: inset 2px 2px 6px rgba(63, 63, 69, 0.5);
}
.Loading-Content .Content-Area .Table-Loading-Placeholder .Table-Placeholder-Container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.Loading-Content .Content-Area .Table-Loading-Placeholder .Table-Placeholder-Header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #a7a7a9;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  overflow: hidden;
  white-space: nowrap;
}
.Loading-Content .Content-Area .Table-Loading-Placeholder .Table-Placeholder-Header p {
  color: black;
  font-weight: 900;
  font-size: 1.4rem;
  flex-shrink: 0;
  padding: 1rem;
}
.Loading-Content .Content-Area .Table-Loading-Placeholder .Table-Placeholder-Body {
  width: 100%;
  border-bottom: 1px solid #57575a;
}
.Loading-Content .Content-Area .Button-Wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
}
.Loading-Content .Content-Area .Button-Wrapper .Blurred {
  filter: none;
  opacity: 0.4;
}
.Loading-Content .Loading-Block {
  display: flex;
  justify-content: center;
  align-items: center;
}
.Loading-Content .Loading-Overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /*in case the rendered height is not calculated*/
  background-color: transparent;
  display: flex;
  justify-content: center;
  z-index: 1000;
  pointer-events: none; /* So underlying buttons aren’t clickable, change if needed */
}
.Loading-Content .Position-Top {
  align-items: start;
}
.Loading-Content .Position-Center {
  align-items: center;
}
.Loading-Content .Loading-Animation,
.Loading-Content .Completion-Message {
  text-align: center;
  z-index: 1001;
  pointer-events: auto; /* Allow interaction with overlay content if needed */
}
.Loading-Content .Loading-Animation .Button-Loading-Spinner-Wrapper,
.Loading-Content .Completion-Message .Button-Loading-Spinner-Wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
}
.Loading-Content .Loading-Animation .Loading-Spinner,
.Loading-Content .Completion-Message .Loading-Spinner {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side, var(--SkillStationMedium) 94%, rgba(0, 0, 0, 0)) top/9px 9px no-repeat, conic-gradient(rgba(0, 0, 0, 0) 40%, var(--SkillStationMedium));
  mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 9px), #000 0);
  animation: spin 1s infinite cubic-bezier(0.1, 0.6, 0.7, 0.2);
}
.Loading-Content .Loading-Animation .Button-Loading-Spinner,
.Loading-Content .Completion-Message .Button-Loading-Spinner {
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side, var(--SkillStationMedium) 94%, rgba(0, 0, 0, 0)) top/4px 4px no-repeat, conic-gradient(rgba(0, 0, 0, 0) 40%, var(--SkillStationMedium));
  mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 0);
  animation: spin 1s infinite cubic-bezier(0.1, 0.6, 0.7, 0.2);
}
.Loading-Content .Loading-Animation span,
.Loading-Content .Completion-Message span {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3em;
}
.Loading-Content .Loading-Animation span.Success,
.Loading-Content .Completion-Message span.Success {
  color: #25a649;
}
.Loading-Content .Loading-Animation span.Failure,
.Loading-Content .Completion-Message span.Failure {
  color: #f94750;
}
.Loading-Content .Loading-Animation .Button-Loading-Spinner-Wrapper span,
.Loading-Content .Completion-Message .Button-Loading-Spinner-Wrapper span {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3em;
  animation: fade-in-out 1s infinite;
}
.Loading-Content .Loading-Animation .Form-Input-Loading-Spinner,
.Loading-Content .Completion-Message .Form-Input-Loading-Spinner {
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side, var(--SkillStationMedium) 94%, rgba(0, 0, 0, 0)) top/4px 4px no-repeat, conic-gradient(rgba(0, 0, 0, 0) 40%, var(--SkillStationMedium));
  mask: radial-gradient(farthest-side, rgba(0, 0, 0, 0) calc(100% - 4px), #000 0);
  animation: spin 1s infinite cubic-bezier(0.1, 0.6, 0.7, 0.2);
}
@keyframes fade-in-out {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes spin {
  100% {
    transform: rotate(1turn);
  }
}

/*#endregion*/
/* #region Signature Box */
.Signature-Box canvas {
  border: 0.1rem solid #e8e8e8;
  border-radius: 0.5rem;
}

/* #endregion */
/* #region PriviledgeGroupsComponent */
.PrivilegeGroupComponent {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 5rem;
}
.PrivilegeGroupComponent .FormGroup {
  flex-grow: 1 1 auto;
  border: 0.1rem solid #a7a7a9;
}
.PrivilegeGroupComponent .FormGroup .PrivilegeGroupComponent-Header {
  background-color: #e8e8e8;
  padding: 0.5rem 1rem;
}
.PrivilegeGroupComponent .FormGroup .PrivilegeGroupComponent-Header h3 {
  margin: 0;
}
.PrivilegeGroupComponent .FormGroup .PrivilegeGroupComponent-Body {
  padding: 0 1rem;
}

/* #endregion */
/*#region Floating ToolTips */
.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 150;
  display: none;
  padding: 0.5em;
  font-weight: normal;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3em;
  border: 0.2rem solid #57575a;
  border-radius: 0.5em;
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  background-color: #ffffff;
  color: #212127;
  text-decoration: none;
  max-width: 32rem;
  max-height: 50vh;
  overflow-y: hidden;
  white-space: pre-wrap;
}

.tooltipstatic {
  /* Dark/blur overlay */
  display: none;
  position: fixed;
  z-index: 800;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  backdrop-filter: blur(3px);
  background-color: rgba(63, 63, 69, 0.75) !important;
}
.tooltipstatic .ttContent {
  /* Tooltip Container */
  border: 0.2rem solid #57575a;
  border-radius: 0.5em;
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  top: 10vh;
  width: 80vw;
  left: 10vw;
  position: fixed;
}
.tooltipstatic .ttContent .ttstaticbanner {
  /* Top banner */
  background-color: #ffffff;
  color: #212127;
  border-radius: 0.5rem;
  font-size: 1.5em;
  padding: 0.5em;
  font-weight: 600;
}
.tooltipstatic .ttContent .ttstaticbanner .closeButton {
  /* Close button within banner */
  display: inline-block;
  padding: 0.1em 0.75em 0.1em 0.75em;
  color: #212127;
  font-weight: normal;
  border-radius: 0.25em;
  text-decoration: none;
}
.tooltipstatic .ttContent .toolTipText {
  /* Tooltip text */
  padding: 1em;
  overflow-y: scroll;
  overflow-x: initial;
  height: calc(70vh + 2em);
  white-space: pre-wrap;
}

/*#endregion*/
/*#region Event Attendance/Details */
.EventAttendance .TopGridContainer > div {
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  border: 0.1rem solid #e8e8e8;
  border-radius: 0.5rem;
  padding: 2rem;
}
.EventAttendance .TopGridContainer .EventHeaderContainer {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 2rem;
}
.EventAttendance .TopGridContainer .EventHeaderContainer .EventTitle {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.3em;
}
.EventAttendance .TopGridContainer .EventHeaderContainer .DateLocationContainer {
  display: flex;
  flex-wrap: wrap;
}
.EventAttendance .TopGridContainer .EventHeaderContainer .DateLocationContainer .EventDateTime {
  flex: 1 1 auto;
}
.EventAttendance .TopGridContainer .EventHeaderContainer .DateLocationContainer .EventLocation {
  flex: 1 1 auto;
}
.EventAttendance .TopGridContainer .EventDetailsContainer .EventDetailsContainerTopRow {
  display: flex;
  flex-wrap: wrap;
  column-gap: 5rem;
}
.EventAttendance .TopGridContainer .EventDetailsContainer .EventDetailsContainerTopRow p {
  margin-top: 0;
  margin-bottom: 0;
}
.EventAttendance .TopGridContainer .EventDetailsContainer .EventDetailsContainerBottomRow {
  margin-top: 2rem;
}
.EventAttendance .TopGridContainer .AttendThisEventContainer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}
.EventAttendance .TopGridContainer .AttendThisEventContainer .AttendanceStatus .Tag {
  width: 80%;
}
.EventAttendance .TopGridContainer .AttendThisEventContainer .PlacesRemaining {
  color: #707070;
}
.EventAttendance .TopGridContainer .AttendeeCountsContainer {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1.5rem;
}
.EventAttendance .TopGridContainer .AttendeeCountsContainer > div {
  padding: 1rem;
}
.EventAttendance .TopGridContainer .AttendeeCountsContainer > div > h4 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3em;
  margin-top: 0;
  margin-bottom: 0;
}
.EventAttendance .TopGridContainer .AttendeeCountsContainer > div > p {
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.3em;
  margin-top: 0;
  margin-bottom: 0;
}
.EventAttendance .TopGridContainer .AttendeeCountsContainer .MaximumPlaces {
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  background-color: #dcf2ff;
  border: 1px solid #1296e9;
  flex-basis: 100%;
  border-radius: 1rem;
}
.EventAttendance .TopGridContainer .AttendeeCountsContainer .WaitingListCount {
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  background-color: #e8e8e8;
  border: 1px solid #a7a7a9;
  flex-basis: 100%;
  border-radius: 1rem;
}
.EventAttendance .TopGridContainer .AttendeeCountsContainer hr {
  flex-basis: 100%;
}
.EventAttendance .TopGridContainer .AttendeeCountsContainer .TotalAttendeeCount {
  flex-basis: 100%;
}
.EventAttendance .TopGridContainer .AttendeeCountsContainer .ApprovedAttendeeCount {
  flex-basis: 50%;
}
.EventAttendance .TopGridContainer .AttendeeCountsContainer .UnapprovedAttendeeCount {
  flex-basis: 50%;
}
.EventAttendance .AttendeeListContainer .SearchResultsGridComponent td.EmailTruncate {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.EventAttendance .AdminFunctionsContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.EventAttendance .AdminFunctionsContainer > div {
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  border: 0.1rem solid #e8e8e8;
  border-radius: 0.5rem;
}
.EventAttendance .AdminFunctionsContainer .MenuLinks {
  flex: 0 1 content;
  padding: 1rem;
}
.EventAttendance .AdminFunctionsContainer .MenuLinks ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.EventAttendance .AdminFunctionsContainer .MenuLinks ul li {
  margin: 0;
  padding: 0;
}
.EventAttendance .AdminFunctionsContainer .MenuLinks ul li .ButtonIcon {
  display: block;
}
.EventAttendance .AdminFunctionsContainer .MenuActions {
  flex: 1 1 auto;
  padding: 2rem;
}

@media all and (min-width: 1025px) {
  .EventAttendance .TopGridContainer {
    display: grid;
    grid-template-areas: "EventHeaderContainer  EventHeaderContainer" "EventDetailsContainer AttendThisEventContainer" "EventDetailsContainer AttendeeCountsContainer" "EventDetailsContainer .";
    grid-template-columns: auto 36rem;
    grid-gap: 2rem;
  }
  .EventAttendance .TopGridContainer .EventHeaderContainer {
    grid-area: EventHeaderContainer;
  }
  .EventAttendance .TopGridContainer .EventHeaderContainer .DateLocationContainer {
    flex-wrap: nowrap;
    column-gap: 2rem;
  }
  .EventAttendance .TopGridContainer .EventHeaderContainer .DateLocationContainer .EventDateTime {
    flex-basis: 50%;
  }
  .EventAttendance .TopGridContainer .EventHeaderContainer .DateLocationContainer .EventLocation {
    flex-basis: 50%;
    text-align: right;
  }
  .EventAttendance .TopGridContainer .EventDetailsContainer {
    grid-area: EventDetailsContainer;
  }
  .EventAttendance .TopGridContainer .AttendThisEventContainer {
    grid-area: AttendThisEventContainer;
  }
  .EventAttendance .TopGridContainer .AttendeeCountsContainer {
    grid-area: AttendeeCountsContainer;
  }
  .EventAttendance .AdminFunctionsContainer {
    flex-wrap: nowrap;
  }
}
/*#endregion */
/* #region CommentsSection */
.CommentsSection {
  padding-top: 1rem;
}
.CommentsSection h2 {
  margin-top: 0;
}
.CommentsSection .EditForm {
  margin-bottom: 3rem;
}
.CommentsSection .EditForm .FormGroup {
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  margin-top: 3rem;
  padding: 1rem;
  max-width: 769px;
}
.CommentsSection .EditForm .FormGroup .ComponentRow {
  margin-bottom: 0;
  justify-content: space-between;
  align-items: center;
}
.CommentsSection .EditForm .FormGroup .ComponentRow .ReadOnlyComponent {
  max-width: none;
}

/* #endregion */
/* #region ReadOnly-Label-And-Field */
.ReadOnly-Label-And-Field {
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.5rem;
}
.ReadOnly-Label-And-Field .ReadOnly-Label {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #3f3f45;
}
.ReadOnly-Label-And-Field .ReadOnly-Label-Bold {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3em;
  color: #3f3f45;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Primary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Secondary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Tertiary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Primary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Secondary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Tertiary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Primary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Secondary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Tertiary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Primary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Secondary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Tertiary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Primary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Secondary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Tertiary {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  padding: 0.5rem;
  border: 1px solid #dededf;
  border-radius: 0.5rem;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Primary:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Secondary:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Tertiary:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Primary:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Secondary:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Tertiary:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Primary:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Secondary:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Tertiary:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Primary:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Secondary:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Tertiary:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Primary:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Secondary:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Tertiary:has(img) {
  justify-content: space-between;
  padding: 1rem;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Primary .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Secondary .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Tertiary .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Primary .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Secondary .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Tertiary .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Primary .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Secondary .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Tertiary .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Primary .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Secondary .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Tertiary .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Primary .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Secondary .ReadOnly-Field,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Tertiary .ReadOnly-Field {
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.3em;
  margin: 0;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Primary .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Secondary .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Tertiary .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Primary .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Secondary .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Tertiary .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Primary .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Secondary .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Tertiary .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Primary .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Secondary .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Tertiary .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Primary .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Secondary .ReadOnly-Field-Bold,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Tertiary .ReadOnly-Field-Bold {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.3em;
  margin: 0;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Primary a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Secondary a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Tertiary a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Primary a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Secondary a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Tertiary a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Primary a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Secondary a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Tertiary a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Primary a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Secondary a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Tertiary a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Primary a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Secondary a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Tertiary a {
  padding: 0.5rem 0.5rem;
  text-decoration: none;
  width: 100%;
  text-align: center;
  color: inherit;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Primary a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Secondary a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Tertiary a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Primary a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Secondary a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Tertiary a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Primary a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Secondary a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Tertiary a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Primary a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Secondary a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Tertiary a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Primary a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Secondary a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Tertiary a:has(img) {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Primary:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Secondary:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Tertiary:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Primary:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Secondary:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Tertiary:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Primary:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Secondary:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Tertiary:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Primary:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Secondary:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Tertiary:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Primary:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Secondary:has(a),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Tertiary:has(a) {
  padding: 0;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Primary:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Secondary:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Tertiary:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Primary:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Secondary:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Tertiary:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Primary:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Secondary:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Tertiary:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Primary:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Secondary:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Tertiary:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Primary:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Secondary:has(a:hover) a,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Tertiary:has(a:hover) a {
  padding: 4px 0.5rem;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Primary:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Secondary:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Tertiary:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Primary:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Secondary:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Tertiary:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Primary:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Secondary:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Tertiary:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Primary:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Secondary:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Tertiary:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Primary:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Secondary:has(a:hover) a:has(img),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Tertiary:has(a:hover) a:has(img) {
  padding: 9px;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Primary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Secondary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Tertiary {
  color: #212127;
  border-color: #a7a7a9;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Primary:has(a:hover),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Secondary:has(a:hover),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Tertiary:has(a:hover) {
  border: 2px solid #57575a;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Primary {
  background-color: #dededf;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Neutral-Secondary {
  background-color: #fcfcfc;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Primary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Secondary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Tertiary {
  color: #002658;
  border-color: #1296e9;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Primary:has(a:hover),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Secondary:has(a:hover),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Tertiary:has(a:hover) {
  border: 2px solid #002658;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Primary {
  background-color: #93d5ff;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Blue-Secondary {
  background-color: #dcf2ff;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Primary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Secondary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Tertiary {
  color: #594500;
  border-color: #fdce35;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Primary:has(a:hover),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Secondary:has(a:hover),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Tertiary:has(a:hover) {
  border: 2px solid #594500;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Primary {
  background-color: #ffde72;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Yellow-Secondary {
  background-color: #fff5d7;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Primary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Secondary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Tertiary {
  border-color: #25a649;
  color: #0b3618;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Primary:has(a:hover),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Secondary:has(a:hover),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Tertiary:has(a:hover) {
  border: 2px solid #0b3618;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Primary {
  background-color: #4ad571;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Green-Secondary {
  background-color: #deffe7;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Primary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Secondary,
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Tertiary {
  border-color: #f94750;
  color: #2e0607;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Primary:has(a:hover),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Secondary:has(a:hover),
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Tertiary:has(a:hover) {
  border: 2px solid #2e0607;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Primary {
  background-color: #ff747a;
}
.ReadOnly-Label-And-Field .ReadOnly-Field-Box-Red-Secondary {
  background-color: #feebec;
}

/* #endregion */
/* #region Card*/
.Card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: stretch;
  background-color: #ffffff;
  box-shadow: 0px 1px 3px 0 rgba(63, 63, 69, 0.1450980392);
  border-radius: 0.5rem;
}
@media all and (max-width: 769px) {
  .Card {
    justify-self: center;
  }
}
.Card .Card-Header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.Card .Card-Header.Card-Header-Shaded {
  background-color: #e8e8e8;
}
.Card .Card-Header:has(.ProfilePhoto) {
  padding: 2rem 2rem 0 2rem;
}
.Card .Card-Header .ProfilePhoto > img {
  border-radius: 0.5rem;
}
.Card .Card-Header .Card-Title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.Card .Card-Header .Card-SubTitle {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3em;
  margin: 0;
  color: #57575a;
}
.Card .Card-Header .Card-Title-And-SubTitle {
  display: flex;
  flex-direction: column;
}
.Card .Card-Header .Card-Title-And-SubTitle .Card-Title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3em;
}
.Card .Card-Body {
  padding: 2rem;
}
.Card .Card-Body .Card-Body-Section {
  margin-bottom: 1.5rem;
}
.Card .Card-Body .Card-Label {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1em;
  color: #a7a7a9;
  margin: 0;
}
.Card .Card-Body p {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6em;
  margin-top: 0;
  margin-bottom: 1rem;
}
.Card .Card-Body p em {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3em;
  font-style: normal;
}
.Card .Card-Footer {
  margin-top: auto;
  padding: 1rem 2rem 2rem 2rem;
}
.Card .Card-Footer .Card-Footer-Buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.Card .Card-Footer .ButtonTertiary {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Card:has(.Card-Header) .Card-Body {
  padding: 2rem 2rem 2rem 2rem;
}
.Card:has(.Card-Header):has(.Card-Footer) .Card-Body {
  padding: 2rem 2rem 1rem 2rem;
}
.Card:has(.Card-Footer) .Card-Body {
  padding: 2rem 2rem 1rem 2rem;
}
.Card:has(.Card-Body):has(.WidgetChart) .Card-Body {
  padding-top: 0;
  padding-bottom: 0;
}
.Card:has(.Card-Body):has(.WidgetChart) .Card-Footer {
  padding-top: 0;
}

/* #endregion */
/* #region Toolbar */
.Toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #dededf;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  gap: 20px;
}
.Toolbar .NotificationHeaderTag {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6em;
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: 0.3rem;
  background-color: #212127;
  color: #ffffff;
  margin-left: 0.5rem;
}
.Toolbar .Toolbar-Section {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
@media all and (max-width: 769px) {
  .Toolbar .Toolbar-Section {
    gap: 2rem;
  }
}
.Toolbar .Toolbar-Search {
  display: flex;
  gap: 1rem;
  min-width: 320px;
}
.Toolbar .Toolbar-Vertical-Divider {
  width: 3rem;
  height: 3rem;
  background-image: url("/Images/v3/Vertical_Divider.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.Toolbar .Toolbar-Horizontal-Divider {
  display: none;
}
@media all and (max-width: 769px) {
  .Toolbar .Toolbar-Horizontal-Divider {
    display: block;
    height: 1px;
    width: 100%;
    border-bottom: 1px solid #dededf;
  }
}
.Toolbar .Toolbar-Button-Group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media all and (max-width: 769px) {
  .Toolbar .Toolbar-Button-Group.Stack-On-Mobile {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .Toolbar .Toolbar-Button-Group.Stack-On-Mobile .Toolbar-Vertical-Divider {
    display: none;
  }
}
.Toolbar .TextComponent {
  margin-bottom: 0;
  width: unset;
  min-width: 270px;
}
@media all and (max-width: 769px) {
  .Toolbar .TextComponent {
    min-width: unset;
  }
}
.Toolbar .TextComponent .ComponentLabelContainer {
  margin-bottom: 0;
}

/* #endregion */
/* #region HoverMenuContainer */
.HoverMenuContainer {
  position: absolute; /* Break out of normal page flow */
  z-index: 10;
  display: none;
  background-color: #ffffff;
  box-shadow: 2px 6px 10px rgba(63, 63, 69, 0.15);
  border: 0.1rem solid #e8e8e8;
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: left;
  width: 320px;
}
.HoverMenuContainer .HoverMenuContainer-Section {
  margin-bottom: 2rem;
}
.HoverMenuContainer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.HoverMenuContainer ul li {
  margin: 0;
  padding: 0;
}
.HoverMenuContainer ul li a,
.HoverMenuContainer ul li label {
  display: block;
  padding: 0.5rem 0;
  white-space: nowrap;
}
.HoverMenuContainer ul li a:hover,
.HoverMenuContainer ul li label:hover {
  background-color: #e8e8e8;
}
.HoverMenuContainer ul li a:has(input[type=checkbox]:focus-visible),
.HoverMenuContainer ul li label:has(input[type=checkbox]:focus-visible) {
  outline: 0.2rem solid #212127;
}
.HoverMenuContainer ul li a {
  font-weight: 700;
  text-decoration: none;
}
.HoverMenuContainer ul li label input[type=checkbox],
.HoverMenuContainer ul li label input[type=radio] {
  vertical-align: middle;
  margin-right: 0.5rem;
}
.HoverMenuContainer ul li input[type=radio] {
  margin: 0 0 2px 0;
}
.HoverMenuContainer ul li:has(strong) {
  margin-bottom: 1rem;
}
.HoverMenuContainer ul li:has(strong):last-child {
  margin-bottom: 0;
}
.HoverMenuContainer ul li strong {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3em;
  color: #212127;
}
.HoverMenuContainer .HoverMenuFooter {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
}

.HoverMenuContainer.ShowMenu {
  display: block;
}

/* #endregion */
/* #region SearchResultsInfoCard */
.SearchResultsInfoCard {
  padding: 1rem 0 2rem 0;
}
.SearchResultsInfoCard .SearchResultsInfoBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border: 1px solid #93d5ff;
  border-radius: 0.5rem;
  background-color: #dcf2ff;
}
.SearchResultsInfoCard .SearchResultsInfoBar p {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3em;
  margin: 0;
}
.SearchResultsInfoCard .SearchResultsInfoBar p span {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3em;
  margin: 0;
}

/* #endregion */
/* #region Utility Classes*/
.Flex {
  display: flex;
}
@media all and (max-width: 481px) {
  .Flex {
    justify-content: center;
  }
}

.Flex-Col {
  flex-direction: column;
}

.Flex-Wrap {
  flex-wrap: wrap;
}

.Flex-1 {
  flex: 1;
}

.Flex-Grow-1 {
  flex-grow: 1;
}

.Flex-Shrink-1 {
  flex-shrink: 1;
}

.Flex-Gap-15 {
  gap: 1.5rem;
}

.Flex-Gap-20 {
  gap: 2rem;
}

.Justify-Content-Center {
  justify-content: center;
}

.Justify-Content-Space-Between {
  justify-content: space-between;
}

.Justify-Content-Flex-End {
  justify-content: flex-end;
}

.Align-Items-Center {
  align-items: center;
}

.Align-Items-Flex-End {
  align-items: flex-end;
}

.Align-Items-Stretch {
  align-items: stretch;
}

.Mobile-Max-Width {
  width: 32rem;
}

.Margin-Top-0 {
  margin-top: 0;
}

.Margin-Top-10 {
  margin-top: 1rem;
}

.Margin-Top-15 {
  margin-top: 1.5rem;
}

.Margin-Top-20 {
  margin-top: 2rem;
}

.Margin-Top-30 {
  margin-top: 3rem;
}

.Margin-Top-50 {
  margin-top: 5rem;
}

.Margin-Top-60 {
  margin-top: 6rem;
}

.Margin-Top-120 {
  margin-top: 12rem;
}

.Margin-Bottom-0 {
  margin-bottom: 0;
}

.Margin-Bottom-10 {
  margin-bottom: 1rem;
}

.Margin-Bottom-15 {
  margin-bottom: 1.5rem;
}

.Margin-Bottom-20 {
  margin-bottom: 2rem;
}

.Margin-Bottom-30 {
  margin-bottom: 3rem;
}

.Margin-Bottom-50 {
  margin-bottom: 5rem;
}

.Truncate-1 {
  overflow: hidden;
  text-overflow: ellipsis;
}

.In-Development-Overlay {
  position: relative;
}
.In-Development-Overlay::after {
  content: "In development";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
  text-align: center;
  z-index: 999;
  pointer-events: auto;
}

/* #endregion */
/* #region Competency history */
.CompetencyHistoryContainer .SkillContainer {
  border: 0.1rem solid #e8e8e8;
  border-radius: 0.5rem;
  background-color: #ffffff;
  margin-top: 1.5rem;
  margin-bottom: 5rem;
}
.CompetencyHistoryContainer .SkillContainer .SkillHeader {
  padding: 2rem;
  border-bottom: 0.1rem solid #e8e8e8;
  display: flex;
  flex-direction: column;
}
.CompetencyHistoryContainer .SkillContainer .SkillHeader.UserSkillArchived {
  background-color: #a7a7a9;
  background-color: #e8e8e8;
}
.CompetencyHistoryContainer .SkillContainer .SkillHeader .SkillHeaderSkillGroupTitle {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3em;
  margin-bottom: 0.5rem;
}
.CompetencyHistoryContainer .SkillContainer .SkillHeader .SkillHeaderSkillTitle {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1em;
  margin-bottom: 2rem;
}
.CompetencyHistoryContainer .SkillContainer .SkillCards {
  padding: 3rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-bottom: 0.1rem solid #e8e8e8;
}
.CompetencyHistoryContainer .SkillContainer .SkillCards .SkillCard {
  padding: 1rem;
  border: 0.1rem solid #e8e8e8;
  border-radius: 0.5rem;
}
.CompetencyHistoryContainer .SkillContainer .SkillCards .SkillCard.NotCompetent, .CompetencyHistoryContainer .SkillContainer .SkillCards .SkillCard.Expired {
  border-color: #ff747a;
  background-color: #feebec;
  color: #212127;
}
.CompetencyHistoryContainer .SkillContainer .SkillCards .SkillCard.Competent {
  border-color: #4ad571;
  background-color: #deffe7;
  color: #212127;
}
.CompetencyHistoryContainer .SkillContainer .SkillCards .SkillCard .SkillCardHeader {
  display: flex;
  margin-bottom: 1.5rem;
  justify-content: space-between;
  height: 2rem;
}
.CompetencyHistoryContainer .SkillContainer .SkillCards .SkillCard .SkillCardHeader .SkillCardHeaderText {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3em;
}
.CompetencyHistoryContainer .SkillContainer .SkillCards .SkillCard .SkillCardHeader .SkillCardHeaderIcon {
  /* Removes line-heights so that text fits tightly against the rendered space it resides within.  Use when tight vertical alignment is needed between adjacent items, or when container padding appears too great. */
  line-height: 0;
}
.CompetencyHistoryContainer .SkillContainer .SkillCards .SkillCard .SkillCardDescription {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6em;
}
.CompetencyHistoryContainer .SkillContainer .SkillCards .SkillCard .SkillCardDetail {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3em;
}
.CompetencyHistoryContainer .SkillContainer .SkillDefinitionBands {
  padding: 2rem;
}
.CompetencyHistoryContainer .SkillContainer .SkillDefinitionBands .SearchResultsGridComponent {
  margin: 0;
}
.CompetencyHistoryContainer .SkillContainer .SkillDefinitionBands .NotCompetent {
  background-color: #feebec;
  color: #212127;
  font-weight: 700;
}
.CompetencyHistoryContainer .SkillContainer .SkillDefinitionBands .Competent {
  background-color: #deffe7;
  color: #212127;
  font-weight: 700;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TabPanel {
  margin-top: 0;
  margin-bottom: 2rem;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard {
  display: flex;
  flex-direction: column;
  border: 0.1rem solid #a7a7a9;
  border-radius: 0.5rem;
  margin-bottom: 3rem;
  width: 100%;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader {
  display: flex;
  border-bottom: 0.1rem solid #e8e8e8;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader .TrainingAssessmentCardHeaderInfo {
  display: none;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader .TrainingAssessmentCardHeaderTitle {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.6em;
  padding: 1rem 1.5rem 1rem 1.5rem;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader .TrainingAssessmentCardHeaderWeighting {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 1rem 1.5rem;
  border-left: 0.1rem solid #e8e8e8;
  margin-left: auto;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader .TrainingAssessmentCardHeaderWeighting .TrainingAssessmentCardHeaderWeightingTitle {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1em;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader .TrainingAssessmentCardHeaderWeighting .TrainingAssessmentCardHeaderWeightingValue {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1em;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader.BelowTarget {
  background-color: #feebec;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader.NoData {
  background-color: #e8e8e8;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader.Inactive {
  background-color: #dededf;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader.BelowTarget .TrainingAssessmentCardHeaderInfo, .CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader.NoData .TrainingAssessmentCardHeaderInfo, .CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader.Inactive .TrainingAssessmentCardHeaderInfo {
  display: block;
  margin-left: auto;
  padding: 1.5rem 1.5rem 0 1.5rem;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader.BelowTarget .TrainingAssessmentCardHeaderWeighting, .CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader.NoData .TrainingAssessmentCardHeaderWeighting, .CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardHeader.Inactive .TrainingAssessmentCardHeaderWeighting {
  margin-left: 0;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardDetail {
  padding: 1.5rem;
  border-bottom: 0.1rem solid #e8e8e8;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardDetail .TrainingAssessmentCardNoData {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3em;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardDetail .TrainingAssessmentCardDetailData {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardDetail .TrainingAssessmentCardDetailData .TrainingAssessmentCardDetailDataItem {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardDetail .TrainingAssessmentCardDetailData .TrainingAssessmentCardDetailDataItem .TrainingAssessmentCardDetailDataItemHeader {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1em;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardDetail .TrainingAssessmentCardDetailData .TrainingAssessmentCardDetailDataItem .TrainingAssessmentCardDetailDataItemValue {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.3em;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardDetail .TrainingAssessmentCardDetailData .TrainingAssessmentCardDetailDataItem .TrainingAssessmentCardDetailDataItemValue.Bold {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3em;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardDetail .TrainingAssessmentCardDetailLinks {
  display: flex;
  gap: 1rem;
  margin-left: auto;
  padding-top: 1.5rem;
  flex-wrap: wrap;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardFooter {
  display: flex;
  padding: 2rem 1.5rem 1.5rem 1.5rem;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardFooter .TrainingAssessmentCardFooterLink {
  margin-left: auto;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .SkillInformation {
  padding-top: 2rem;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .SkillInformation .SectionHeader {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3em;
  margin-bottom: 0.5rem;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .SkillInformation .SectionDetail {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3em;
  margin-bottom: 2rem;
}
.CompetencyHistoryContainer .CompetencyHistoryTabContainer .SkillInformation .SectionButtons {
  padding-top: 1rem;
}
@media all and (min-width: 1025px) {
  .CompetencyHistoryContainer .SkillContainer .SkillHeader .SkillHeaderButtons {
    align-self: flex-end;
  }
  .CompetencyHistoryContainer .SkillContainer .SkillCards {
    flex-direction: row;
    justify-content: space-evenly;
  }
  .CompetencyHistoryContainer .SkillContainer .SkillCards .SkillCard {
    flex: 1 1 0;
  }
  .CompetencyHistoryContainer .CompetencyHistoryTabContainer .TrainingAssessmentHistory .TrainingAssessmentCard .TrainingAssessmentCardDetail {
    display: flex;
    flex: 1 1 50%;
    gap: 0.5rem;
  }
}
/* #endregion*/
/* #region Quizzes */
.QuizzesContainer .QuizList .QuizCard {
  padding: 2rem;
  border: 0.1rem solid #e8e8e8;
  border-radius: 0.5rem;
}
.QuizzesContainer .QuizList .QuizCard .QuizCardHeader {
  display: flex;
  gap: 1rem;
}
.QuizzesContainer .QuizList .QuizCard .QuizCardHeader .QuizCardHeaderIcon {
  width: 3rem;
  height: 3rem;
}
.QuizzesContainer .QuizList .QuizCard .QuizCardHeader .QuizCardHeaderIcon.SelfAssesment {
  background-image: url(/Images/Icons/SelfAssessment.svg);
}
.QuizzesContainer .QuizList .QuizCard .QuizCardHeader .QuizCardHeaderIcon.MultipleChoiceAssessment {
  background-image: url(/Images/Icons/MultipleChoiceAssessment.svg);
}
.QuizzesContainer .QuizList .QuizCard .QuizCardHeader .QuizCardHeaderIcon.PointClickAssessment {
  background-image: url(/Images/Icons/PointClickAssessment.svg);
}
.QuizzesContainer .QuizList .QuizCard .QuizCardHeader .QuizCardHeaderIcon.ShortAnswerAssessment {
  background-image: url(/Images/Icons/ShortAnswerAssessment.svg);
}
.QuizzesContainer .QuizList .QuizCard .QuizCardHeader .QuizCardHeaderIcon.ProjectSubmission {
  background-image: url(/Images/Icons/ProjectSubmission.svg);
}
.QuizzesContainer .QuizList .QuizCard .QuizCardHeader .QuizCardHeaderText {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.3em;
}
.QuizzesContainer .QuizList .QuizCard .QuizCardDescription {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3em;
  padding-top: 1rem;
}
.QuizzesContainer .QuizList .QuizCard .QuizCardPercentagesContainer {
  padding-bottom: 1rem;
  padding-top: 1rem;
  border-bottom: 0.1rem solid #e8e8e8;
  display: flex;
  flex: 1 1 0;
  gap: 2rem;
  justify-content: space-between;
}
.QuizzesContainer .QuizList .QuizCard .QuizCardPercentagesContainer .QuizCardPercentages {
  display: flex;
  flex-direction: column;
  padding-bottom: 1.5rem;
}
.QuizzesContainer .QuizList .QuizCard .QuizCardPercentagesContainer .QuizCardPercentages .QuizCardPercentagesHeader {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1em;
  padding-bottom: 0.5rem;
}
.QuizzesContainer .QuizList .QuizCard .QuizCardPercentagesContainer .QuizCardPercentages .QuizCardPercentagesValue {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3em;
}
.QuizzesContainer .QuizList .QuizCard .QuizCardButton {
  display: flex;
  gap: 1.5rem;
  padding-top: 1.5rem;
}
.QuizzesContainer .QuizList .QuizCard .QuizCardButton .LastCompleted {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.3em;
  padding-top: 1.5rem;
}

@media all and (min-width: 1025px) {
  .QuizzesContainer .QuizList {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 0;
    gap: 1.5rem;
  }
}
/* #endregion */