:root{--color-primary: #455465;--color-secondary: #007ab8;--color-tertiary: #1ea4a9;--color-state: #0074be;--color-state-hover: #006ab4;--color-state-focus: #006ab4;--color-state-active: #0059a3;--color-state-highlight: #f6f9d7;--color-state-highlight-neutral: var(--color-neutral-3);--color-state-disabled: var(--color-neutral-5);--color-neutral-1: #fff;--color-neutral-2: #fafafa;--color-neutral-3: #f7f7f7;--color-neutral-4: #e6e4e4;--color-neutral-5: #c7c7c7;--color-neutral-6: #767676;--color-neutral-7: #262626;--color-background: var(--color-neutral-1);--color-border: var(--color-neutral-5);--color-text: var(--color-neutral-7);--color-text-disabled: var(--color-neutral-5);--color-text-hint: var(--color-neutral-6);--link-color: var(--color-state);--link-color-hover: var(--color-state-hover);--nav-bg-color: #fafafa;--nav-text-color: var(--color-text);--nav-selected-color: var(--color-state);--nav-border-colour: rgba(128, 128, 128, 0.2);--nav-width: 15rem;--nav-collapsed-width: 5rem;--nav-button-size: 1.25rem;--nav-logo-width: 7.5rem;--nav-logo-height: 7.5rem;--nav-logomark-width: 2.5rem;--nav-logomark-height: 2.5rem;--footer-bg-color: #fff;--footer-text-color: var(--color-text);--footer-text-color-hover: var(--footer-text-color);--btn-accent-color: var(--color-state);--btn-accent-color-active: var(--color-state-active);--btn-accent-color-hover: var(--color-state-hover);--btn-accent-color-disabled: var(--color-state-disabled);--page-content-padding-desktop: calc(var(--gap-base) * 8)}.tui-theme_inspire-navItem{--tui-theme_inspire-navItem-height: 2.75rem;--tui-theme_inspire-navItem-indicator-height: 2rem;--tui-theme_inspire-navItem-top-level-nav-item-padding: 10px;--tui-theme_inspire-navItem-nav-item-padding: 6px;display:flex;flex-grow:1;flex-wrap:wrap;height:var(--tui-theme_inspire-navItem-height);padding-top:calc(var(--gap-base) * 1);color:var(--nav-tab-text-color)}.tui-theme_inspire-navItem--navExpanded{height:100%}.tui-theme_inspire-navItem__icon{width:1.2em;height:1.2em;margin:auto}.tui-theme_inspire-navItem__icon--navExpanded{margin:calc(var(--gap-base) * 3) auto auto calc(var(--gap-base) * 3)}.tui-theme_inspire-navItem .tui-theme_inspire-navItem{padding-top:0}.tui-theme_inspire-navItem--selected{color:var(--nav-selected-color)}.tui-theme_inspire-navItem--selected:before{height:var(--tui-theme_inspire-navItem-indicator-height);margin-top:calc(var(--gap-base) * 1);border-right:calc(var(--gap-base) * 1) solid var(--nav-selected-color);border-top-right-radius:calc(var(--gap-base) * 1);border-bottom-right-radius:calc(var(--gap-base) * 1);content:""}.tui-theme_inspire-navItem .tui-theme_inspire-navItem--selected:before{margin-top:0}.tui-theme_inspire-navItem--link{flex-wrap:nowrap}.tui-theme_inspire-navItem__heading{display:flex;flex-grow:1;align-items:flex-start;padding:0;background-color:inherit;border:none;border-radius:var(--btn-radius)}.tui-theme_inspire-navItem__heading--childSelected{color:var(--nav-selected-color)}.tui-theme_inspire-navItem__heading--depth-0{margin-left:calc(var(--gap-base) * 5);font-weight:600}.tui-theme_inspire-navItem__heading--depth-0.tui-theme_inspire-navItem__heading--navExpanded{margin-left:calc(var(--gap-base) * 3)}.tui-theme_inspire-navItem__heading--depth-0.tui-theme_inspire-navItem__heading--selected{margin-left:calc(var(--gap-base) * 4)}.tui-theme_inspire-navItem__heading--depth-0.tui-theme_inspire-navItem__heading--selected.tui-theme_inspire-navItem__heading--navExpanded{margin-left:calc(var(--gap-base) * 2)}.tui-theme_inspire-navItem__heading--depth-0 .tui-theme_inspire-navItem__headingAction{margin:calc(var(--gap-base) * 2)}.tui-theme_inspire-navItem__heading--depth-1{margin-left:calc(var(--gap-base) * 10);font-weight:400}.tui-theme_inspire-navItem__heading--depth-1.tui-theme_inspire-navItem__heading--selected{margin-left:calc(var(--gap-base) * 9)}.tui-theme_inspire-navItem__heading--depth-2{margin-left:calc(var(--gap-base) * 13)}.tui-theme_inspire-navItem__heading--depth-2.tui-theme_inspire-navItem__heading--selected{margin-left:calc(var(--gap-base) * 12)}.tui-theme_inspire-navItem__heading--link{color:var(--nav-tab-text-color)}.tui-theme_inspire-navItem__heading--link:hover,.tui-theme_inspire-navItem__heading--link:focus{color:var(--nav-tab-text-color);text-decoration:none}.tui-theme_inspire-navItem__heading--link.tui-theme_inspire-navItem__heading--selected{color:var(--nav-selected-color)}@media (hover:hover){.tui-theme_inspire-navItem__heading:hover{background-color:color-mix(in srgb, var(--nav-tab-text-color) 10%, transparent)}}.tui-theme_inspire-navItem__heading:focus-visible{outline:2px solid var(--nav-tab-text-color)}.tui-theme_inspire-navItem__headingText{flex-grow:1;margin:auto;padding:var(--tui-theme_inspire-navItem-nav-item-padding) calc(var(--gap-base) * 1) var(--tui-theme_inspire-navItem-nav-item-padding) calc(var(--gap-base) * 3);text-align:left;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}.tui-theme_inspire-navItem__headingText--depth-0{padding:var(--tui-theme_inspire-navItem-top-level-nav-item-padding) calc(var(--gap-base) * 1) var(--tui-theme_inspire-navItem-top-level-nav-item-padding) calc(var(--gap-base) * 3)}.tui-theme_inspire-navItem__headingAction{flex-basis:1.5rem;flex-shrink:0;height:1.5rem;margin:calc(var(--gap-base) * 1) calc(var(--gap-base) * 2);padding:var(--tui-theme_inspire-navItem-nav-item-padding);color:var(--nav-tab-text-color)}.tui-theme_inspire-navItem__children{flex-basis:100%;margin-bottom:calc(var(--gap-base) * 2);margin-left:0;list-style:none}.tui-theme_inspire-navigation__toggle{position:absolute;z-index:1;width:var(--nav-button-size);height:var(--nav-button-size);margin:calc(var(--gap-base) * 4);color:var(--color-text)}.tui-theme_inspire-navigation__toggle--overlay{display:block}.tui-theme_inspire-navigation__toggle--expand{display:none}@media (min-width:992px){.tui-theme_inspire-navigation__toggle{left:var(--nav-collapsed-width)}.tui-theme_inspire-navigation__toggle--overlay{display:none}.tui-theme_inspire-navigation__toggle--expand{position:fixed;display:block;margin:calc(var(--gap-base) * 1);background-color:var(--color-neutral-3);opacity:0;transition:opacity var(--transition-button-duration) var(--transition-button-function) 1s}.tui-theme_inspire-navigation__toggle--expand:hover,.tui-theme_inspire-navigation__toggle--expand:focus,.tui-theme_inspire-navigation__toggle--expand:has(~ .tui-theme_inspire-navigation>.tui-theme_inspire-navigation__nav:hover),.tui-theme_inspire-navigation__toggle--expand:has(~ .tui-theme_inspire-navigation>.tui-theme_inspire-navigation__nav:focus-within){opacity:1;transition-delay:0s}.tui-theme_inspire-navigation__toggle--navExpanded{left:var(--nav-width)}.tui-theme_inspire-navigation__toggle-icon{--rotate-r: rotateY(0deg);--rotate-l: rotateY(180deg);transform:var(--rotate-r);transition-duration:0.5s}.dir-rtl .tui-theme_inspire-navigation__toggle-icon{transform:var(--rotate-l)}.tui-theme_inspire-navigation__toggle-icon--expanded{transform:var(--rotate-l)}.dir-rtl .tui-theme_inspire-navigation__toggle-icon--expanded{transform:var(--rotate-r)}}.tui-theme_inspire-navigation__toggle--navHidden{left:0}.tui-theme_inspire-navigation{position:relative;z-index:var(--zindex-navbar);display:none;flex-direction:column;overflow:visible}@media (min-width:992px){.tui-theme_inspire-navigation{display:flex;width:var(--nav-collapsed-width)}}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__nav{position:fixed;display:flex;flex-direction:column;width:var(--nav-collapsed-width);height:100%;background-color:var(--nav-bg-color);border-right:1px inset var(--nav-border-colour)}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__heading{margin:auto;border-bottom:1px inset var(--nav-border-colour)}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__headingLogo{max-width:var(--nav-logomark-width);max-height:var(--nav-logomark-height);margin:calc(var(--gap-base) * 8) 0}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__collapse{float:right;width:var(--nav-button-size);height:var(--nav-button-size);margin-top:calc(var(--gap-base) * 4);margin-right:calc(var(--gap-base) * -3);color:var(--nav-tab-text-color)}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__collapse:focus-visible{outline:2px solid var(--nav-tab-text-color)}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__items{display:flex;flex-direction:column;gap:calc(var(--gap-base) * 1);height:100%;margin:0;padding:calc(var(--gap-base) * 5) calc(var(--gap-base) * 5) calc(var(--gap-base) * 5) 0;overflow-y:auto;list-style:none}.tui-theme_inspire-navigation--overlaid{position:fixed;z-index:var(--zindex-nav-overlay);display:flex;width:var(--nav-width)}@media (min-width:992px){.tui-theme_inspire-navigation--overlaid{position:relative;width:var(--nav-collapsed-width)}}.tui-theme_inspire-navigation--overlaid .tui-theme_inspire-navigation__nav{width:var(--nav-width)}.tui-theme_inspire-navigation--overlaid .tui-theme_inspire-navigation__heading{margin:0 calc(var(--gap-base) * 6)}.tui-theme_inspire-navigation--overlaid .tui-theme_inspire-navigation__headingLogo{max-width:var(--nav-logo-width);max-height:var(--nav-logo-height)}.tui-theme_inspire-navigation--overlaid .tui-theme_inspire-navigation__items{padding:calc(var(--gap-base) * 5) calc(var(--gap-base) * 3) calc(var(--gap-base) * 5) 0}.tui-theme_inspire-navigation--desktopExpanded{display:none}@media (min-width:992px){.tui-theme_inspire-navigation--desktopExpanded{display:flex;width:var(--nav-width)}.tui-theme_inspire-navigation--desktopExpanded .tui-theme_inspire-navigation__nav{width:var(--nav-width)}.tui-theme_inspire-navigation--desktopExpanded .tui-theme_inspire-navigation__heading{margin:0 calc(var(--gap-base) * 6)}.tui-theme_inspire-navigation--desktopExpanded .tui-theme_inspire-navigation__headingLogo{max-width:var(--nav-logo-width);max-height:var(--nav-logo-height)}.tui-theme_inspire-navigation--desktopExpanded .tui-theme_inspire-navigation__items{padding:calc(var(--gap-base) * 5) calc(var(--gap-base) * 3) calc(var(--gap-base) * 5) 0}}.tui-theme_inspire-navigation--hidden{display:none}.tui-settingsFormBrand__testEmailInfoButton{align-self:center}.tui-themeSettings__content{margin-top:var(--gap-8)}.tui-themeSettings__forms>*+*{margin-top:var(--gap-8)}:root{--color-state: var(--color-primary);--color-state-hover: var(--color-secondary);--color-state-focus: var(--color-secondary);--color-state-active: var(--color-secondary);--color-state-highlight: #f6f9d7;--color-state-highlight-neutral: var(--color-neutral-3);--color-state-disabled: var(--color-neutral-6);--color-border: var(--color-neutral-5);--color-text: #000000;--color-text-disabled: var(--color-neutral-5);--color-text-hint: var(--color-neutral-6);--color-neutral-1: #fff;--color-neutral-7: #262626;--btn-accent-color: var(--color-state);--btn-accent-color-active: var(--color-state-active);--btn-accent-color-focus: var(--color-state-focus);--btn-accent-color-disabled: var(--color-state-disabled);--btn-prim-accent-color: var(--color-state);--btn-prim-accent-color-active: var(--color-state-active);--btn-prim-accent-color-focus: var(--color-state-focus);--btn-prim-accent-color-disabled: var(--color-state-disabled);--border-weight: thin;--btn-bg-color-active: var(--btn-bg-color-hover);--btn-bg-color-disabled: var(--color-neutral-3);--btn-bg-color-focus: var(--btn-bg-color-hover);--btn-text-color-active: var(--btn-text-color-hover);--btn-text-color-disabled: var(--color-neutral-6);--btn-text-color-focus: var(--btn-text-color-hover);--btn-border-color-active-focus: var(--btn-text-color-hover);--btn-border-color-disabled: var(--btn-bg-color-disabled);--btn-prim-bg-color-active: var(--btn-prim-bg-color-hover);--btn-prim-bg-color-disabled: var(--btn-bg-color-disabled);--btn-prim-bg-color-focus: var(--btn-prim-bg-color-hover);--btn-prim-text-color-active: var(--btn-prim-text-color-hover);--btn-prim-text-color-focus: var(--btn-prim-text-color-hover);--btn-prim-border-color-active-focus: var(--btn-prim-border-color);--btn-prim-border-color-disabled: var(--btn-bg-color-disabled);--tabs-bg-color-disabled: var(--color-neutral-3);--tabs-bg-color-focus: var(--color-neutral-3);--tabs-text-color-disabled: var(--color-state-disabled);--tabs-text-color-focus: var(--color-state-hover);--tabs-text-color-selected: var(--tabs-text-color-active);--tabs-border-color-disabled: var(--color-neutral-4);--tabs-border-radius-active: 0;--tabs-selected-bar-color: var(--tabs-border-color-selected);--tabs-border-radius-active: 0;--user-menu-dropdown-border-colour: transparent;--side-panel-heading-font-size: var(--h4-font-size);--side-panel-heading-font: var(--h4-font);--side-panel-inner-background: var(--color-neutral-3);--color-prompt-info: var(--link-color);--nav-quick-item-text-color: var(--link-color);--nav-quick-item-text-color-focus: var(--link-color-hover);--progress-border-color: var(--progress-value-bg-color)}:root{--font-family: var(--base-font);--font-family-body-xl: var(--font-family);--font-family-body-lg: var(--font-family);--font-family-body: var(--font-family);--font-family-body-sm: var(--font-family);--font-family-body-xs: var(--font-family);--font-body-size: var(--base-font-size);--font-body-line-height: calc(var(--base-font-size) * var(--base-line-height));--font-family-heading: var(--font-family);--font-h1-size: var(--h1-font-size-mobile);--font-h1-family: var(--h1-font);--font-h1-weight: var(--h1-font-weight);--font-h1-line-height: calc(var(--font-h1-size) * var(--h1-line-height));--font-h2-size: var(--h2-font-size-mobile);--font-h2-family: var(--h2-font);--font-h2-weight: var(--h2-font-weight);--font-h2-line-height: calc(var(--font-h2-size) * var(--h2-line-height));--font-h3-size: var(--h3-font-size-mobile);--font-h3-family: var(--h3-font);--font-h3-weight: var(--h3-font-weight);--font-h3-line-height: calc(var(--font-h3-size) * var(--h3-line-height));--font-h4-size: var(--h4-font-size-mobile);--font-h4-family: var(--h4-font);--font-h4-weight: var(--h4-font-weight);--font-h4-line-height: calc(var(--font-h4-size) * var(--h4-line-height));--font-h5-size: var(--h5-font-size-mobile);--font-h5-family: var(--h5-font);--font-h5-weight: var(--h5-font-weight);--font-h5-line-height: calc(var(--font-h5-size) * var(--h5-line-height));--font-h6-size: var(--h6-font-size-mobile);--font-h6-family: var(--h6-font);--font-h6-weight: var(--h6-font-weight);--font-h6-line-height: calc(var(--font-h6-size) * var(--h6-line-height));--font-family-display: var(--font-family)}@media only screen and (min-width:768px){:root{--font-h1-size: var(--h1-font-size-tablet);--font-h2-size: var(--h2-font-size-tablet);--font-h3-size: var(--h3-font-size-tablet);--font-h4-size: var(--h4-font-size-tablet);--font-h5-size: var(--h5-font-size-tablet);--font-h6-size: var(--h6-font-size-tablet)}}@media only screen and (min-width:1024px){:root{--font-h1-size: var(--h1-font-size);--font-h2-size: var(--h2-font-size);--font-h3-size: var(--h3-font-size);--font-h4-size: var(--h4-font-size);--font-h5-size: var(--h5-font-size);--font-h6-size: var(--h6-font-size)}}button[class*="navigationPill"]{color:var(--btn-text-color);background-color:var(--btn-bg-color);font-size:var(--btn-font-size);border:solid var(--btn-border-width) var(--btn-border-color)}button[class*="navigationPill"]:hover{color:var(--btn-text-color-hover);background-color:var(--btn-bg-color-hover);border-color:var(--btn-border-color-hover)}button[class*="navigationPill"]:active{color:var(--btn-text-color-active);background-color:var(--btn-bg-color-active);border-color:var(--btn-border-color-active)}button[class*="navigationPill"]:focus{color:var(--btn-text-color-hover);background-color:var(--btn-bg-color-hover);border-color:var(--btn-border-color-hover)}button[class*="navigationPill"][class*="--selected"]{color:var(--btn-text-color-hover);background-color:var(--btn-bg-color-hover);border-color:var(--btn-border-color-hover)}button[class*="navigationPill"][disabled]{color:var(--btn-text-color-disabled);background-color:var(--btn-bg-color-disabled);border-color:var(--btn-border-color-disabled)}.heading--hasSubSection>.tui-collapsible__header{margin-bottom:var(--gap-4)}.heading--hasSubSection>.tui-collapsible__content{display:flex;flex-direction:column;margin-left:var(--gap-4)}.heading--hasSubSection>.tui-collapsible__content .tui-collapsible.sub-heading__header:not(:last-of-type){margin-bottom:var(--gap-4)}h1,.h1{margin-block:var(--h1-margin)}h2,.h2{margin-block:var(--h2-margin)}h3,.h3{margin-block:var(--h3-margin)}h4,.h4{margin-block:var(--h4-margin)}h5,.h5{margin-block:var(--h5-margin)}h6,.h6{margin-block:var(--h6-margin);text-transform:var(--h6-text-transform)}#view-program-content .tui-loader .totara_program__assignments:has(.totara_program__assignments__toolbar){margin-top:var(--gap-4)}#view-program-content .tui-loader.tui-notifications .tui-notificationTable__actions{margin-top:var(--gap-4)}.tui-formImageUpload{color:var(--form-input-text-color);font-size:var(--form-input-font-size);line-height:1;background:var(--form-input-bg-color)}.tui-formImageUpload__actions{display:flex;padding:var(--gap-2);background:var(--color-neutral-3);border-color:var(--form-input-border-color);border-top:var(--form-input-border-size) solid;border-right:var(--form-input-border-size) solid;border-left:var(--form-input-border-size) solid}.tui-formImageUpload__deleteButton{margin-left:auto}.tui-formImageUpload__filearea{padding:var(--gap-2);border:var(--form-input-border-size) solid;border-color:var(--form-input-border-color)}.tui-formImageUpload--highlight .tui-formImageUpload__filearea{background:var(--form-input-bg-color-focus);border-color:var(--form-input-border-color-focus);outline:none;box-shadow:var(--form-input-shadow-focus)}.tui-formImageUpload--isError .tui-formImageUpload__filearea{border-color:var(--form-input-border-color-invalid);box-shadow:var(--form-input-shadow-invalid)}.tui-formImageUpload__display .tui-responsiveImage{max-height:15.625rem}.tui-formImageUpload__progress{padding:var(--gap-2)}.tui-formInput{display:block;flex-grow:1;box-sizing:border-box;width:100%;min-width:0;height:var(--form-input-height);padding:calc((var(--form-input-height) - var(--form-input-line-height) - (var(--form-input-border-size) * 2)) / 2) var(--gap-3);color:var(--form-input-text-color);font-size:var(--form-input-font-size);line-height:var(--form-input-line-height);background:var(--form-input-bg-color);border:var(--form-input-border-size) solid var(--form-input-border-color);border-radius:var(--form-input-border-radius)}.tui-formInput[type="search"]{border-radius:var(--form-input-border-radius);-webkit-appearance:none;appearance:none}.tui-formInput--charLength-2{max-width:calc(2 * var(--form-input-font-size))}.tui-formInput--charLength-3{max-width:calc(3 * var(--form-input-font-size))}.tui-formInput--charLength-4{max-width:calc(4 * var(--form-input-font-size))}.tui-formInput--charLength-5{max-width:calc(5 * var(--form-input-font-size))}.tui-formInput--charLength-10{max-width:calc(10 * var(--form-input-font-size))}.tui-formInput--charLength-15{max-width:calc(15 * var(--form-input-font-size))}.tui-formInput--charLength-20{max-width:calc(20 * var(--form-input-font-size))}.tui-formInput--charLength-25{max-width:calc(25 * var(--form-input-font-size))}.tui-formInput--charLength-30{max-width:calc(30 * var(--form-input-font-size))}.tui-formInput--charLength-50{max-width:calc(50 * var(--form-input-font-size))}.tui-formInput--charLength-75{max-width:calc(75 * var(--form-input-font-size))}.tui-formInput--charLength-100{max-width:calc(100 * var(--form-input-font-size))}.tui-form--inputWidth-limited .tui-formInput:not(.tui-input--customSize){max-width:var(--form-input-limited-width)}.tui-form--inputWidth-limited .tui-inputSet--split .tui-formInput:not(.tui-input--customSize){max-width:none}.tui-formInput::placeholder{color:var(--form-input-text-placeholder-color)}.tui-contextInvalid .tui-formInput{border-color:var(--form-input-border-color-invalid);box-shadow:var(--form-input-shadow-invalid)}.tui-formInput--size-large{height:var(--form-input-height-large);padding:calc((var(--form-input-height-large) - 1em - (var(--form-input-border-size) * 2)) / 2);font-size:var(--form-input-font-size-lg)}.tui-formInput:focus{background:var(--form-input-bg-color-focus);border:var(--form-input-border-size) solid var(--form-input-border-color-focus);outline:none;box-shadow:var(--form-input-shadow-focus);outline:2px solid var(--color-state-focus);outline-offset:var(--focus-outline-offset)}.tui-contextInvalid .tui-formInput:focus{background:var(--form-input-bg-color-invalid-focus);border-color:var(--form-input-border-color-invalid);outline-color:var(--form-input-border-color-invalid);box-shadow:var(--form-input-shadow-invalid-focus)}.tui-formInput--preIcon{padding-left:var(--gap-8)}.tui-formInput--postIcon{padding-right:var(--gap-8)}.tui-formInput[readonly]{color:var(--form-input-text-color);background:var(--form-input-bg-color);border-color:var(--form-input-border-color)}.tui-formInput[readonly]::placeholder{color:var(--form-input-text-placeholder-color)}.tui-formInput[disabled]{color:var(--form-input-text-color-disabled);background:var(--form-input-bg-color-disabled);border-color:var(--form-input-border-color-disabled)}.tui-formInput[disabled]::placeholder{color:var(--form-input-text-color-disabled)}.tui-formInput--transparent,.tui-formInput--transparent:focus,.tui-formInput--transparent:focus-visible,.tui-formInput--transparent[readonly],.tui-formInput--transparent[disabled],.tui-contextInvalid .tui-formInput--transparent,.tui-contextInvalid .tui-formInput--transparent:focus{background-color:transparent;border:none;border-radius:0;outline:none;box-shadow:none}.tui-inputColor{position:relative}.tui-inputColor--charLength-2{max-width:calc(2 * var(--form-input-font-size))}.tui-inputColor--charLength-3{max-width:calc(3 * var(--form-input-font-size))}.tui-inputColor--charLength-4{max-width:calc(4 * var(--form-input-font-size))}.tui-inputColor--charLength-5{max-width:calc(5 * var(--form-input-font-size))}.tui-inputColor--charLength-10{max-width:calc(10 * var(--form-input-font-size))}.tui-inputColor--charLength-15{max-width:calc(15 * var(--form-input-font-size))}.tui-inputColor--charLength-20{max-width:calc(20 * var(--form-input-font-size))}.tui-inputColor--charLength-25{max-width:calc(25 * var(--form-input-font-size))}.tui-inputColor--charLength-30{max-width:calc(30 * var(--form-input-font-size))}.tui-inputColor--charLength-50{max-width:calc(50 * var(--form-input-font-size))}.tui-inputColor--charLength-75{max-width:calc(75 * var(--form-input-font-size))}.tui-inputColor--charLength-100{max-width:calc(100 * var(--form-input-font-size))}.tui-form--inputWidth-limited .tui-inputColor:not(.tui-input--customSize){max-width:var(--form-input-limited-width)}.tui-form--inputWidth-limited .tui-inputSet--split .tui-inputColor:not(.tui-input--customSize){max-width:none}.tui-inputColor .tui-inputColor__picker[type="color"]{position:absolute;width:calc(var(--gap-8) + var(--gap-2));opacity:0}.tui-inputColor .tui-inputColor__picker[type="color"][disabled]{cursor:not-allowed}.tui-inputColor__colorBlock{position:absolute;top:calc(0.25rem + var(--form-input-border-size));left:calc(0.25rem + var(--form-input-border-size));width:var(--gap-8);height:calc(100% - 0.5rem - var(--form-input-border-size) * 2);border-radius:var(--border-radius-small)}.tui-inputColor__colorBlock--disabled{cursor:not-allowed}.tui-inputColor .tui-inputColor__input[type="text"]{padding-left:calc(var(--gap-8) + 0.5rem + var( --form-input-border-size ) + var(--gap-1))}.backup-restore__section>*+*{margin-top:var(--gap-4)}.backup-restore__section a{margin-right:var(--gap-2)}.kineo-theme-settings__base-theme-selector{margin:var(--gap-8) 0}.kineo-theme-settings__base-theme-selector .tui-toggleBtn[aria-checked="false"],.kineo-theme-settings__base-theme-selector .tui-toggleBtn[aria-checked="false"]:visited{color:var(--btn-text-color);background-color:var(--btn-bg-color);border-color:var(--btn-border-color);transition:all 0.3s ease-in-out}.kineo-theme-settings__base-theme-selector .tui-toggleBtn[aria-checked="false"]:active:focus{color:var(--btn-accent-color-active);background-color:var(--btn-bg-color-active);border-color:var(--btn-border-color-active)}.kineo-theme-settings__base-theme-selector .tui-toggleBtn[aria-checked="false"]:hover,.kineo-theme-settings__base-theme-selector .tui-toggleBtn[aria-checked="false"]:focus{color:var(--btn-text-color-hover);background-color:var(--btn-bg-color-hover);border-color:var(--btn-border-color-hover)}.kineo-theme-settings__base-theme-selector .tui-toggleBtn[aria-checked="false"].disabled,.kineo-theme-settings__base-theme-selector .tui-toggleBtn[aria-checked="false"].disabled:active:focus,.kineo-theme-settings__base-theme-selector .tui-toggleBtn[aria-checked="false"].disabled:hover,.kineo-theme-settings__base-theme-selector .tui-toggleBtn[aria-checked="false"].disabled:focus,.kineo-theme-settings__base-theme-selector .tui-toggleBtn[aria-checked="false"][disabled],.kineo-theme-settings__base-theme-selector .tui-toggleBtn[aria-checked="false"][disabled]:active:focus,.kineo-theme-settings__base-theme-selector .tui-toggleBtn[aria-checked="false"][disabled]:hover,.kineo-theme-settings__base-theme-selector .tui-toggleBtn[aria-checked="false"][disabled]:focus{color:var(--btn-text-color-disabled);background-color:var(--btn-bg-color-disabled);border-color:var(--btn-border-color-disabled)}.tui-themeSettings__content{margin-top:var(--gap-8)}.tui-themeSettings__forms>*+*{margin-top:var(--gap-8)}.tui-themeSettings .settings-tab-description{margin-bottom:var(--gap-8);font-weight:bold}.tui-themeSettings .tui-form--horizontal .tui-formRow:not(.tui-formRow--vertical)>.tui-formRow__inner>.tui-formRow__action{margin-top:var(--gap-6)}.tui-themeTenants__content{margin-top:var(--gap-8)}.tui-themeTenants__section+.tui-themeTenants__section{margin-top:var(--gap-12)}.tui-themeTenants__section>*+*{margin-top:var(--gap-4)}:root{ --color-black: #222222; --color-white: #ffffff; --color-primary: #0451E4; --color-secondary: #3C3C3C; --color-tertiary: #DCE7FC; --color-accent-3: #DCE7FC; --color-accent-4: #000000; --color-neutral-2: #fafafa; --color-neutral-3: #E6E6E6; --color-neutral-4: #E6E6E6; --color-neutral-5: #AAAAAA; --color-neutral-6: #767676; --header-notifications-show: true; --header-notifications-icon-color: var(--color-black); --header-notifications-count-background-color: var(--color-white); --header-notifications-count-color: var(--color-primary); --header-messages-show: true; --header-messages-icon-color: var(--color-black); --header-messages-count-background-color: var(--color-white); --header-messages-count-color: var(--color-primary); --site-logo-size: large; --page-background-size: initial; --page-background-repeat: no-repeat; --page-background-position: top-right; --page-background-attachment: true; --show-login-background-image: false; --enable-help-link: false; --enable-help-link-as-icon-or-text: icon; --help-icon: info; --progress-value-bg-color: var(--color-primary); --progress-value-text-color: var(--color-white); --progress-container-text-color: #f5f5f5; --progress-container-bar-shadow: true; --progress-bar-border-radius: 4px; --progress-bar-height: 20px; --progress-bar-border-color: var(--progress-value-bg-color); --progress-container-bg-color: var(--progress-container-text-color); --email-accent-color: var(--color-primary); --email-body-margin: 10; --btn-text-color: var(--color-white); --btn-text-color-hover: var(--color-primary); --btn-bg-color: var(--color-primary); --btn-bg-color-hover: var(--color-white); --btn-border-color: var(--color-primary); --btn-border-color-hover: var(--color-primary); --btn-radius: 6px; --btn-border-width: 1px; --btn-text-transform: none; --btn-font-size: var(--base-font-size); --btn-font-weight: normal; --btn-padding: 6px 12px; --btn-input-group-min-height: auto; --btn-prim-text-color: var(--btn-text-color); --btn-prim-text-color-hover: #FFFFFF; --btn-prim-bg-color: #0451E4; --btn-prim-bg-color-hover: #0340B4; --btn-prim-border-color: #0451E4; --btn-prim-border-color-hover: #0340B4; --btn-prim-radius: var(--btn-radius); --btn-prim-border-width: var(--btn-border-width); --btn-prim-text-transform: var(--btn-text-transform); --btn-prim-font-size: var(--btn-font-size); --btn-prim-font-weight: var(--btn-font-weight); --btn-prim-padding: var(--btn-padding); --btn-secondary-text-color: var(--btn-bg-color); --btn-secondary-text-color-hover: var(--btn-text-color); --btn-secondary-bg-color: var(--btn-text-color); --btn-secondary-bg-color-hover: var(--btn-bg-color); --btn-secondary-border-color: var(--btn-bg-color); --btn-secondary-border-color-hover: var(--btn-bg-color); --btn-secondary-radius: var(--btn-radius); --btn-secondary-border-width: var(--btn-border-width); --btn-secondary-text-transform: var(--btn-text-transform); --btn-secondary-font-size: var(--btn-font-size); --btn-secondary-font-weight: var(--btn-font-weight); --btn-secondary-padding: var(--btn-padding); --table-head-background-color: transparent; --table-head-color: var(--color-text); --table-header-font-size: var(--base-font-size); --table-header-font-weight: bold; --table-header-text-transform: uppercase; --table-body-background-color: transparent; --table-stripe-even-background-color: transparent; --table-cell-background-color-even-hover: var(--color-neutral-4); --table-cell-color-even: var(--color-text); --table-stripe-odd-background-color: var(--table-stripe-even-background-color); --table-cell-background-color-odd-hover: var(--table-cell-background-color-even-hover); --table-cell-color-odd: var(--table-cell-color-even); --table-border-color: var(--color-border); --table-link-color: var(--link-color); --table-link-color-hover: var(--link-color-hover); --table-border-width: var(--border-weight); --table-cell-font-size: var(--base-font-size); --table-heading-padding: 8px; --table-body-padding: 8px; --table-body-font-weight: normal; --table-header-border-width: var(--table-border-width); --breadcrumb-container-background-color: transparent; --breadcrumb-text-color: var(--link-color); --breadcrumb-link-color: var(--link-color); --breadcrumb-link-hover-color: var(--breadcrumb-link-color); --breadcrumb-separator-color: var(--link-color); --breadcrumb-text-transform: none; --breadcrumb-font-weight: normal; --breadcrumb-font-size: var(--base-font-size); --hide-breadcrumb: false; --hide-breadcrumb-gap: false; --tabs-bg-color: transparent; --tabs-border-color: var(--color-neutral-5); --tabs-text-color: var(--color-text); --tabs-bg-color-hover: var(--tabs-bg-color-focus); --tabs-border-color-hover: var(--tabs-border-color); --tabs-text-color-hover: #0451E4; --tabs-border-radius: 4px 4px 0 0; --tabs-bg-color-selected: var(--color-neutral-1); --tabs-border-color-selected: var(--color-neutral-1); --tabs-text-color-active: #000000; --tabs-bg-color-active-hover: var(--tabs-bg-color-selected); --tabs-border-color-active-hover: var(--tabs-border-color-selected); --tabs-text-color-active-hover: #000000; --tabs-font-size: var(--base-font-size); --tabs-font-weight: normal; --tabs-text-transform: none; --calendar-body-background-color: transparent; --calendar-border-color: var(--color-neutral-5); --calendar-text-color: var(--color-text); --calendar-font-size: var(--base-font-size); --calendar-header-text-color: var(--color-text); --calendar-header-background-color: transparent; --calendar-current-day-color: var(--color-neutral-6); --calendar-event-background-color: transparent; --calendar-event-link-color: var(--link-color); --calendar-event-border-color: var(--color-primary); --mini-calendar-current-day-link-color: var(--link-color); --mini-calendar-body-background-color: var(--calendar-body-background-color); --mini-calendar-week-day-header-border-bottom-color: var(--color-neutral-6); --mini-calendar-event-background-color: var(--color-primary); --mini-calendar-event-link-color: var(--color-white); --base-font: Barlow, Arial, Helvetica, sans-serif; --heading-font: Barlow, Arial, Helvetica, sans-serif; --h1-font: var(--heading-font); --h2-font: var(--heading-font); --h3-font: var(--heading-font); --h4-font: var(--heading-font); --h5-font: var(--heading-font); --h6-font: var(--heading-font); --navigation-font: var(--base-font); --sub-navigation-font: var(--navigation-font); --breadcrumb-font: var(--base-font); --button-font: var(--base-font); --table-header-font: var(--base-font); --color-text: var(--color-black); --color-heading: var(--color-text); --link-color: #0451E4; --link-color-hover: #0340B4; --link-color-active: var(--link-color-hover); --link-color-visited: var(--link-color); --base-font-size: 14px; --base-font-weight: normal; --base-line-height: 1.428571429; --h1-font-size: 36px; --h1-font-weight: bold; --h2-font-size: 30px; --h2-font-weight: bold; --h3-font-size: 24px; --h3-font-weight: bold; --h4-font-size: 18px; --h4-font-weight: bold; --h5-font-size: 16px; --h5-font-weight: bold; --h6-font-size: 14px; --h6-font-weight: bold; --h1-text-transform: none; --h2-text-transform: none; --h3-text-transform: none; --h4-text-transform: none; --h5-text-transform: none; --h6-text-transform: none; --color-h1: var(--color-heading); --color-h2: var(--color-heading); --color-h3: var(--color-heading); --color-h4: var(--color-heading); --color-h5: var(--color-heading); --color-h6: var(--color-heading); --h1-font-size-mobile: var(--h1-font-size); --h1-font-size-tablet: var(--h1-font-size); --h1-line-height: 1.1; --h1-margin: 20px 10px; --h2-font-size-mobile: var(--h2-font-size); --h2-font-size-tablet: var(--h2-font-size); --h2-line-height: 1.1; --h2-margin: 20px 10px; --h3-font-size-mobile: var(--h3-font-size); --h3-font-size-tablet: var(--h3-font-size); --h3-line-height: 1.1; --h3-margin: 20px 10px; --h4-font-size-mobile: var(--h4-font-size); --h4-font-size-tablet: var(--h4-font-size); --h4-line-height: 1.1; --h4-margin: 10px 10px; --h5-font-size-mobile: var(--h5-font-size); --h5-font-size-tablet: var(--h5-font-size); --h5-line-height: 1.1; --h5-margin: 10px 10px; --h6-font-size-mobile: var(--h6-font-size); --h6-font-size-tablet: var(--h6-font-size); --h6-line-height: 1.1; --h6-margin: 10px 10px; --dialog-font-size: 12px; --navigation-position: left; --navigation-below-logo: false; --nav-bg-color: var(--header-background-color); --desktop-nav-link-background-color: var(--header-background-color); --desktop-nav-link-background-color-hover: var(--header-background-color); --nav-tab-border-inner-color-focus: #0451E4; --nav-text-color: #000000; --desktop-nav-link-color-hover: #0451E4; --desktop-nav-color-active: #000000; --desktop-nav-background-color-active: transparent; --nav-tab-border-inner-color-selected: #0451E4; --nav-font-size: 14px; --navigation-font-weight: normal; --desktop-nav-link-padding: 12px; --navigation-text-transform: none; --nav-tab-expand-bg-color: var(--header-background-color); --nav-tab-expand-border-color: var(--nav-text-color); --nav-tab-expand-link-padding: 12px; --desktop-sub-nav-container-border-weight: 0.5px; --desktop-sub-nav-link-color: #000000; --desktop-sub-nav-link-color-hover: #0451E4; --desktop-sub-nav-link-background-color: var(--header-background-color); --desktop-sub-nav-link-background-color-hover: var(--color-state-hover); --desktop-sub-nav-color-active: #0451E4; --nav-sub-bg-color: var(--color-white); --nav-sub-tab-bg-color: var(--nav-sub-bg-color); --nav-sub-tab-bg-color-focus: var(--nav-sub-tab-bg-color); --nav-sub-tab-text-color: var(--link-color); --nav-sub-tab-text-color-focus: var(--nav-sub-tab-text-color); --nav-sub-tab-text-color-selected: var(--nav-sub-tab-text-color); --nav-sub-tab-bg-color-selected: var(--nav-sub-bg-color); --nav-sub-tab-border-color-selected: var(--header-background-color); --nav-sub-border-color: var(--header-background-color); --nav-sub-tab-border-color: transparent; --desktop-sub-nav-background-color-active: var(--desktop-sub-nav-link-background-color); --desktop-sub-nav-link-border-color: var(--nav-text-color); --desktop-sub-nav-font-size: var(--nav-font-size); --desktop-sub-nav-font-weight: normal; --desktop-sub-nav-text-transform: none; --page-header-sticky: false; --user-menu-avatar-style: round; --nav-side-text-color: var(--nav-text-color); --user-menu-font-size: var(--base-font-size); --user-menu-font-weight: normal; --user-menu-text-transform: none; --user-menu-dropdown-background-colour: var(--color-white); --user-menu-dropdown-border-width: 1px; --user-menu-dropdown-border-radius: 4px; --user-menu-dropdown-text-colour: var(--color-text); --user-menu-dropdown-text-hover-colour: var(--user-menu-dropdown-text-colour); --user-menu-dropdown-background-hover-colour: var(--color-neutral-4); --user-menu-dropdown-font-size: var(--base-font-size); --user-menu-dropdown-font-weight: normal; --user-menu-dropdown-text-transform: none; --nav-quick-bg-color: var(--color-white); --nav-menu-icon-color: var(--nav-text-color); --mobile-menu-icon-background-color: var(--desktop-nav-link-background-color); --show-mobile-menu-background-color: var(--desktop-nav-link-background-color); --header-background-color: #FFFFFF; --hide-header-drop-shadow: false; --slim-header: false; --footer-background-color: transparent; --footer-border-color: #E6E6E6; --footer-region-background-color: var(--footer-background-color); --footer-region-border-bottom-width: 0; --footer-region-border-color-bottom: transparent; --footer-color: var(--color-neutral-6); --show-footer-links: false; --hide-footer-links-login: false; --footer-quick-links-color: var(--link-color); --footer-quick-links-separator-color: var(--footer-quick-links-color); --footer-quick-links-text-transform: none; --footer-quick-links-font-weight: normal; --footer-quick-links-font-size: var(--base-font-size); --footer-copyright-color: var(--footer-color); --footer-copyright-text-transform: none; --footer-copyright-font-size: var(--base-font-size); --footer-copyright-font-weight: normal; --footer-text-alignment: copy-left-links-right; --footer-block-background-color: transparent; --footer-block-border-color: var(--color-neutral-5); --footer-block-border-radius: 4px; --footer-block-header-background-color: var(--footer-block-background-color); --footer-block-header-text-color: var(--color-h2); --footer-block-text-color: var(--color-text); --poweredby-background-color: var(--color-primary); --poweredby-text-color: var(--footer-color); --poweredby-visibility: hidden; --footer-hide-logout: visible; --footer-logo-position: left; --dashboard-region-page-top-background-color: transparent; --fix-dashboard-region-page-top-background-image: false; --dashboard-region-content-top-background-color: transparent; --fix-dashboard-region-content-top-background-image: false; --dashboard-region-main-one-background-color: transparent; --fix-dashboard-region-main-one-background-image: false; --dashboard-region-main-two-background-color: transparent; --fix-dashboard-region-main-two-background-image: false; --dashboard-region-main-three-background-color: transparent; --fix-dashboard-region-main-three-background-image: false; --dashboard-region-main-four-background-color: transparent; --fix-dashboard-region-main-four-background-image: false; --dashboard-region-content-bottom-background-color: transparent; --fix-dashboard-region-content-bottom-background-image: false; --dashboard-region-page-bottom-background-color: transparent; --fix-dashboard-region-page-bottom-background-image: false; --section-name-color: var(--color-text); --course-section-font-size: var(--h3-font-size); --course-section-font-weight: var(--h3-font-weight); --section-name-background-color: transparent; --section-name-margin: 1rem 0; --main-section-content-background-color: transparent; --section-border-colour: transparent; --main-section-content-padding: 10px; --course-activity-padding: 3px; --course-activity-margin: 6px; --course-activity-background-color: var(--page-content-background-colour); --course-activity-border-colour: transparent; --course-activity-color: var(--color-text); --activity-instance-font-size: var(--h4-font-size); --activity-instance-font-weight: var(--h3-font-weight); --course-activity-icon-size: var(--activity-instance-font-size); --activity-instance-color: var(--link-color); --course-activity-icon-color: var(--activity-instance-color); --hide-course-activity-icons: false; --hide-activity-completion: false; --auto-course-completion-icon-size: 14px; --manual-completion-icon-size: small; --completion-icon-colour: var(--color-neutral-6); --course-region-page-top-background-color: transparent; --fix-course-region-page-top-background-image: false; --course-page-region-top-background-color: transparent; --fix-course-page-region-top-background-image: false; --course-page-region-bottom-background-color: transparent; --fix-course-page-region-bottom-background-image: false; --course-region-page-bottom-background-color: transparent; --fix-course-region-page-bottom-background-image: false; --front-page-region-page-top-background-color: transparent; --front-page-region-content-top-background-color: transparent; --front-page-region-main-one-background-color: transparent; --front-page-region-main-two-background-color: transparent; --front-page-region-main-three-background-color: transparent; --front-page-region-main-four-background-color: transparent; --front-page-region-content-bottom-background-color: transparent; --front-page-region-page-bottom-background-color: transparent; --fix-frontpage-region-page-top-background-image: false; --fix-frontpage-region-content-top-background-image: false; --fix-frontpage-region-main-one-background-image: false; --fix-frontpage-region-main-two-background-image: false; --fix-frontpage-region-main-three-background-image: false; --fix-frontpage-region-main-four-background-image: false; --fix-frontpage-region-content-bottom-background-image: false; --fix-frontpage-region-page-bottom-background-image: false; --login-page-header-background-color: var(--color-white); --hide-login-header-drop-shadow: true; --login-page-background-color: #ffffff; --hide-login-hero-image: show; --login-panel-position: left; --login-panel-alignment: left; --panel-heading-size: 42px; --panel-heading-font-weight: 700; --panel-heading-text-transform: none; --login-signup-panel-padding: 40px; --login-panel-heading-color: #ffffff; --login-panel-heading-text-underline-color: var(--color-primary); --login-panel-background-color: transparent; --login-panel-color: #ffffff; --login-panel-border-width: 0px; --login-panel-border-color: transparent; --login-panel-border-radius: 4px; --login-panel-button-color: var(--btn-text-color); --login-panel-button-color-hover: var(--btn-text-color-hover); --login-panel-button-background: var(--btn-bg-color); --login-panel-button-background-hover: var(--btn-bg-color-hover); --login-panel-button-border-color: var(--btn-border-color); --login-panel-button-border-color-hover: var(--btn-border-color-hover); --login-panel-button-border-radius: var(--btn-radius); --login-panel-button-text-transform: var(--btn-text-transform); --login-panel-button-font-size: var(--btn-font-size); --login-panel-button-font-weight: var(--btn-font-weight); --login-panel-button-padding: var(--btn-padding); --signup-panel-heading-color: var(--signup-panel-color); --signup-panel-heading-text-underline-color: var(--color-primary); --signup-panel-background-color: transparent; --signup-panel-color: var(--color-text); --signup-panel-border-width: 1px; --signup-panel-border-color: transparent; --signup-panel-border-radius: 4px; --signup-panel-button-color: var(--btn-text-color); --signup-panel-button-color-hover: var(--btn-text-color-hover); --signup-panel-button-background: var(--btn-bg-color); --signup-panel-button-background-hover: var(--btn-bg-color-hover); --signup-panel-button-border-color: var(--btn-border-color); --signup-panel-button-border-color-hover: var(--btn-border-color-hover); --signup-panel-button-border-radius: var(--btn-radius); --signup-panel-button-text-transform: var(--btn-text-transform); --signup-panel-button-font-size: var(--btn-font-size); --signup-panel-button-font-weight: var(--btn-font-weight); --signup-panel-button-padding: var(--btn-padding); --login-page-footer-background-color: transparent; --login-page-footer-color: #ffffff; --login-page-footer-copyright-color: #ffffff; --login-page-background-size: cover; --login-page-background-repeat: no-repeat; --login-page-background-position: top-right; --login-page-background-attachment: true; --login-page-content-background-color: transparent; --login-page-content-background-size: initial; --color-background: var(--color-white); --page-content-background-colour: transparent; --admin-region-background-color: var(--color-neutral-5); --max-page-width: 1680px; --back-to-top-enabled: true; --back-to-top-icon: angle; --back-to-top-display-text: false; --back-to-top-padding: var(--btn-prim-padding); --back-to-top-radius: var(--btn-prim-radius); --block-background-color: var(--color-white); --block-border-color: var(--color-neutral-5); --block-border-radius: 4px; --block-header-background-color: var(--block-background-color); --block-header-text-color: var(--color-text); --block-heading-underline-color: var(--color-text); --block-header-text-size: var(--h3-font-size); --block-header-font-weight: var(--h2-font-weight); --block-heading-text-transform: none; --block-text-color: var(--color-text); --block-header-padding: 10px; --block-content-padding: var(--block-header-padding); --featured-links-transparent: false; --featured-links-text-color: var(--color-white); --featured-links-text-background-color: rgba(0, 0, 0, 0.5); --radial-progress-circle-background: var(--color-neutral-4); --radial-progress-inset-color: var(--color-white); --radial-progress-overdue-fill: red; --radial-progress-completed-fill: green; --radial-progress-not-started-fill: var(--color-neutral-6); --radial-progress-in-progress-fill: orange; --radial-progress-state-window-open-fill: orange; --radial-progress-expired-fill: red; --radial-label-font-size: 18px; --radial-label-color: var(--color-text); --radial-progress-percentage-font-size: 18px; --radial-progress-percentage-color: var(--color-text); --isotope-radial-filter-container-min-height: 180px; --radial-progress-border-width: 10px; --radial-label-margin-top-offset: 10px; --radial-progress-margin: 1em 1em 3em 1em; --radial-progress-circle-size: 120px; --isotope-radial-progress-use-enhanced-styling: false; --isotope-radial-enable-shadow: false; --isotope-radial-progress-enhanced-inset-color: rgb(156, 156, 156); --isotope-radial-progress-enhanced-gradient-primary-color: rgb(247, 134, 0); --isotope-radial-progress-enhanced-gradient-secondary-color: rgb(63, 202, 15); --isotope-filter-text-colour: var(--btn-prim-text-color); --isotope-filter-border-color: var(--btn-border-color); --isotope-filter-border-color-selected: var(--btn-accent-color-active); --isotope-filter-all-filters-background-color: var(--btn-prim-bg-color); --isotope-filter-all-text-color: var(--btn-prim-text-color); --isotope-filter-certifications-background-color: var(--btn-prim-bg-color); --isotope-filter-completed-background-color: green; --isotope-filter-course-background-color: var(--btn-prim-bg-color); --isotope-filter-expired-background-color: red; --isotope-filter-not-required-background-color: green; --isotope-filter-not-started-background-color: var(--color-neutral-6); --isotope-filter-overdue-background-color: red; --isotope-filter-programs-background-color: var(--btn-prim-bg-color); --isotope-filter-required-background-color: red; --isotope-filter-started-background-color: orange; --isotope-filter-state-window-open-background-color: orange; --isotope-item-background-color: var(--color-neutral-4); --isotope-item-background-color-hover: var(--color-tertiary); --isotope-item-color: var(--color-text); --isotope-item-date-color: var(--color-text); --isotope-item-required-text-color: red; --isotope-item-info-background-color: rgba(230, 238, 253,0.9); --isotope-item-name-color: var(--color-text); --isotope-item-enable-shadow: true; --footer_logo: false; --frontpage_region_content_bottom_background_image: false; --frontpage_region_content_top_background_image: false; --frontpage_region_main_four_background_image: false; --frontpage_region_main_one_background_image: false; --frontpage_region_main_three_background_image: false; --frontpage_region_main_two_background_image: false; --frontpage_region_page_bottom_background_image: false; --frontpage_region_page_top_background_image: false; --login_page_background_image: 'https://campusypf.com/pluginfile.php/1/theme_kineo/login_page_background_image/1354/ypf-login-bg.jpg'; --login_page_content_background_image: false; --pagebackgroundimage: false; } /* ============================================================ YPF — THEMING (Guía de Identidad Visual v1.0, nov 2024) Recoloreado de la hoja jb-demo/Mindtools Kineo a la paleta YPF. La estructura y los fixes de layout de abajo se conservan; los comentarios originales que mencionan "indigo/lime/teal" describen el rol del color, que ahora toma estos valores: Azul YPF #0451E4 (Pantone 300 C · primario · AA) Azul oscuro #0340B4 (hover / estados activos) Azul noche #0B1E4F (degradés y velos sobre foto) Tintes de azul #DCE7FC · #E6EEFD · #F2F6FE Grises #E6E6E6 (Gris 1) · #AAAAAA (Gris 2) · #3C3C3C (Gris 3) Negro #000000 Tipografía DIN no tiene licencia web aquí: Barlow / Barlow Condensed (Google Fonts) como sustituto. Si YPF provee DIN en WOFF, reemplazar en base-font/heading-font. ============================================================ */ /* ============================================================ jb-demo — LOGIN PAGE Split-screen treatment adapted from the Baker theme backup and RECOLOURED to this site's own Mindtools Kineo palette. Palette: Indigo #0451E4 (primary) · Deep indigo #0340B4 Lime #3C3C3C · Teal #DCE7FC · Ink #222222 Type: Libre Franklin (site base font — unchanged) Shape: Bold colour field + generous whitespace + white pill CTA, after academy.myob.com. DOM verified on this site (logged out, 1440px): [role=main] > #login_hero-image + .loginbox.clearfix.twocolumns .loginbox > .loginpanel + .signuppanel .signuppanel > h2 · hr · .subcontent · .subcontent.potentialidps The Microsoft SSO button lives in .subcontent.potentialidps — it is KEPT and restyled; only the self-signup copy is suppressed. ============================================================ */ /* ---- 1. Strip the page chrome back to a full-bleed canvas ---- */ body.path-login { overflow-x: hidden; background-image: none !important; background: #ffffff; } body.path-login .page-layout, body.path-login .page-body, body.path-login #page, body.path-login #page-content, body.path-login #page-content > .row, body.path-login #region-main { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; overflow-x: hidden; background: transparent !important; } body.path-login #user-notifications { display: none !important; } /* ---- 2. The split: form left (48%), photography right (52%) ---- */ body.path-login [role="main"] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; min-height: 100vh; margin: 0 !important; padding: 0 !important; } body.path-login #login_hero-image { order: 2; flex: 0 0 52% !important; width: 52% !important; max-width: 52%; position: relative; min-height: 100vh; margin: 0 !important; overflow: hidden; background: #0340B4; } body.path-login #login_hero-image img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center 30%; margin: 0 !important; } /* ---- 3. Left column: the brand colour field ---- */ body.path-login .loginbox.twocolumns { order: 1; flex: 0 0 48% !important; width: 48% !important; max-width: 48%; margin: 0 !important; padding: 0 !important; background: #0451E4 !important; display: flex !important; /* !important is required — the theme sets flex-direction:row on .loginbox and wins otherwise, which leaves the SSO panel beside the form. */ flex-direction: column !important; align-items: center !important; justify-content: center !important; box-sizing: border-box; } body.path-login .loginpanel, body.path-login .signuppanel { width: 100% !important; max-width: 430px !important; flex: 0 0 auto !important; margin: 0 !important; float: none !important; display: block !important; background: transparent !important; border: none !important; box-sizing: border-box; } body.path-login .loginpanel { padding: 0 40px !important; } body.path-login .signuppanel { padding: 0 40px 8px !important; } /* ---- 4. The white logo, embedded (replaces the Baker logo data URI) ---- */ body.path-login .loginpanel::before { content: ''; display: block; width: 190px; height: 50px; margin: 0 0 32px 0; background: url('data:image/png;base64,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') no-repeat left center; background-size: contain; } /* ---- 5. Type: white, tight, MYOB-scale heading + a supporting line ---- */ body.path-login .loginpanel, body.path-login .loginpanel label, body.path-login .loginpanel a, body.path-login .loginpanel span, body.path-login .loginpanel div, body.path-login .loginpanel p, body.path-login .loginpanel .logininfo, body.path-login .signuppanel, body.path-login .signuppanel div, body.path-login .signuppanel span { color: #ffffff !important; } body.path-login .loginpanel h2 { color: #ffffff !important; font-size: 42px !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: -0.02em; margin: 0 0 6px !important; padding: 0 !important; border: none !important; display: block; } body.path-login .loginpanel h2::after { content: 'Continuá tu aprendizaje donde lo dejaste.'; display: block; margin-top: 12px; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: rgba(255, 255, 255, 0.82); } /* the theme's 50px accent rule lands *below* the subtitle — drop it */ body.path-login .loginpanel > hr { display: none !important; } body.path-login .loginpanel > .subcontent.loginsub { margin-top: 26px; } body.path-login .loginpanel label { font-size: 13px !important; font-weight: 600 !important; margin-bottom: 6px !important; display: block; } /* "Remember username": checkbox + label on one baseline */ body.path-login .loginpanel .rememberusername { display: flex !important; align-items: center; gap: 9px; margin: 14px 0 20px !important; } body.path-login .loginpanel .rememberusername input[type="checkbox"] { width: 16px; height: 16px; margin: 0 !important; flex: none; accent-color: #ffffff; } body.path-login .loginpanel .rememberusername label { margin: 0 !important; font-weight: 400 !important; font-size: 13.5px !important; } /* "Cookies must be enabled": stop the info icon colliding with the copy */ body.path-login .loginpanel .desc { display: flex !important; align-items: flex-start; gap: 8px; margin-top: 22px !important; font-size: 12.5px; opacity: .82; } body.path-login .loginpanel .desc > * { margin: 0 !important; } /* ---- 6. Inputs: white, rounded, no hairline noise ---- */ body.path-login .loginform input[type="text"], body.path-login .loginform input[type="password"], body.path-login .loginpanel input[type="text"], body.path-login .loginpanel input[type="password"] { background: #ffffff !important; color: #222222 !important; border: 1px solid #ffffff !important; border-radius: 8px !important; width: 100% !important; padding: 11px 14px !important; font-size: 15px !important; box-shadow: none !important; } body.path-login .loginform input[type="text"]:focus, body.path-login .loginform input[type="password"]:focus { outline: 3px solid rgba(255, 255, 255, 0.55) !important; outline-offset: 1px; } /* ---- 7. CTA: white pill with indigo ink (the MYOB "Browse learning" move) ---- */ body.path-login #loginbtn, body.path-login .loginbtn, body.path-login .loginform button[type="submit"], body.path-login .loginform input[type="submit"] { background: #ffffff !important; border: 1px solid #ffffff !important; color: #0451E4 !important; border-radius: 999px !important; padding: 12px 30px !important; font-weight: 700 !important; font-size: 15px !important; width: auto; box-shadow: none !important; transition: transform .15s ease, box-shadow .15s ease; } body.path-login #loginbtn:hover, body.path-login .loginform button[type="submit"]:hover, body.path-login .loginform input[type="submit"]:hover { background: #ffffff !important; color: #0340B4 !important; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); } /* "Remember username" + "Forgot..." */ body.path-login .loginpanel .rememberpass, body.path-login .loginpanel .forgetpass { font-size: 13px; } body.path-login .loginpanel a { text-decoration: underline; text-underline-offset: 2px; } body.path-login .loginpanel a:hover { color: #E6EEFD !important; } body.path-login .loginpanel .logininfo { font-size: 12.5px; opacity: .8; } /* ---- 8. Signup panel: drop the self-registration clutter, KEEP the SSO ---- */ body.path-login .signuppanel > h2, body.path-login .signuppanel > hr, body.path-login .signuppanel > .subcontent:not(.potentialidps) { display: none !important; } body.path-login .signuppanel .potentialidps { display: block !important; /* theme ships inline-block, which shrink-wraps it */ width: 100% !important; margin-top: 4px !important; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.28); } body.path-login .signuppanel .potentialidps h6, body.path-login .signuppanel .potentialidps > div:first-child { font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, 0.72) !important; margin-bottom: 12px !important; } body.path-login .signuppanel .potentialidps a { display: inline-flex !important; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; border-radius: 999px !important; padding: 10px 22px !important; color: #ffffff !important; font-weight: 600; font-size: 14px; text-decoration: none !important; transition: background .15s ease; } body.path-login .signuppanel .potentialidps a:hover { background: rgba(255, 255, 255, 0.2) !important; } body.path-login .signuppanel .potentialidps img { width: 18px; height: 18px; } /* ---- 9. Footer strip: quiet, on the indigo ---- */ body.path-login .userToolbar, body.path-login #page-login-index .userToolbar { display: none !important; } body.path-login .page-footer, body.path-login #region-footer-region { background: transparent !important; border: none !important; } /* ---- 10. Responsive: stack, photo on top ---- */ @media (max-width: 900px) { body.path-login [role="main"] { flex-direction: column !important; min-height: 0; } body.path-login #login_hero-image { order: 1; width: 100% !important; max-width: 100%; min-height: 30vh; flex: none !important; } body.path-login #login_hero-image img { object-position: center 25%; } body.path-login .loginbox.twocolumns { order: 2; width: 100% !important; max-width: 100%; flex: none !important; padding: 44px 0 52px !important; } body.path-login .loginpanel h2 { font-size: 34px !important; } } /* ============================================================ jb-demo — DASHBOARD & GLOBAL LOOK Design pass after academy.myob.com, recoloured to this site's palette. Carries over the transferable parts of the Baker theme CSS (blocks, isotope filter pills, status pills, table hairlines, carousel scrim, calendar card, footer contrast) — recoloured — and drops the Baker-specific bits (hh-banner, hh-cta-card, the asymmetric "petal" corners). MYOB uses one uniform radius, so we do too. Palette: Indigo #0451E4 · Deep #0340B4 · Ink-indigo #0B1E4F Lime #3C3C3C · Teal #DCE7FC · Ink #222222 Radius: 16px cards · 12px blocks · 999px pills NOTE on contrast: white on #0451E4 = 4.99:1 (AA for normal text). Lime and teal are LIGHT — they never carry white text here, only ink. ============================================================ */ :root { --jb-indigo: #0451E4; --jb-indigo-deep: #0340B4; --jb-indigo-ink: #0B1E4F; --jb-lime: #3C3C3C; --jb-teal: #DCE7FC; --jb-ink: #222222; --jb-muted: #595959; --jb-line: #E6E6E6; --jb-surface: #F5F5F5; --jb-radius-card: 16px; --jb-radius-block: 12px; } /* ---------- 1. Global block rhythm ---------- */ .block { border: 1px solid var(--jb-line); border-radius: var(--jb-radius-block); box-shadow: 0 1px 3px rgba(11, 30, 79, .06); } /* chromeless / no-header blocks are layout scaffolding, not cards */ .block.chromeless, .block.no-header, .block_awesome, .block_carousel, .block_html { border: none !important; box-shadow: none !important; background: transparent !important; } [data-blockregion="main"] > .block, [data-blockregion^="dash-main"] > .block { margin-bottom: 28px; } [data-blockregion="side-post"] > .block { margin-bottom: 20px; } /* rail retired on dash 31; still used elsewhere */ .block .title.block-title h2 { letter-spacing: -.01em; font-size: 20px; color: var(--jb-ink); } /* the collapse/hide control draws a stray icon above every row */ .block .header.block-header .block_action { display: none !important; } /* ...and .title.block-title::after is a FULL-WIDTH 1px underline (944px next to a 160px heading), which reads as a stray horizontal rule. Kill it globally and put a short accent under the titles that keep a header. */ .block .title.block-title::after { display: none !important; } [data-blockregion^="dash-main"] .block .title.block-title, [data-blockregion="side-post"] .block .title.block-title { position: relative; } [data-blockregion="side-post"] .block .title.block-title h2 { padding-bottom: 8px; } [data-blockregion="side-post"] .block .title.block-title h2::after { content: ''; display: block; width: 34px; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--jb-indigo); } .block_carousel .header.block-header, .block_html .header.block-header { border: none !important; } /* ---------- 2. Section heading (the "Which best describes you?" move) ---------- */ .jb-sectionhead { text-align: center; max-width: 720px; margin: 12px auto 6px; } .jb-sectionhead h2 { font-size: 34px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; color: var(--jb-ink); margin: 0 0 10px; } .jb-sectionhead p { font-size: 15.5px; line-height: 1.55; color: var(--jb-muted); margin: 0; } /* ---------- 3. Curriculum tiles: photo card, text on a scrim ---------- */ /* The block ships an inline background-color:#333333 on .caption and renders the photo above a solid band. Override to MYOB's overlay treatment. */ .block_awesome .content.block-content { padding: 0 !important; } .block_awesome .awesome-block.template-2 { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--jb-radius-card) !important; background: var(--jb-indigo-ink); box-shadow: 0 1px 3px rgba(11, 30, 79, .10); transition: transform .22s ease, box-shadow .22s ease; } .block_awesome a:hover .awesome-block.template-2 { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(11, 30, 79, .18); } .block_awesome .awesome-block.template-2 > img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; transition: transform .5s ease; } .block_awesome a:hover .awesome-block.template-2 > img { transform: scale(1.05); } .block_awesome .awesome-block.template-2 .caption { position: absolute !important; left: 0; right: 0; bottom: 0; /* beats the inline background-color */ /* Soft enough that the photograph still reads through the upper half — at .94/.82 the image was completely buried. */ background: linear-gradient(to top, rgba(6, 22, 60, .90) 0%, rgba(6, 22, 60, .74) 34%, rgba(6, 22, 60, .34) 68%, rgba(6, 22, 60, 0) 100%) !important; border-radius: 0 0 var(--jb-radius-card) var(--jb-radius-card) !important; padding: 44px 20px 18px !important; display: flex; flex-direction: column; text-align: left; } /* "40 courses" reads as an eyebrow ABOVE the title, not squeezed under it */ .block_awesome .awesome-block.template-2 .caption h3 { order: 1; margin: 0 0 6px !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .1em; text-transform: uppercase; /* the eyebrow sits highest in the scrim, where it is weakest — it needs its own shadow or it disappears over a light patch of photo */ color: #ffffff !important; opacity: 1; text-shadow: 0 1px 10px rgba(0, 0, 0, .75), 0 0 3px rgba(0, 0, 0, .5); } .block_awesome .awesome-block.template-2 .caption h2 { order: 2; margin: 0 0 8px !important; font-size: 21px !important; line-height: 1.2 !important; letter-spacing: -.015em; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); } .block_awesome .awesome-block.template-2 .caption p { order: 3; margin: 0 !important; font-size: 13.5px !important; line-height: 1.5 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* the whole card is the link (config_urlcoveringblock) */ .block_awesome .content.block-content > a { display: block; text-decoration: none !important; } .block_awesome .content.block-content > a:focus-visible .awesome-block { outline: 3px solid var(--jb-indigo); outline-offset: 3px; } /* tile grid gutters — width-33 blocks sit 3-across */ [data-blockregion="dash-main-three"] { display: flex; flex-wrap: wrap; gap: 24px 0; } [data-blockregion="dash-main-three"] > .block.width-33 { padding: 0 12px; margin-bottom: 0 !important; box-sizing: border-box; } [data-blockregion="dash-main-three"] > .block.width-100 { padding: 0 12px; } /* ---------- 4. Carousel: caption legibility (the known v20 bug) ---------- */ .block_carousel figure.tile { border-radius: var(--jb-radius-card); overflow: hidden; box-shadow: 0 1px 3px rgba(11, 30, 79, .10); transition: transform .2s ease, box-shadow .2s ease; } .block_carousel figure.tile:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(11, 30, 79, .16); } .block_carousel figure.tile .caption { position: relative; } .block_carousel figure.tile .caption .title-wrap { background: linear-gradient(to top, rgba(6, 22, 60, .88) 0%, rgba(6, 22, 60, .55) 55%, rgba(6, 22, 60, 0) 100%) !important; padding: 26px 14px 12px !important; } .block_carousel figure.tile .caption .title-wrap h3, .block_carousel figure.tile .caption .title-wrap h3 .ellip, .block_carousel figure.tile .caption .title-wrap h3 .ellip-line { color: #ffffff !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); font-size: 15px !important; font-weight: 600 !important; line-height: 1.3 !important; } .block_carousel figure.tile .caption .title-wrap .icon i { color: #ffffff !important; opacity: .9; } .block_carousel .custom-tags .tag, .block_carousel figure.tile .completion-status { border-radius: 999px; } /* ---------- 4b. The "jb-panel" pattern ---------- This is the Upcoming-events card look (soft surface, hairline border, indigo left accent, 10px radius) lifted into a REUSABLE pattern via each block's cs_customclass. Currently on the leaderboard and Latest badges blocks, which sat squashed in the old right rail and now share the full-width bottom row. The .block_calendar_upcoming rules in §5 are the same pattern and are kept for the Upcoming Events sub-page dashboard. */ .block.jb-panel { background: var(--jb-surface) !important; border: 1px solid var(--jb-line) !important; border-left: 3px solid var(--jb-indigo) !important; border-radius: 10px !important; box-shadow: none !important; } .block.jb-panel .header.block-header { background: transparent !important; padding: 16px 18px 0 !important; } .block.jb-panel .title.block-title h2 { color: var(--jb-ink) !important; font-size: 18px; } .block.jb-panel .content.block-content { background: transparent !important; padding: 12px 18px 18px !important; } /* The `main` region carries three blocks: the isotope at width-66 and the two panels at width-33. Plain flex would wrap the second panel under the isotope, so lay the region out as a grid and let the isotope span both rows. */ /* Scoped with :has() to the region that actually holds this trio, so the grid cannot reflow another dashboard's `main` region (Manager Tools keeps its blocks in dash-main-one / side-post; the Upcoming Events sub-page uses main). */ [data-blockregion="main"]:has(> .block_leaderboard):has(> .block_badges) { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: min-content 1fr; gap: 20px 24px; align-items: start; align-content: start; } /* The theme's own width-33 / width-66 classes set a percentage width, which then applies to the GRID TRACK — a 1fr track became a 133px panel. Inside the grid the track is the width, so make every block fill it. */ [data-blockregion="main"] > .block { width: 100% !important; max-width: 100% !important; flex: none !important; margin-bottom: 0 !important; min-width: 0; } /* Explicit placement — auto-flow put the badges block in a third row, below the isotope, instead of under the leaderboard in column 2. */ [data-blockregion="main"] > .block_isotope { grid-column: 1; grid-row: 1 / span 2; } [data-blockregion="main"] > .block_leaderboard { grid-column: 2; grid-row: 1; align-self: start; } [data-blockregion="main"] > .block_badges { grid-column: 2; grid-row: 2; align-self: start; } /* leaderboard: one compact centred stat, not a tall empty panel */ .block_leaderboard.jb-panel .content.block-content { text-align: center; padding: 10px 18px 18px !important; } .block_leaderboard.jb-panel .score { display: block; font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--jb-indigo-ink); } .block_leaderboard.jb-panel .rank { font-size: 13px; color: var(--jb-muted); margin-top: 4px; } .block_leaderboard.jb-panel .content.block-content > div { display: inline-block; background: rgba(4, 81, 228, .16); border-radius: 12px; padding: 14px 26px; } /* badges: ul.badges > li — the list, not the content div, is the flex parent */ .block_badges.jb-panel ul.badges { display: flex; flex-wrap: wrap; gap: 14px 20px; margin: 0; padding: 0; list-style: none; } .block_badges.jb-panel ul.badges > li { flex: 0 0 auto; width: calc(50% - 10px); text-align: center; margin: 0; } .block_badges.jb-panel img.badge-image { max-width: 48px; height: auto; } .block_badges.jb-panel .badge-name { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.35; } /* ---------- 5. Upcoming events: compact, de-duplicated rows ---------- REUSABLE PATTERN — see §4b. Kept for the Upcoming Events sub-page dashboard; the block is no longer on My Learning. */ .block_calendar_upcoming .content.block-content { padding: 4px 0 0 !important; } .block_calendar_upcoming .event { position: relative; padding: 12px 14px 12px 16px !important; margin: 0 0 8px !important; background: var(--jb-surface); border: 1px solid var(--jb-line); border-left: 3px solid var(--jb-indigo); border-radius: 10px; } /* the seminar name is printed twice — once as the activity link, once as .course */ .block_calendar_upcoming .event .course { display: none !important; } .block_calendar_upcoming .event .clearfix { display: none !important; } .block_calendar_upcoming .event > .icon { display: none !important; } .block_calendar_upcoming .event > a { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--jb-indigo-ink) !important; text-decoration: none !important; } .block_calendar_upcoming .event > a:hover { color: var(--jb-indigo) !important; } .block_calendar_upcoming .event .date { margin: 4px 0 10px !important; font-size: 12.5px; color: var(--jb-muted); } .block_calendar_upcoming .event .pull-right { float: none !important; } .block_calendar_upcoming .event .pull-right .btn { display: inline-block; background: #ffffff; border: 1.5px solid var(--jb-indigo); color: var(--jb-indigo) !important; border-radius: 999px; padding: 5px 16px; font-size: 12.5px; font-weight: 600; box-shadow: none; } .block_calendar_upcoming .event .pull-right .btn:hover { background: var(--jb-indigo); color: #ffffff !important; } /* the trailing "Go to calendar / New event" links */ .block_calendar_upcoming .footer, .block_calendar_upcoming .content.block-content > a { display: inline-block; font-size: 12.5px; margin-top: 6px; } /* ---------- 6. Leaderboard: teal is too light to carry white text ---------- */ .block_leaderboard { background: #ffffff !important; } .block_leaderboard .header.block-header, .block_leaderboard .content.block-content { background: #ffffff !important; } .block_leaderboard .title.block-title h2 { color: var(--jb-ink) !important; } .block_leaderboard .content.block-content { text-align: center; padding: 6px 14px 16px !important; } .block_leaderboard .content.block-content * { color: var(--jb-ink) !important; } /* the score keeps the brand teal, as ink-on-tint rather than white-on-teal */ .block_leaderboard .content.block-content > *:first-child { display: inline-block; background: rgba(4, 81, 228, .16); border-radius: 12px; padding: 10px 22px; font-weight: 700; } /* ---------- 7. Isotope: pills, softer radials, less dead space ---------- */ .block_isotope { background: var(--jb-surface) !important; border-color: var(--jb-line) !important; } .block_isotope .content.block-content { padding: 18px 20px 22px !important; } .block_isotope .isotope-description { font-size: 14.5px; color: var(--jb-muted); margin: 0 0 14px; max-width: 720px; } .learning.isotope .filters { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .learning.isotope .filters > span { font-weight: 700; color: var(--jb-ink); padding-top: 6px; } .learning.isotope .filters > div { display: flex; gap: 10px; flex-wrap: wrap; } .learning.isotope .radial-progress { margin: .2em .7em 1.2em !important; cursor: pointer; } .learning.isotope .radial-progress p { font-weight: 600; color: var(--jb-ink); font-size: 13px; } .learning.isotope .radial-progress .inset span { font-weight: 700; } /* the grid holds few items on a wide dashboard — don't reserve a screenful */ .block_isotope .isotope-container, .block_isotope .learning-items { min-height: 0 !important; } /* tile / table view switch → pills */ #viewSwitchContainer { gap: 6px; } #viewSwitchContainer .btn { border: 1.5px solid var(--jb-line); background: #ffffff; color: var(--jb-muted); border-radius: 999px !important; padding: 6px 14px; box-shadow: none; } #viewSwitchContainer .btn.btn-primary { background: var(--jb-indigo); border-color: var(--jb-indigo); color: #ffffff; } /* isotope cards */ .block_isotope figure.isotope.item { border-radius: var(--jb-radius-card); overflow: hidden; box-shadow: 0 1px 3px rgba(11, 30, 79, .10); transition: transform .2s ease, box-shadow .2s ease; } .block_isotope figure.isotope.item:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(11, 30, 79, .16); } .block_isotope figure.isotope.item .container__text { border-radius: 0 0 var(--jb-radius-card) var(--jb-radius-card); } /* ---------- 8. Status pills (learner + manager tables) ---------- */ .isotope-recordoflearning-table .label, .reportbuilder-table .label, .generaltable .label { border-radius: 999px; padding: 3px 12px; font-weight: 600; font-size: 12px; border: none; } .label.completed, .label.label-success { background: #E3F4EA !important; color: #00662F !important; } .label.started, .label.label-warning { background: #E6EEFD !important; color: #0340B4 !important; } .label.notstarted { background: #F0F0F0 !important; color: #595959 !important; } .label.label-danger { background: #FDE8E6 !important; color: #A32218 !important; } /* ---------- 9. Tables: hairline rows, gentle hover ---------- */ .generaltable thead th, .reportbuilder-table thead th { border-bottom: 2px solid var(--jb-line); color: var(--jb-ink); } .generaltable tbody tr, .reportbuilder-table tbody tr { border-bottom: 1px solid #F0F0F0; } .generaltable tbody tr:hover, .reportbuilder-table tbody tr:hover { background: #F2F6FE; } /* ---------- 10. Calendar block: card treatment ---------- */ .block_calendar_month { border-radius: var(--jb-radius-block); overflow: hidden; } .block_calendar_month .header.block-header { background: var(--jb-indigo); padding: 12px 16px; } .block_calendar_month .title.block-title h2 { color: #ffffff !important; margin: 0; padding: 0; border: none !important; } .minicalendar caption, .minicalendar caption a { color: var(--jb-indigo-ink); font-weight: 700; } .minicalendar th { color: var(--jb-muted); } .minicalendar td.today a { background: var(--jb-indigo); color: #ffffff; border-radius: 6px; display: inline-block; min-width: 22px; } /* ---------- 11. Gallery hero ---------- The slide's artwork is a repurposed LinkedIn banner, so the brand mark sits oversized on the right. Push the type up to hero scale and add a supporting line so the left half carries the weight. The strapline below is INJECTED BY CSS (the gallery block has no subtitle field) — edit it here, not in the block. */ .block_gallery { border-radius: var(--jb-radius-card); overflow: hidden; margin-bottom: 28px !important; } .block_gallery .content.block-content { padding: 0 !important; } .block_gallery .item__text-container__inner { max-width: 560px; } .block_gallery h1.item__text-container__element { font-size: 42px !important; line-height: 1.08 !important; letter-spacing: -.03em; font-weight: 700 !important; margin: 0 !important; } /* SCOPED to the My Learning hero (block instance 1312) on purpose. An unscoped .block_gallery rule put this strapline on the Manager Tools and Core Competencies heroes too, where it is simply wrong — those slides have their own subtitle. */ #inst1312 .item__text-container__inner::after { content: 'Your required learning, upcoming sessions and the full curriculum — all in one place.'; display: block; margin-top: 14px; max-width: 460px; font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--jb-muted); } .block_gallery .item__background-image { object-position: center right; } @media (max-width: 820px) { .block_gallery h1.item__text-container__element { font-size: 30px !important; } .block_gallery .item__text-container__inner::after { font-size: 14.5px; } } /* ---------- 12. Badges block ---------- */ .block_badges .content.block-content { padding: 14px !important; } .block_badges img { max-width: 64px; height: auto; } /* ---------- 13. Buttons + footer ---------- */ .btn-primary { background: var(--jb-indigo); border-color: var(--jb-indigo); border-radius: 999px; font-weight: 600; } .btn-primary:hover { background: var(--jb-indigo-deep); border-color: var(--jb-indigo-deep); } .page-footer .footer-links-container a:hover { color: var(--jb-indigo); } /* ---------- 14. Responsive: tiles 2-up then 1-up ---------- */ /* With the right rail retired the main column is ~1296px, so a width-33 tile is ~406px — at 3/4 that made a 541px-tall card. Squarer reads better at this size. */ @media (min-width: 1200px) { .block_awesome .awesome-block.template-2 { aspect-ratio: 1 / 1.08; } } @media (max-width: 1100px) { [data-blockregion="dash-main-three"] > .block.width-33 { flex: 0 0 50% !important; max-width: 50% !important; } .jb-sectionhead h2 { font-size: 30px; } } @media (max-width: 700px) { [data-blockregion="dash-main-three"] > .block.width-33 { flex: 0 0 100% !important; max-width: 100% !important; } .block_awesome .awesome-block.template-2 { aspect-ratio: 16 / 10; } .jb-sectionhead h2 { font-size: 26px; } } /* ============================================================ jb-demo — DESIGN PASS ACROSS THE OTHER DASHBOARDS Manager Tools (33) · Core Competencies (34) · ActivityTypes (40) and the tenant-facing views of My Learning (31). Audited per persona, because admin is silently redirected away from every audience-restricted dashboard: manager0111 -> Manager Tools learner0184 -> Tenant A member learner0975 -> Tenant B member daniel.smith -> plain learner (34 / 40 by URL) ============================================================ */ /* ---------- 1. Gallery heroes with WHITE text over a pale photo ---------- #inst916 (Manager Tools) and #inst930 (Core Competencies) both set the headline to #ffffff over a light image — measured, not guessed: getComputedStyle(h1).color === rgb(255,255,255). Unreadable as shipped. My Learning's hero (#inst1312) is dark ink on a light lavender panel and must NOT get a scrim, hence the per-instance scoping. */ #inst916 .item__text-container, #inst930 .item__text-container { /* full width so the fade spans the whole hero — the container is only 476px of a 1360px hero by default, which left a hard vertical seam where the gradient ran out. */ width: 100% !important; max-width: 100% !important; background: linear-gradient(90deg, rgba(6, 22, 60, .90) 0%, rgba(6, 22, 60, .78) 26%, rgba(6, 22, 60, .42) 50%, rgba(6, 22, 60, 0) 78%) !important; } #inst916 .item__text-container__inner, #inst930 .item__text-container__inner { padding: 8px 0; max-width: 620px; } #inst916 h1.item__text-container__element, #inst930 h1.item__text-container__element { color: #ffffff !important; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); } /* the slides' own subtitle paragraph */ #inst916 .item__text-container__element:not(h1), #inst930 .item__text-container__element:not(h1), #inst916 .item__text-container__element:not(h1) p, #inst930 .item__text-container__element:not(h1) p { color: rgba(255, 255, 255, .90) !important; font-size: 15.5px !important; line-height: 1.55 !important; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); max-width: 560px; } /* Core Competencies' hero subtitle is still Lorem ipsum in the block content. It was invisible before (white on a pale photo); the scrim above makes it legible, which is worse. Suppress it rather than invent copy — delete this rule once real copy is written into gallery block inst930. */ #inst930 .item__text-container__element:not(h1) { display: none !important; } /* ---------- 2. Catalogue blocks (ActivityTypes rows, manager rail) ---------- */ .block_totara_catalog .tui-cardScroller__title-header { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--jb-ink); } .block_totara_catalog .tui-learningCard { border-radius: var(--jb-radius-card); overflow: hidden; box-shadow: 0 1px 3px rgba(11, 30, 79, .08); transition: transform .2s ease, box-shadow .2s ease; } .block_totara_catalog .tui-learningCard:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(11, 30, 79, .16); } /* the "Course" / "Resource" chip sits on the image, white on unknown photo */ .block_totara_catalog .tui-learningCard__hero-label { background: rgba(6, 22, 60, .72); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } /* the type line under each card title renders a muted brown by default */ .block_totara_catalog .tui-learningCard__title + *, .block_totara_catalog .tui-learningCard__subtitle { color: var(--jb-muted) !important; } /* the rows reserve a screenful even with three cards in them */ .block_totara_catalog .tui-cardScroller__cardsBox { min-height: 0 !important; } /* The scroller does not clip its own row, so the last card overhangs by ~6px and makes the whole PAGE scroll horizontally (measured: scrollWidth 1606 vs innerWidth 1600 on the ActivityTypes dashboard). The cards box is the scroller's viewport — the arrows translate the container inside it — so clipping here is correct and leaves paging intact. */ .block_totara_catalog .tui-cardScroller__cardsBox { overflow-x: hidden; } /* ---------- 3. Manager: compliance stat cards ---------- */ .tui-block_compliance_ComplianceCurrentReportStatCard { border-radius: var(--jb-radius-block) !important; border: 1px solid var(--jb-line) !important; background: var(--jb-surface) !important; box-shadow: none !important; } .tui-block_compliance_ComplianceCurrentReportStatCard__label { color: var(--jb-muted) !important; font-size: 12.5px !important; font-weight: 600; letter-spacing: .02em; } .tui-block_compliance_ComplianceCurrentReportStatCard__body-value { color: var(--jb-indigo-ink) !important; font-weight: 700 !important; letter-spacing: -.02em; } /* ---------- 4. Manager: team skill proficiency bars ---------- Measured defaults: track #f5f5f5 (near-invisible) and a success fill of rgb(75,126,43) — an off-palette green. Bring both into the system. */ .block_totara_competency_proficiency_gap .tui-progress, .tui-block_totara_competency_proficiency_gap-competencyGapTable__progress-proficiencyBar { background: #E6E6E6 !important; border-radius: 999px !important; overflow: hidden; } .block_totara_competency_proficiency_gap .tui-progress__bar, .block_totara_competency_proficiency_gap .tui-progress__bar--success { background: var(--jb-indigo) !important; border-radius: 999px !important; } .block_totara_competency_proficiency_gap a { font-weight: 600; } /* ---------- 5. Manager: "View My Team" reads as a link, not an action ---------- */ .block_totara_my_team_nav .content.block-content { padding: 14px !important; } .block_totara_my_team_nav .content.block-content > a { display: inline-flex; align-items: center; gap: 9px; background: var(--jb-indigo); color: #ffffff !important; border-radius: 999px; padding: 9px 20px; font-weight: 600; font-size: 14px; text-decoration: none !important; } .block_totara_my_team_nav .content.block-content > a:hover { background: var(--jb-indigo-deep); } .block_totara_my_team_nav .content.block-content > span { display: inline-block; margin-left: 10px; color: var(--jb-muted); font-size: 13px; } /* ---------- 6. Core Competencies: the 8 html blocks become real cards ---------- They ship as bare width-25 html blocks in `main`, so the icon, heading, body and category line run together with nothing containing them. */ .block_html.width-25 { background: #ffffff !important; border: 1px solid var(--jb-line) !important; border-radius: var(--jb-radius-card) !important; box-shadow: 0 1px 3px rgba(11, 30, 79, .06) !important; padding: 4px !important; box-sizing: border-box; } .block_html.width-25 .content.block-content { padding: 20px !important; } .block_html.width-25 h3 { margin: 0 0 12px !important; } .block_html.width-25 h3 img { height: 72px !important; width: auto !important; } .block_html.width-25 h4, .block_html.width-25 .no-overflow > h3 + * { margin-top: 0; } .block_html.width-25 p { font-size: 14px; line-height: 1.55; color: #3C3C3C; } /* the "Delivery-related – Achieving Results" category line */ .block_html.width-25 p > strong, .block_html.width-25 strong:last-child { display: inline-block; margin-top: 6px; font-size: 12px; letter-spacing: .02em; color: var(--jb-indigo-ink); } /* ---------- 7. Manager: the resources carousel in the narrow rail ---------- */ [data-blockregion="side-post"] .block_carousel figure.tile .caption .title-wrap { padding: 22px 12px 10px !important; } [data-blockregion="side-post"] .block_carousel figure.tile .caption .title-wrap h3 { font-size: 14px !important; } /* ---------- 8. Isotope on the manager dashboard ---------- */ .block_isotope .isotope-description { max-width: 640px; } /* ---------- 9. Responsive ---------- */ @media (max-width: 1100px) { .block_html.width-25 { flex: 0 0 50% !important; max-width: 50% !important; } } @media (max-width: 700px) { .block_html.width-25 { flex: 0 0 100% !important; max-width: 100% !important; } #inst916 .item__text-container, #inst930 .item__text-container { background: linear-gradient(90deg, rgba(6, 22, 60,.90) 0%, rgba(6, 22, 60,.78) 100%) !important; } } /* ---------- 10. Upcoming Events sub-page dashboard (id 42) ---------- Reached from the main menu (My Learning > Upcoming Events); deliberately LAST in dashboard sort order so it is nobody's landing page. Layout: the "My booked events" report (width-66) beside the Upcoming events list (width-33). Scoped with :has() so no other dashboard's main region is turned into a grid. */ [data-blockregion="main"]:has(> .block_totara_report_table):has(> .block_calendar_upcoming) { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; } [data-blockregion="main"]:has(> .block_totara_report_table):has(> .block_calendar_upcoming) > .block { width: 100% !important; max-width: 100% !important; flex: none !important; margin-bottom: 0 !important; min-width: 0; } [data-blockregion="main"]:has(> .block_totara_report_table):has(> .block_calendar_upcoming) > .block_totara_report_table { grid-column: 1; } [data-blockregion="main"]:has(> .block_totara_report_table):has(> .block_calendar_upcoming) > .block_calendar_upcoming { grid-column: 2; } /* the "My Dashboards" block the new dashboard ships with drops below both */ [data-blockregion="main"]:has(> .block_totara_report_table):has(> .block_calendar_upcoming) > .block_totara_dashboard { grid-column: 1 / -1; } /* the report table needs to breathe and scroll on its own, not push the page */ .block_totara_report_table .content.block-content { overflow-x: auto; } .block_totara_report_table table { width: 100%; } /* ---------- 11. Upcoming Events polish ---------- */ /* Equal halves: the report needs less width than 2fr and the events list was left as a single 7-card column next to a mostly-empty half. */ [data-blockregion="main"]:has(> .block_totara_report_table):has(> .block_calendar_upcoming) { grid-template-columns: 1fr 1fr; } /* flow the event cards 2-up so the column height roughly matches the report */ .block_calendar_upcoming.jb-events .content.block-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; align-content: start; } .block_calendar_upcoming.jb-events .event { margin: 0 !important; padding: 11px 13px !important; } /* the markup forces a line break before the end time — keep it on one line */ .block_calendar_upcoming .event .date br { display: none; } .block_calendar_upcoming .event .date strong { font-weight: 400; } .block_calendar_upcoming .event .date { font-size: 12px; margin: 3px 0 8px !important; } .block_calendar_upcoming .event > a { font-size: 13.5px; } /* "Booked" ships as .label-default (grey #64717D) — brand it */ .block_calendar_upcoming .event .label.label-default { float: none !important; display: inline-block; background: rgba(4, 81, 228, .12) !important; color: var(--jb-indigo-ink) !important; border-radius: 999px; padding: 3px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; } /* the "Go to calendar / New event" links span the grid */ .block_calendar_upcoming.jb-events .content.block-content > a { grid-column: 1 / -1; } /* give the report table a card surround to match */ .block_totara_report_table .content.block-content > .no-overflow, .block_totara_report_table table { border-radius: 10px; overflow: hidden; } /* ============================================================ jb-demo — MINDTOOLS KINEO BRAND LAYER Layout reference stays MYOB Academy (a Totara site, so its dashboard patterns transfer). BRAND comes from mindtools-kineo.com: Primary indigo #0451E4 (confirmed live on mindtools-kineo.com) Deep indigo #0340B4 Indigo tint #DCE7FC / #E6EEFD Teal tint #E3F4EA Lime tint #F0F0F0 Amber tint #F0F0F0 Neutrals #F6F6F6 / #EDEDED / #E6E6E6 Headings BLACK, large, tight tracking Devices the "wave" (squiggle) over photography, and a hand-drawn UNDERLINE under a key phrase The brand face is F37 Gruffy. It is a licensed font and is NOT in the brand-asset pack, so the site keeps Libre Franklin; swap it here if a web licence is obtained. ============================================================ */ :root { --mtk-indigo: #0451E4; --mtk-indigo-deep: #0340B4; --mtk-indigo-tint: #DCE7FC; --mtk-teal-tint: #E3F4EA; --mtk-lime-tint: #F0F0F0; --mtk-amber-tint: #F0F0F0; --mtk-ink: #000000; --mtk-underline-orange: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1cAAABeCAYAAADPJe6lAAAESElEQVR42u3c23HTQBSA4bVxGdAFhThdJCkIyqAQp4qEMtAcHog9OJYlrS6rS77vhZlY1thLcjb/LCYlAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYJ12U9z0cHyN+49Gxp0i48sj3Lfp2pjovp0ui+neV6eHJl7bTk+b6DVEgfe2hPVtfeqG1vfm4UI/P1F4beecTVH4e/f9S2F9p30NxfZWs9/sX9LsX9v6RsZttzH7p3xv1elx9BYa5YbNMSWuxJUN1gYrrvzyL67Eldlv9osrcbXsvXWM2Bp0g8PxLYovsrgSVzZYG6y4ElfWV1yZ/Wa/uBJXE72G6vTUu5F6PfHw8B5Vm98AxJW4ssGKK3ElrsSVuDL7xZW4+kxxdf6jesmPrKwnXKLq02wA4kpc2WDFlbgSV+JKXJn94kpcfca4OsuJrH3vsAIAANi4L99/du6gTnElrAAAAIE1MK6EFQAAILDaA2svrAAAAIYH1l5YAQAADA+sfX1Y/RZWAAAAtYH1IzrFlbACAADID6y9ZQEAABjuKq6cWgEAAHTz8fTKyRUAAMAILnHl1AoAACDP/6dXTq4AAABGsE/JqRUAAEBf59MrJ1cAAAAjEFcAAADiCgAAYBl29z9v1eFjWJFxbRrx2pjovk3XRqH3VntZlFvb2ocK/P3GDGubUkpR+Ht3rvVtfeqG1vfm4UI/P1F4beecTXPM/rh3B+u7vr3V7Df7lzT717a+kXHbbcz+te2tTq4AAABGIK4AAADEFQAAgLgCAAAQVwAAAIgrAAAAcQUAACCuAAAAthhXf3593VkGAACA/qqX552TKwAAgBGIKwAAAHEFAACwoLjyuSsAAIB+qpfn3SWuAAAAGOYSV06vAAAA8pxPra7iCgAAgP6u4srpFQAAQDf/n1rdxBUAAAD93MSV0ysAAIBmH0+tauNKYAEAAOSF1d24+hdY3wQWAADAVVg93e2kxs9cCSwAAID2sGqNK4EFAADQHlad4kpgAQAAwqpd5/+KXWABAADC6r5ewXR4eIuUUkpx/kpkPHuEa2Oi+zZdG4XeW+1lUW5tax8q8PcbM6xtSilF4e/duda39akbWt+bhwv9/EThtZ1zNs0x++PeHazv+vZWs9/sX9LsX9v6RsZttzH759xbc6JqUFxdIuv4FsUXWVyJKxusDVZciSvrK67MfrNfXImriV5DdXrq3Uij/FO/w/E1iv4QiStxZYO1wYorcWV9xZXZb/aLK3E14muoTo+D22iSz1E1x5a4Elc2WBusuPLLv7gSV2a/2S+uxNW8e+sYMQUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACL8BeImoxhHjEZkwAAAABJRU5ErkJggg=="); --mtk-underline-purple: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1cAAABeCAYAAADPJe6lAAACTklEQVR42u3bQa6CUAxA0UfjMtiUK2VTLoNERyaGL4K0Jvy8c8bQQWc3zWsNAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+J+GXwy9XG93qwUAAM5qnsbyFioZKKYAAIDeYys1QFQBAAAiKxFXogoAABBZibgSVQAAgMh6L4QVAABAvoOieiAAAECPgRVVgwAAAHoOrBBWAAAA+cAKYQUAAJAPrBBWAAAA+cAKYQUAAJAPrLAWAACAvNiqLwAAAP5a9pPLFQAAQIFYqy4AAAA+e+0olysAAIACsawtAAAA9nv2lMsVAABAAXEFAAAgrgAAAM5h8N4KAAAgz+UKAABAXAEAAIgrAAAAcQUAAIC4AgAAEFcAAADiCgAAQFwBAADwNq7maRysAQAA4Lh5GgeXKwAAgALiCgAAQFwBAACcKK68uwIAADjm2VMuVwAAAAViWVsAAADs89pRLlcAAAAFYq26AAAAWLfsJ5crAACAArFVXwAAAGx3U+z9EAAAgPVeim9/AAAAEFZfxJXAAgAA2N9HkR0AAADQe1jtiiuBBQAACKttUT0QAACgt7BqrbVDwXS53u7WDAAAiKpkXIksAABAVBXGlcgCAAB6j6rSuBJbAABAbzEFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAp/AASoV6JbDq4dsAAAAASUVORK5CYII="); } /* ---------- 1. The UNDERLINE technique ---------- On mindtools-kineo.com a hand-drawn brush stroke sits under the closing phrase of a heading. Applied here to the dashboard's section heading and to block titles, replacing the flat 3px bar from the earlier pass. The stroke is a PNG with its own gradient, so it is a background-image sized to the text, not a border. */ .jb-sectionhead h2 { display: inline-block; position: relative; color: var(--mtk-ink) !important; padding-bottom: 22px; background-image: var(--mtk-underline-orange); background-repeat: no-repeat; background-position: left calc(100% - 2px); background-size: 100% 14px; } /* block titles that keep a header get the purple stroke, sized to the words */ [data-blockregion^="dash-main"] .block .title.block-title h2, [data-blockregion="main"] .block .title.block-title h2 { display: inline-block; color: var(--mtk-ink) !important; padding-bottom: 16px; background-image: var(--mtk-underline-purple); background-repeat: no-repeat; background-position: left calc(100% - 1px); background-size: 100% 10px; } /* retire the flat bar the previous pass added */ [data-blockregion="side-post"] .block .title.block-title h2::after { display: none !important; } [data-blockregion="side-post"] .block .title.block-title h2 { display: inline-block; padding-bottom: 16px; background-image: var(--mtk-underline-purple); background-repeat: no-repeat; background-position: left calc(100% - 1px); background-size: 100% 10px; } /* ---------- 2. Hero ---------- The banner image is now brand photography with the wave laid over it (brand/hero-banner.jpg, built by build-hero.mjs from the brand pack's "Generic and business" photography + the Bright Purple full wave). The strapline is REAL content now — the gallery image's caption_subheader — so the CSS-injected ::after from the earlier pass is gone. */ #inst1312 .item__text-container__inner::after { content: none !important; } .block_gallery h1.item__text-container__element { color: var(--mtk-ink) !important; } .block_gallery .item__text-container__element:not(h1), .block_gallery .item__text-container__element:not(h1) p { font-size: 16px !important; line-height: 1.5 !important; color: #3C3C3C !important; max-width: 440px; } /* ---------- 3. Buttons are rounded rectangles, not pills ---------- mindtools-kineo.com uses a ~8px radius on its buttons. Small status chips stay pill-shaped — that split is what the brand actually does. */ .btn-primary, body.path-login #loginbtn, body.path-login .loginform button[type="submit"], body.path-login .loginform input[type="submit"], .block_totara_my_team_nav .content.block-content > a, .block_calendar_upcoming .event .pull-right .btn { border-radius: 8px !important; } .btn-primary { background: var(--mtk-indigo); border-color: var(--mtk-indigo); } .btn-primary:hover { background: var(--mtk-indigo-deep); border-color: var(--mtk-indigo-deep); } /* ---------- 4. Brand tints in place of ad-hoc rgba ---------- */ .block_leaderboard.jb-panel .content.block-content > div { background: var(--mtk-teal-tint) !important; } .block_calendar_upcoming .event .label.label-default { background: var(--mtk-indigo-tint) !important; } .label.completed, .label.label-success { background: var(--mtk-teal-tint) !important; color: #00662F !important; } .label.started, .label.label-warning { background: var(--mtk-indigo-tint) !important; color: #0340B4 !important; } /* ---------- 5. The wave as a section flourish ---------- A very light indigo tint band behind the curriculum row, echoing the pale panels the website uses between white sections. */ [data-blockregion="dash-main-three"] { background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FE 22%, #F7F9FE 78%, #FFFFFF 100%); border-radius: 20px; padding-top: 8px !important; padding-bottom: 20px !important; } /* ---------- 6. Carousel row titles ---------- The carousel's visible title is a BARE

directly inside .content.block-content — NOT inside .title.block-title (which only holds the collapse control). The generic block-title selector never matched it. */ .block_carousel > .content.block-content > h2 { display: inline-block; color: var(--mtk-ink) !important; font-size: 24px; font-weight: 700; letter-spacing: -.02em; padding-bottom: 16px; margin-bottom: 6px; background-image: var(--mtk-underline-purple); background-repeat: no-repeat; background-position: left calc(100% - 1px); background-size: 100% 10px; } /* ---------- 7. Hero type spacing ---------- The heading and the caption subheader were butted together. */ .block_gallery .item__text-container__inner { padding: 4px 0; } .block_gallery h1.item__text-container__element { margin: 0 0 14px !important; } /* ============================================================ jb-demo -> master: the five reported fixes Each cause was measured on master at 1280px, not guessed. ============================================================ */ /* ---------- 1. Hero must FLEX at laptop widths ---------- The banner is one composite (white left, photography right) shown with object-fit:cover. The image is 5.18:1 but the frame is only 976x250 (3.9:1) at a 1280px window, so cover crops the sides and the copy ends up over the photo. Rather than fight the crop, guarantee the copy always sits on white: paint a white-to-transparent wash across the text column at EVERY width and anchor the photography to the right. */ #inst1312 .item__text-container { width: 100% !important; max-width: 100% !important; /* pulled back from 42/58/74 — that kept the copy legible but washed the photography almost out of the banner */ background: linear-gradient(90deg, #ffffff 0%, #ffffff 33%, rgba(255, 255, 255, .92) 46%, rgba(255, 255, 255, .42) 62%, rgba(255, 255, 255, 0) 78%) !important; } #inst1312 .item__background-image { object-position: right center !important; } #inst1312 .item__text-container__inner { max-width: 52%; } @media (max-width: 1100px) { /* below this the photo is mostly cropped out anyway — give the copy the full width on a clean white ground instead of a half-visible picture */ #inst1312 .item__text-container { background: linear-gradient(90deg, #ffffff 0%, #ffffff 62%, rgba(255,255,255,.7) 82%, rgba(255,255,255,0) 100%) !important; } #inst1312 .item__text-container__inner { max-width: 68%; } } @media (max-width: 760px) { #inst1312 .item__text-container { background: rgba(255, 255, 255, .93) !important; } #inst1312 .item__text-container__inner { max-width: 100%; } } /* ---------- 2. Required learning must not lose its title ---------- Isotope sizes figure.isotope.item to a fixed 99.56px and clips with overflow:hidden, but a.name measured 146px (container__text 126 + 10px padding each side), so the course title was the part cut off. Shrink the text block to fit the tile rather than change the item height, which would break Isotope's absolute masonry positioning. */ .block_isotope figure.isotope.item a.name { padding: 8px 10px !important; } .block_isotope figure.isotope.item .container__text { line-height: 1.25; } .block_isotope figure.isotope.item .container__text p.item-name { margin: 0 0 4px !important; font-size: 13px !important; line-height: 1.25 !important; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .block_isotope figure.isotope.item .container__text p.req { margin: 0 0 1px !important; font-size: 11px !important; line-height: 1.15 !important; } .block_isotope figure.isotope.item .container__text time.date { display: block; font-size: 11px !important; line-height: 1.15 !important; } /* the tile can be as short as ~91px at some widths — keep the whole text block inside it so the due date is not clipped either */ .block_isotope figure.isotope.item a.name { padding: 7px 10px !important; } /* ---------- 3. Carousel tiles: kill the stray square shadow ---------- article.learning (the tile wrapper) carries the theme's own rgba(0,0,0,.5) 4px 4px 10px drop shadow with SQUARE corners, which shows around the 16px-rounded figure and reads as a smudge. The figure keeps its own soft shadow. */ .block_carousel article.learning, .block_carousel article.learning.has-summary { box-shadow: none !important; border-radius: var(--jb-radius-card, 16px); background: transparent !important; } /* ---------- 4. Nothing escapes a curriculum tile ---------- Do NOT put overflow:hidden on .block_awesome. The block itself has square corners, so clipping there cuts the 16px-rounded card's HOVER SHADOW into a square box. Containment belongs on the rounded element: .awesome-block already clips (overflow:hidden) and the image is absolutely inset to it, so nothing can spill out — measured bleed is 0 from 700px to 1600px. */ .block_awesome { overflow: visible; } .block_awesome .awesome-block.template-2 { overflow: hidden; /* the rounded element does the clipping */ } .block_awesome .awesome-block.template-2 > img { display: block; position: absolute !important; inset: 0 !important; max-width: none !important; max-height: none !important; } /* ---------- 5. Carousel details panel: contain the CTA ---------- The panel's link is a.btn.btn-raised.btn-red — an off-palette red with a raised shadow and no room beneath it, so it sat on the panel edge. */ .block_carousel .learning .btn.btn-raised, .block_carousel .btn.btn-red { background: var(--mtk-indigo, #0451E4) !important; border-color: var(--mtk-indigo, #0451E4) !important; color: #ffffff !important; border-radius: 8px !important; box-shadow: none !important; margin: 0 !important; padding: 9px 18px !important; font-weight: 600; } .block_carousel .learning .btn.btn-raised:hover, .block_carousel .btn.btn-red:hover { background: var(--mtk-indigo-deep, #0340B4) !important; border-color: var(--mtk-indigo-deep, #0340B4) !important; } /* give the expanded summary panel breathing room so the CTA sits inside it */ .block_carousel .learning .summary, .block_carousel .learning [class*="card-details"], .block_carousel .learning .details { padding: 18px 20px 22px !important; border-radius: var(--jb-radius-card, 16px); overflow: hidden; box-sizing: border-box; } /* ---------- 6. A carousel row with no cards should not show ---------- "Upcoming sessions" (facetoface) is enrolment-scoped: a learner who is not booked on any session sees the heading with an empty row beneath it. Hide the whole block until it has at least one tile — it reappears on its own once bookings exist. */ .block_carousel:not(:has(figure.tile)) { display: none !important; } /* ---------- 7. The `main` grid must collapse on mobile ---------- Isotope 67% + Leaderboard/Badges stacked in the remaining third is a DESKTOP layout. The grid and its explicit grid-column/grid-row placements were unconditional, so on a phone the two panels stayed jammed into a narrow second column beside the isotope. Reset placement and go single-column. Applies to the Upcoming Events sub-page grid (report + events) as well. */ @media (max-width: 900px) { [data-blockregion="main"]:has(> .block_leaderboard):has(> .block_badges), [data-blockregion="main"]:has(> .block_totara_report_table):has(> .block_calendar_upcoming) { display: block !important; } [data-blockregion="main"] > .block_isotope, [data-blockregion="main"] > .block_leaderboard, [data-blockregion="main"] > .block_badges, [data-blockregion="main"] > .block_totara_report_table, [data-blockregion="main"] > .block_calendar_upcoming { grid-column: auto !important; grid-row: auto !important; width: 100% !important; max-width: 100% !important; margin-bottom: 20px !important; } /* badges sat two-up in a narrow column; one row of four reads better full width */ .block_badges.jb-panel ul.badges > li { width: calc(33.333% - 14px); } } @media (max-width: 520px) { .block_badges.jb-panel ul.badges > li { width: calc(50% - 10px); } } /* ---------- 8. Skip-links were eating grid cells ---------- Every block region contains accessibility skip elements interleaved with the blocks (a.skip-block and span.skip-block-to). In a CSS grid they are grid ITEMS and consume cells, so on the Upcoming Events page the report and the events list were pushed onto different rows even though the grid was active. Dashboard 31 avoided it only because its three blocks are placed with an explicit grid-column AND grid-row. Take the skip elements out of flow and place these two explicitly as well. */ [data-blockregion="main"] > a.skip-block, [data-blockregion="main"] > span.skip-block-to { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip-path: inset(50%); } [data-blockregion="main"]:has(> .block_totara_report_table):has(> .block_calendar_upcoming) > .block_totara_report_table { grid-column: 1 !important; grid-row: 1 !important; } [data-blockregion="main"]:has(> .block_totara_report_table):has(> .block_calendar_upcoming) > .block_calendar_upcoming { grid-column: 2 !important; grid-row: 1 !important; } [data-blockregion="main"]:has(> .block_totara_report_table):has(> .block_calendar_upcoming) > .block_totara_dashboard { grid-column: 1 / -1 !important; grid-row: 2 !important; } /* ============================================================ §9 Course card titles slice the third line Reported on /totara/program/required.php (Required Learning); the same core_course card renders on /totara/program/view.php and elsewhere. Measured: .tui-core_course-courseCard__title is a fixed 63px box against a 24px line-height — 2.625 lines. Its -webkit-line-clamp: 3 does clamp, so the browser lays out three lines and ellipsises the rest; the box then clips the third line horizontally through the middle of the glyphs. Hence "the third line is cut off" while short titles look fine. So the height is the whole defect: 72px = 3 x 24px. The third line now sits fully inside the box and the ellipsis is visible. Type measured identical (18px/24px) at 390-1600px, so the pixel height is safe across breakpoints. Note the clamp cannot be re-declared here: the title's parent (.tui-core_course-courseCard__content) is display:flex/column, so the title is a flex item and display:-webkit-box blockifies to flow-root — verified by setting it !important inline on the live element. Leave the component's own clamp alone and fix only the box. ============================================================ */ .tui-core_course-courseCard__title--limitHeight { height: 72px !important; /* 3 whole lines, was 63px = 2.625 */ max-height: 72px !important; overflow: hidden !important; } /* ============================================================ master — LOGIN PAGE (Tui / core_auth markup) master renders Totara's TUI login, not the legacy one, so the jb-demo split-screen stylesheet (.loginbox.twocolumns / .loginpanel / #login_hero-image) matches nothing here. This is the same design rebuilt against the real Tui DOM, which is already a two-panel layout: .tui-core_auth-loginLayout--hasBackground > __panels > __panel-interface (left: nav + form) > .tui-core_auth-loginNav > a.__logo > img.__image > __contentWrap > __main > .tui-core_auth-login > h1.tui-core_auth-login__title > a.tui-core_auth-stackChooser__option (Microsoft SSO) > form.tui-form ... input.tui-formInput > button.tui-btn--variant-primary > __panel-graphic (right: background-image) The right panel's image is the setting totara_core/default_login_background (NOT default_login, which is the legacy hero) — now the brand photo + wave. ============================================================ */ /* ---------- Layout: two true halves, full height ---------- */ body#page-login-index .tui-core_auth-loginLayout__panels { display: flex !important; flex-direction: row !important; align-items: stretch !important; min-height: 100vh; } body#page-login-index .tui-core_auth-loginLayout__panel-interface { /* must match the graphic panel's 50% exactly — at 48% a 29px strip of page background showed between the two halves, because the graphic is position:fixed at 50% and does not flex */ flex: 0 0 50% !important; max-width: 50% !important; background: #0451E4 !important; /* white on #0451E4 = 4.99:1, AA */ display: flex; flex-direction: column; } /* The graphic panel is position:FIXED (it stays put while the form column scrolls), so it is outside the flex flow and flex sizing has no effect on it. Position it explicitly instead. */ body#page-login-index .tui-core_auth-loginLayout__panel-graphic { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; width: 50% !important; max-width: 50% !important; height: 100vh !important; min-height: 100vh !important; background-size: cover !important; background-position: 50% 30% !important; background-repeat: no-repeat !important; } body#page-login-index .tui-core_auth-loginLayout__contentWrap { flex: 1 1 auto; display: flex; align-items: center; } body#page-login-index .tui-core_auth-loginLayout__main { width: 100% !important; max-width: 430px; margin: 0 auto !important; padding: 0 8px !important; /* the theme puts min-height:100vh on __main as well as on __panels, so the 84px nav + 900px main + 76px footer made the PAGE 1148px tall against ~600px of form. That surplus is what showed as a white band under the indigo column and under the position:fixed graphic. Let the form size itself and the page settles at exactly one viewport. */ min-height: 0 !important; } /* ---------- The site logo is black artwork: knock it out to white ---------- The nav carries its OWN white background, which rendered as a white band above the indigo panel and made the white-knocked logo invisible on it. */ body#page-login-index .tui-core_auth-loginNav { padding: 34px 40px 0 !important; background: transparent !important; } body#page-login-index .tui-core_auth-loginNav__image { filter: brightness(0) invert(1); max-width: 190px; height: auto; } /* ---------- Type ---------- */ body#page-login-index .tui-core_auth-login__title { color: #ffffff !important; font-size: 42px !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: -.02em; margin: 0 0 6px !important; } body#page-login-index .tui-core_auth-login__title::after { content: 'Continuá tu aprendizaje donde lo dejaste.'; display: block; margin-top: 12px; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: rgba(255, 255, 255, .84); } /* White copy on the indigo — but NOT inside the primary button, whose own label lives in a child div (.tui-btn__wrap). A blanket div/span rule turned that white and the button read as an empty white pill. */ body#page-login-index .tui-core_auth-login, body#page-login-index .tui-formRow__label, body#page-login-index .tui-formLabel, body#page-login-index label, body#page-login-index .tui-core_auth-login p, body#page-login-index .tui-core_auth-login span:not(.tui-btn--variant-primary *), body#page-login-index .tui-core_auth-login div:not(.tui-btn--variant-primary *) { color: #ffffff !important; } body#page-login-index .tui-formRow__label, body#page-login-index .tui-formLabel { font-weight: 600 !important; font-size: 13px !important; } /* ---------- Inputs ---------- */ body#page-login-index .tui-formInput, body#page-login-index input.tui-formInput { background: #ffffff !important; color: #222222 !important; border: 1px solid #ffffff !important; border-radius: 8px !important; box-shadow: none !important; } body#page-login-index .tui-formInput:focus { outline: 3px solid rgba(255, 255, 255, .55) !important; outline-offset: 1px; } body#page-login-index .tui-checkbox__label, body#page-login-index .tui-formBtn { color: #ffffff !important; } /* ---------- Primary action: white on indigo, 8px like the brand site ---------- */ body#page-login-index .tui-btn--variant-primary { background: #ffffff !important; border-color: #ffffff !important; color: #0451E4 !important; border-radius: 8px !important; font-weight: 700 !important; box-shadow: none !important; transition: transform .15s ease, box-shadow .15s ease; } body#page-login-index .tui-btn--variant-primary:hover { background: #ffffff !important; color: #0340B4 !important; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); } /* ---------- Microsoft SSO option ---------- */ body#page-login-index .tui-core_auth-stackChooser__option { background: rgba(255, 255, 255, .10) !important; border: 1px solid rgba(255, 255, 255, .45) !important; border-radius: 8px !important; color: #ffffff !important; font-weight: 600; } body#page-login-index .tui-core_auth-stackChooser__option:hover { background: rgba(255, 255, 255, .20) !important; } body#page-login-index .tui-core_auth-stackChooser__option * { color: #ffffff !important; } /* the divider between SSO and the username form */ body#page-login-index .tui-core_auth-login hr, body#page-login-index .tui-separator { border-color: rgba(255, 255, 255, .28) !important; } /* ---------- Links and small print ---------- */ body#page-login-index .tui-core_auth-login a, body#page-login-index .tui-btn--variant-link { color: #ffffff !important; text-decoration: underline; text-underline-offset: 2px; } body#page-login-index .tui-core_auth-login a:hover { color: #E6EEFD !important; } body#page-login-index .tui-core_auth-loginLayout__panel-interface .tui-core_auth-poweredBy, body#page-login-index .tui-core_auth-loginLayout__panel-interface [class*="poweredBy"] { color: rgba(255, 255, 255, .7) !important; } body#page-login-index .tui-core_auth-loginLayout__panel-interface [class*="poweredBy"] a { color: rgba(255, 255, 255, .9) !important; } /* ---------- Responsive: photo on top, form below ---------- */ @media (max-width: 900px) { body#page-login-index .tui-core_auth-loginLayout__panels { flex-direction: column !important; min-height: 0; } /* take it OUT of fixed positioning on mobile — left fixed with flex:none it collapsed to 0x0 and the photo disappeared entirely */ body#page-login-index .tui-core_auth-loginLayout__panel-graphic { /* the theme sets display:none here — it drops the photography entirely on a phone, leaving a bare indigo screen. Bring it back as a banner. */ display: block !important; position: relative !important; top: auto !important; right: auto !important; order: 1; flex: none !important; width: 100% !important; max-width: 100% !important; height: 30vh !important; min-height: 30vh !important; background-position: 50% 28% !important; } body#page-login-index .tui-core_auth-loginLayout__panel-interface { order: 2; flex: none !important; max-width: 100% !important; padding-bottom: 32px; } body#page-login-index .tui-core_auth-login__title { font-size: 34px !important; } } /* belt-and-braces: the primary button's label is always indigo on white */ body#page-login-index .tui-btn--variant-primary, body#page-login-index .tui-btn--variant-primary * { color: #0451E4 !important; } body#page-login-index .tui-btn--variant-primary:hover, body#page-login-index .tui-btn--variant-primary:hover * { color: #0340B4 !important; } /* give the action a bit more presence than the theme's 36px */ body#page-login-index .tui-btn--variant-primary { padding: 10px 24px !important; font-size: 15px !important; } /* The layout can compute taller than its content (interface panel measured 1148px against ~700px of content), which let the white page background show as a band beneath the indigo. Back the page with the same 50/50 split so any surplus height is seamless at every viewport height. */ body#page-login-index { background: linear-gradient(90deg, #0451E4 0 50%, #ffffff 50% 100%) !important; } @media (max-width: 900px) { body#page-login-index { background: #0451E4 !important; } } /* ---------- Footer ---------- .tui-core_auth-footer paints its OWN white background, which read as a white band across the bottom of the indigo column (72px on desktop, and a full-width strip on mobile where the footer sits below the form). Measured white on both breakpoints; clear it and lift the "Powered by" text off the indigo. */ body#page-login-index .tui-core_auth-footer { background: transparent !important; border-top: none !important; } body#page-login-index .tui-core_auth-footer, body#page-login-index .tui-core_auth-footer * { color: rgba(255, 255, 255, .72) !important; } body#page-login-index .tui-core_auth-footer a { color: rgba(255, 255, 255, .92) !important; } body#page-login-index .tui-core_auth-footer img { filter: brightness(0) invert(1); opacity: .8; } /* ============================================================ YPF — CAPA DE MARCA ============================================================ */ :root { --ypf-azul: #0451E4; --ypf-azul-oscuro: #0340B4; --ypf-noche: #0B1E4F; --ypf-gris-1: #E6E6E6; --ypf-gris-2: #AAAAAA; --ypf-gris-3: #3C3C3C; } /* Titulares grandes en condensada (el manual usa DIN Condensed para títulos) */ .jb-sectionhead h2, .block_carousel > .content.block-content > h2, .block_gallery h1.item__text-container__element, body#page-login-index .tui-core_auth-login__title, body.path-login .loginpanel h2 { font-family: 'Barlow Condensed', Barlow, Arial, sans-serif !important; font-weight: 700 !important; letter-spacing: 0 !important; } /* Login: plano de color azul YPF con degradé a azul noche (manual 1.2 Resumen visual) */ body#page-login-index .tui-core_auth-loginLayout__panel-interface, body.path-login .loginbox.twocolumns { background: linear-gradient(165deg, #0451E4 0%, #0340B4 55%, #0B1E4F 100%) !important; } body#page-login-index { background: linear-gradient(90deg, #0B1E4F 0 50%, #ffffff 50% 100%) !important; } @media (max-width: 900px) { body#page-login-index { background: #0B1E4F !important; } } /* el logo del login se muestra en blanco (negativo sin soporte, manual 2.4) */ body#page-login-index .tui-core_auth-loginNav__image { max-width: 140px; } /* Links: subrayado al hover para no depender sólo del color (accesibilidad) */ #page-content a:not(.btn):not([class*="tui-btn"]):hover { text-decoration: underline; } @font-face { font-family: 'gothamblack'; src: url('@font:gotham-black-webfont.woff') format('woff') font-weight: normal; font-style: normal; }