: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{--nav-bg-color: #fafafa;--nav-text-color: #262626;--nav-selected-color: #ED1C24;--color-primary: #ED1C24;--color-state: #000000;--color-text: #262626;--footer-bg-color: #ffffff;--footer-text-color: #262626;--color-state-hover: #000000;--color-state-focus: #000000;--color-state-active: #000000;--footer-text-color-hover: #1c1c1c;} /*================================================== VARIABLES FOR COMMON THEME EDITS ==================================================*/ :root { /*NAVIGATION AREA */ --logo-size: 1.8rem; --nav-bottom-colored-border: 10px solid #000000; /*MY LEARNING/DASHBOARD CUSTOM HEADING BLOCKS*/ --custom-dasbhoards-heading-block-background-color: #000000; --custom-dasbhoards-heading-block-secondary-background-color: #ED1C24; /*BLOCKS - TOP ACCENT BORDER*/ --blocks-top-accent-border: none; /*default: 4px solid #262626*/ --blocks-box-shadow: none; /*default: 0 2px 10px rgba(0, 0, 0, 0.08)*/ --blocks-border: none; /*FRONTPAGE: FEATURED LINKS SQUARE TILES BLOCK WITH ICONS AND COLORED TOP HALF*/ --front-page-featured-links-icon-nav-blocks: #000000; /*FRONT PAGE: CUSTOM BANNER WITH BACKGROUND IMAGE, TEXT AND BUTTON BLOCK*/ /*Font color*/ --banner-with-background-image-font: #ffffff; /*Button style*/ /*Button colors*/ --banner-with-background-image-button-color: #ffffff; --banner-with-background-image-button-font-color: #2f9946; /*FRONTPAGE: CUSTOM SOLID BANNER WITH TEXT, BUTTON AND RIGHT-ALIGNED IMAGE BLOCK*/ /*Solid Background banner color*/ --solid-background-banner-background-color: transparent; /*transparent=no background color*/ /*Solid Background banner heading and subheading font*/ --solid-background-banner-heading-size: 2.5rem; --solid-background-banner-heading-weight: 700; --solid-background-banner-heading-color: #000000; --solid-background-banner-paragraph-size: 1.2rem; --solid-background-banner-paragraph-color: #000000; /*Solid Background banner Button colors*/ --solid-background-banner-button-color: #ED1C24; --solid-background-banner-font-color: #ffffff; /*Image max-width*/ --solid-background-banner-image-width: 350px; /*FRONTPAGE: CUSTOM BURB WITH IMAGE BLOCK*/ --blurb-background-color: #2B415C; --blurb-font-color: #ffffff; --blurb-heading-font-size: 1.5rem; --blurb-paragraph-font-size: 1.1rem; --blurb-width: 100%; --blurb-logo-width: 100%; /*FRONTPAGE: STANDARD FEATURED LINKS WITH LANDSCAPE TILES AND ICONS*/ /*Background color*/ --standard-featured-links-landscape-tiles-background-color: #184c85; /*Icon and Font*/ --standard-featured-links-landscape-tiles-font-icon-colors: #ffffff; } /*========================================================= END OF VARIABLES FOR EASY THEME EDITS. DO NOT EDIT EXISTING CODE BELOW. =========================================================*/ /*==================================================================== ===================================================================== START - CUSTOM TEMPLATED CSS ===================================================================== ====================================================================*/ h1, h2, h3 { font-family: Arial, Helvetica, sans-serif !important; font-size: 1.1rem !important; font-weight: 600 !important; } #page-header { margin-bottom: 0; } .page-heading h1 { font-weight: normal; margin-top: 20px; margin-bottom: 0px; } .totaraNav_prim { padding: var(--gap-4) 0; } .totaraNav_prim .masthead_logo--header_img { height: 2rem; } .block-content a { font-weight: 600; } .page-footer-poweredby { margin: 0 auto; } /*================================================== START Top Navigation Customizations - DO NOT DELETE ==================================================*/ /*Site logo size*/ .totaraNav_prim .masthead_logo--header_img { height: var(--logo-size) !important; } /*---Top Nav bottom border---*/ .totaraNav { border-bottom: var(--nav-bottom-colored-border); box-shadow: var(--shadow-2); margin-bottom: 0; } /*Adds a top accent border to standard Totara blocks*/ .block { background-color: transparent !important; border: var(--blocks-border) !important; border-top: var(--blocks-top-accent-border) !important; box-shadow: var(--blocks-box-shadow); border-radius: 4px; margin-bottom: 20px; padding: 10px !important; } /*REMOVES sleek drop shadown and top accent border from specific frontpage and other blocks*/ .banner-with-text-and-image-template, .frontpage-featured-blocks, .my-learning-header, .manager-dashboard, .contract-sg-banner, .apex-space-banner, .front-page-blurb, .image-background-banner, .apex-blurb, .featured-links-background-images, .banner-with-background-image, .featured-links-landscape-with-icons, .food-services-catalog-banner { background-color: transparent !important; border-top: none !important; box-shadow: none !important; } #inst277.block_calendar_upcoming.block.chromeless { border-top: none !important; } /*---Hide Front page title---*/ body#page-site-index .page-heading { display: none !important; } /*My Learning and Manager Dashboards custom heading block background color*/ .my-learning-page-header-block, .manager-page-header-block { background-color: var(--custom-dasbhoards-heading-block-background-color) !important; } /*================================================== END Top Navigation Customizations ==================================================*/ /*================================================== START DASHBOARD CUSTOMIZATIONS ==================================================*/ #page-totara-dashboard-1 .page-heading h1, #page-totara-dashboard-2 .page-heading h1 { display: none !important; } /*---MY LEARNING PAGE - SIDEBAR BLOCK SPACING ETC---*/ /*my learning page sidebar block font customizations*/ #page-totara-dashboard-4 h3, #page-totara-dashboard-3 h3 { font-weight: normal; } #page-totara-dashboard-4 .block .content p { font-weight: normal; } #page-totara-dashboard-4 .block .block-header h2 { font-size: 1.4em; } /*What's coming up block higher and closer to the block above it*/ .what-up.block { margin-bottom: var(--gap-0) !important; } .what-up.block.chromeless .content { padding-bottom: 0 !important; } /*Podcasts block higher and closer to the block above it*/ .podcasts.block.chromeless .content { padding-top: 0 !important; } /*Tip of the Day block higher and closer to the block above it*/ .tip-of-day.block.chromeless .content { padding-top: 0 !important; } /*Earned Badges block higher and closer to the block above it*/ .earned-badges.chromeless .content { padding-top: 0 !important; } /*Earned Certificates block higher and closer to the block above it*/ .earned-certificates.chromeless .content { padding-top: 0 !important; padding-bottom: 0 !important; } /*================================================== END DASHBOARD CUSTOMIZATIONS ==================================================*/ /*================================================== START ADDITIONAL GLOBAL CUSTOMIZATIONS - DO NOT DELETE ==================================================*/ /*Frontpage title - hide*/ #page-site-index .page-heading h1 { display: none; } /*---All frontpage banners HTML block content full width----*/ .frontpage-banner .block.chromeless .content { width: 100%; } /*home page remove extra space below banner image and featured blocks*/ .pagelayout-frontpage #region-top .block, .pagelayout-dashboard #region-top .block { margin-bottom:0; } /*---Featured links blocks sizing---*/ .block-totara-featured-links-layout.align-center div.block-totara-featured-links-tile, .block-totara-featured-links-layout.align-right div.block-totara-featured-links-tile, .block-totara-featured-links-layout.align-justified div.block-totara-featured-links-tile { flex-grow: 1 !important; } /*-- MINI PROFILE CUSTOMIZATIONS--*/ /*compentency profile page enlarge name of user located next to their profile pic*/ .tui-competencyProfile__header .tui-miniProfileCard__row-text--bold { font-size: 2em; line-height: 1.3em; display: flex; align-items: center; height: 39px; } .tui-competencyProfile__header .tui-miniProfileCard__row-link--bold { font-size: 2em; line-height: 1.3em; display: flex; align-items: center; height: 39px; } /*Workspace members - enlarge user and profile pic*/ .tui-workspaceMemberCard__profileCard .tui-miniProfileCard__row-text--bold { font-size: 1em; line-height: 1.2em; display: flex; align-items: center; height: 39px; } .tui-workspaceMemberCard__profileCard .tui-miniProfileCard__row-link--bold { font-size: 1em; line-height: 1.2em; display: flex; align-items: center; height: 39px; } /*--Seminar instance names---*/ .instancename { font-weight: 700; font-size: 1.1rem; vertical-align: middle; margin-left: 5px; } /*================================================== END ADDITIONAL GLOBAL CUSTOMIZATIONS - DO NOT DELETE ==================================================*/ /*==================================================================== ----------------------------------CUSTOM REUSABLE BLOCKS---------------------------------- ====================================================================*/ /*============================================================= START Custom BANNER WITH BACKGROUND IMAGE- DO NOT DELETE Title + text + action button + background image =============================================================*/ /*IMPORTANT NOTE ABOUT CHANGING THE BLOCK'S BACKGROUND IMAGE: The background image URL has to be edited in the actual custom HTML block's html code and cannot be added here. To change the background image in the custom banner-with-background-image block: 1. Edit the block in HTML view by clicking the <> button in the Atto text editor., then add an X at the very bottom of the code (below the last in the exsiting code. 2. Exit the HTML view of the block by clicking the <> button in the Atto text editor again. 3. Highlight the X that you added below the banner in the block. 4. Click the Insert image button in the Atto text editor, then locate and insert your new background image. (The image will appear below the banner which is normal.) 5. Return to HTML view by clicking the <> button in the Atto text editor. 6. Highlight ONLY the src URL to the new image code that was added below the last of the existing code. 7. Highlight and replace the only the existing background image URL located at the top of the original block code. Note: it is the URL located between the two "$quot;" text of the backgroud: url parenthesis. 8. Delete any existing code that was added when the new image was added that is located below the last of the original block code. 9. Click the Save changes button at the bottom of the page. */ /*Banner customizations*/ .banner-with-background-image { background: no-repeat top; color: var( --banner-with-background-image-font); border-radius: 16px; overflow: hidden; width: 100%; margin: 0; } /*Banner button customizations*/ .banner-with-background-image-btn { background-color: var(--banner-with-background-image-button-color) !important; color: var(--banner-with-background-image-button-font-color) !important; display:inline-block; padding:0.8rem 2rem; border-radius:10px; font-weight:600; text-decoration:none; margin-top:1.5rem } .banner-with-background-image-btn:hover { /*Button hover colors*/ --banner-with-background-image-button-hover-color: #ffffff; --banner-with-background-image-button- font-hover-color: #2f9946; } /*============================================================= END Custom BANNER WITH BACKGROUND IMAGE- DO NOT DELETE =============================================================*/ /*================================================================ START Custom SOLID BANNER WITH BUTTON AND IMAGE - DO NOT DELETE Title + text + action button + right-aligned image =================================================================*/ .custom-banner{ width:100%; background: var(--solid-background-banner-background-color); border-radius:16px; overflow:hidden; margin: 10px 0px 0px 0px; } .custom-banner-container{ max-width:1200px; margin:0 auto; padding:3rem 2rem; } .custom-banner-content{ color:#fff; } .custom-banner-content h1{ margin:0 0 1rem; color: var(--solid-background-banner-heading-color); font-size: var(--solid-background-banner-heading-size) !important; font-weight: var(--solid-background-banner-heading-weight); line-height:1.15; } .custom-banner-content p{ margin:0 0 2rem; color: var(--solid-background-banner-paragraph-color); font-size: var( --solid-background-banner-paragraph-size);; font-style:italic; line-height:1.6; } .custom-banner-btn{ display:inline-block; padding:.9rem 2.2rem; background: var(--solid-background-banner-button-color); color: var(--solid-background-banner-font-color); text-decoration:none; border-radius:10px; font-weight:600; transition:.25s; } .custom-banner-btn:hover{ color: #ffffff !important; text-decoration: none !important; opacity: 0.85; } /*==Custom banner image==*/ .custom-banner-image-wrapper{ display:flex; justify-content:flex-end; align-items:center; max-width: var(--solid-background-banner-image-width) !important; } .custom-banner-image{ display:block; width:100%; height:auto; /*border-radius: 0px 50px 0px 50px;*/ /*create or adjust banner image shape*/ } /*==Custom banner responsiveness==*/ @media (max-width:991px){ .custom-banner-container{ padding:2rem; } .custom-banner-content{ text-align:center; } .custom-banner-content h1{ font-size:2.2rem; } .custom-banner-image-wrapper{ justify-content:center; margin-top:2rem; } .custom-banner-image{ max-width:450px; } } @media (max-width:576px){ .custom-banner{ border-radius:12px; } .custom-banner-container{ padding:1.5rem; } .custom-banner-content h1{ font-size:1.8rem; } .custom-banner-content p{ font-size:1rem; } .custom-banner-btn{ display:block; width:100%; text-align:center; } .custom-banner-image{ max-width:100%; } } /*================================================================ END Custom SOLID BANNER WITH BUTTON AND IMAGE - DO NOT DELETE =================================================================*/ /*================================================== START Custom BLURB WITH IMAGE - DO NOT DELETE Title + text + image ==================================================*/ /* Main panel */ .blurb-template > .row { max-width: var(--blurb-width); color: var(--blurb-font-color); background-color: var(--blurb-background-color); border-radius: 10px; } /* Heading */ .blurb-template h3 { margin-bottom: 1rem; font-weight: 200 !important; font-size: var(--blurb-heading-font-size) !important; } /* Body copy */ .blurb-template p { margin-bottom: 0; font-size: var(--blurb-paragraph-font-size) !important; line-height: 1.5; } /* Make the image column match the row height */ .blurb-template .col-md-5 { display: flex; } /* Vertically center the editable image */ .blurb-template__media { display: flex; width: var(--blurb-logo-width); min-height: 250px; align-items: center; justify-content: center; } /* Target any replacement image inserted by Totara */ .blurb-template__media img { display: block; width: var(--blurb-logo-width); max-width: 100%; height: auto !important; min-height: 0 !important; object-fit: contain; border-radius: 10px; } /* Handle a paragraph Totara may insert around the image */ .blurb-template__media p { width: 100%; margin: 0; } /* Ensure an image inside Totara's paragraph wrapper remains proportional */ .blurb-template__media p img { width: 100%; height: auto !important; } /* Mobile layout */ @media (max-width: 767.98px) { .blurb-template > .row { padding: 2rem !important; } /* Center the image column */ .blurb-template .col-md-5 { display: flex; justify-content: center; margin-top: 0; margin-bottom: 1.5rem; } /* Center the image wrapper */ .blurb-template__media { min-height: 0; margin-left: auto; margin-right: auto; justify-content: center; } /* Keep replacement images centered */ .blurb-template__media img { margin-left: auto; margin-right: auto; } } /*================================================== END Custom BLURB WITH IMAGE - DO NOT DELETE ==================================================*/ /*================================================================ START - FRONTPAGE FEATURED LINKS NAV WITH TOP HALF ICONS WITH COLORED BACKGROUND - DO NOT DELETE Transparent icon + top half colored background + title + description =================================================================*/ /*Lower sidebar blocks on front page to align with blurb block*/ #page-site-index #block-region-side-pre, #page-site-index #block-region-side-post { padding-top: 45px; } .frontpage-featured-icon-blocks .block.chromeless .block-totara-featured-links-layout { margin: -10px; margin-top: 5px; margin-bottom: 10px; } /*--Frontpage Featured Links Navigation Blocks Top Half Background Color*/ .frontpage-featured-icon-blocks .block-totara-featured-links-tile ,block-totara-featured-links-tile-medium ,block-totara-featured-links-tile-135 ,background-cover { background-color: var(--front-page-featured-links-icon-nav-blocks) !important; } /*make all Features Links block dark overlay equal in height*/ .frontpage-featured-icon-blocks .block-totara-featured-links-layout .block-totara-featured-links-content, frontpage-featured-icon-blocks .block-totara-featured-links-layout .block-totara-featured-links-content { height: 50% !important; text-align: left; } /*front page featured blocks lower half background*/ .frontpage-featured-icon-blocks .block-totara-featured-links-layout .block-totara-featured-links-content::before { background: #F3F3F3 !important; } /*front page featured blocks header and paragraph text*/ .frontpage-featured-icon-blocks .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content h3, .frontpage-featured-icon-blocks .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content p { color: #021733; font-weight: 500; } /*================================================================ END -FRONTPAGE FEATURED LINKS NAV WITH TOP HALF ICONS WITH COLORED BACKGROUND - DO NOT DELETE =================================================================*/ /* ========================================================== START SIDEBAR ACTION CARD WITH IMAGE Image + title + text + action button ========================================================== */ .sidebar-action-card { width: 100%; padding: 24px; text-align: left; background: #ffffff; border-radius: 10px; box-sizing: border-box; } /* Image container */ .sidebar-action-card-image { width: 100%; margin-bottom: 18px; text-align: left; } /* Targets any image inserted or replaced using Totara's Atto image editor. */ .sidebar-action-card-image img { display: block; width: 60px; max-width: 100%; height: auto; margin: 0 auto; } /* Title */ .sidebar-action-card-title { margin: 0 0 12px 0; font-size: 1.4rem; font-weight: 600; line-height: 1.25; } /* Description */ .sidebar-action-card-text { margin: 0 0 22px 0; font-size: 1rem; line-height: 1.5; } /* Action button */ .sidebar-action-card-button { display: inline-block; padding: 10px 22px; border-radius: 50px; background: #ED1C24; color: #ffffff !important; font-weight: 600; text-decoration: none !important; transition: opacity 0.2s ease; } .sidebar-action-card-button:hover, .sidebar-action-card-button:focus { color: #ffffff !important; text-decoration: none !important; opacity: 0.85; } /* ========================================================== END SIDEBAR ACTION CARD WITH IMAGE ========================================================== */ /* ========================================================== START SIDEBAR ACTION BLOCK (NO IMAGE) Title + text + action button ========================================================== */ .sidebar-action-block { width: 100%; padding: 24px; text-align: left; box-sizing: border-box; } /* Title */ .sidebar-action-title { margin: 0 0 12px 0; font-size: 1.4rem; font-weight: 600; line-height: 1.25; } /* Description text */ .sidebar-action-text { margin: 0 0 22px 0; font-size: 1rem; line-height: 1.5; } /* Action button */ .sidebar-action-button { display: inline-block; padding: 10px 22px; border-radius: 50px; background: #3F9238; color: #ffffff !important; font-weight: 600; text-decoration: none !important; transition: opacity 0.2s ease; } /* Button hover/focus */ .sidebar-action-button:hover, .sidebar-action-button:focus { color: #ffffff !important; text-decoration: none !important; opacity: 0.85; } /* ========================================================== END SIDEBAR ACTION BLOCK (NO IMAGE) ========================================================== */ /*========================================================= START CUSTOM COURSE OBJECTIVES & COURSE INTRO TABLES - TOPIC COURSE FORMAT HTML located in Leadership (Topic Format) course =========================================================*/ /*NOTE: These templates are located in the Leadership Topics Format course and can be copied from that course and used in other Topic formatted courses.*/ /*---Leadership Course Topics format Course Objectives table located at top of course---*/ .courseobjectives-wrapper { max-width: 960px; margin: 0 auto; } .courseobjectives-list { padding-left: 1.5rem; margin-bottom: 0; font-size: 1.05rem; line-height: 1.7; } .courseobjectives-image img { width: 100%; height: auto; max-height: 200px; margin-top: 1rem; object-fit: cover; border-radius: 0.375rem; display: block; } /*Leadership Course Topics format - Module intro tables located in each Topic*/ .courseintro-card { height: 300px; border: 1px solid #dee2e6 !important; border-radius: 0.375rem; overflow: hidden; background-color: #fff; padding-top: .8rem; padding-bottom: 3rem; } .courseintro-desc { padding: 0rem 1rem; } .courseintro-desc h5 { margin-bottom: 0.5rem; font-size: 1.2em; } /* Leadership Course Topics format Mobile: breathing room between stacked Module Intro cards*/ @media (max-width: 767.98px) { .courseintro-card { margin-bottom: 1.75rem; } } @media (max-width: 767.98px) { .courseintro-desc { padding: 0rem 1rem 1.125rem; } } /*============================================================ END CUSTOM COURSE OBJECTIVES AND COURSWE INTRO TABLES - TOPIC COURSE FORMAT ============================================================*/ /*=========================================================== START CUSTOM COURSE OBJECTIVES & COURSE INTRO TABLES - PATHWAY COURSE FORMAT HTML located in Leadership (Pathway Format) course ============================================================*/ /*NOTE: These templates are located in the Leadership Pathway Format course and can be copied from that course and used in other Topic formatted courses.*/ /*Leadership Course Pathway format - Custom Course Objectives table located at top of course*/ .courseobjectives-wrapper { max-width: 960px; margin: 0 auto; } .courseobjectives-list { padding-left: 1.5rem; margin-bottom: 0; font-size: 1.05rem; line-height: 1.7; } .courseobjectives-image img { width: 100%; height: auto; max-height: 200px; margin-top: 1rem; object-fit: cover; border-radius: 0.375rem; display: block; } /* Mobile: image on top, text below – natural source order */ @media (max-width: 767.98px) { .courseobjectives-image { margin-bottom: 2rem; } } /* Desktop: vertical center image, add right padding to text column */ @media (min-width: 768px) { .courseobjectives-text-col { padding-right: 2.5rem !important; } } /*---Leadership Course Pathway format - Custom intro tables located in each Module---*/ .pathcourseintro-card { height: 400px; border: 1px solid #dee2e6 !important; border-radius: 0.375rem; overflow: hidden; background-color: #fff; padding-top: .8rem; padding-bottom: 3rem; } @media (max-width: 767.98px) { .pathcourseintro-card { height: 250px; margin-bottom: 1rem; } } /*----Medical edits----*/ .courseintro2-card { height: 300px; border: 1px solid #dee2e6 !important; border-radius: 0.375rem; overflow: hidden; background-color: #7fb841; padding-top: .8rem; padding-bottom: 3rem; } .courseintro2-desc { padding: 0rem 1rem; } .courseintro2-desc h5 { margin-bottom: 0.5rem; font-size: 1.2em; color: #000; } .courseintro2-desc p { color: #000; } .courseintro2-desc ul { color: #000; } /* Leadership Course Topics format Mobile: breathing room between stacked Module Intro cards*/ @media (max-width: 767.98px) { .courseintro2-card { margin-bottom: 1.75rem; } } @media (max-width: 767.98px) { .courseintro2-desc { padding: 0rem 1rem 1.125rem; } } /*============================================================= END CUSTOM COURSE OBJECTIVES AND COURSE INTRO TABLES - PATHWAY COURSE FORMAT =============================================================*/ /*=========================== START CUSTOM COURSE OBJECTIVES TABLE ===========================*/ /*This template is located in the Food Service and Safety Essentials course on the Demo 01 site*/ /*----Custom Objective Table----*/ .custom-objectives-table { background-color: #007ab8; border-radius: 10px; font-size: 1.1em; color: #fff; width: 75%; } .custom-objectives-table td { padding: 20px !important; } /*================================================== END CUSTOM COURSE OBJECTIVES TABLE ==================================================*/ /* ========================================== START REUSABLE FULL-WIDTH HTML BLOCK BANNER ========================================== */ /*HOW TO MAKE ANY HTML BANNER FULL PAGE WIDTH 1. Add the class "full-width-banner" to the banner's main
in your Totara HTML block. Example:
Your banner content
2. The CSS below automatically finds the Totara HTML block containing "full-width-banner" and expands the entire block to the full width of the browser window. 3. Totara normally limits HTML blocks to the width of the page content area. The 100vw setting makes the block 100% of the browser/viewport width. 4. The left: 50% and translateX(-50%) settings reposition the expanded block so it is centered across the page. 5. The block-content rule removes Totara's normal left and right padding so the banner can extend completely across the block. TO USE THIS ON ANOTHER BANNER: Simply add "full-width-banner" to that banner's main div. No additional full-width CSS is required. Example with another banner class:
Your banner content
IMPORTANT: Only use "full-width-banner" on HTML blocks that you intentionally want to extend beyond Totara's normal content width. END OF INSTRUCTIONS*/ /* Make the Totara block containing the banner full browser width */ .block:has(.full-width-banner) { width: 100vw; max-width: 100vw; position: relative; left: 50%; transform: translateX(-50%); margin-left: 0; margin-right: 0; overflow: visible; } /* Remove Totara's normal horizontal block padding */ .block:has(.full-width-banner) .block-content { padding-left: 0; padding-right: 0; } /* Banner itself */ .full-width-banner { width: 100%; box-sizing: border-box; padding: 2.5rem 3rem; background: #1a6986; color: #fff; border-radius: 0; } /* Basic banner typography */ .full-width-banner h1, .full-width-banner h2, .full-width-banner h3 { color: inherit; margin-top: 0; } .full-width-banner p:last-child { margin-bottom: 0; } /* ========================================== END REUSABLE FULL-WIDTH HTML BLOCK BANNER ========================================== */ /* ============================================== START CUSTOM BANNER WITH LEFT-ALIGNED TRIANGLE GEO SHAPE ============================================== */ .shapes-banner { position: relative; width: 100%; min-height: 150px; display: flex; align-items: center; padding: 20px 60px; box-sizing: border-box; border-radius: 10px; overflow: hidden; /* LEFT BACKGROUND - Secondary Color*/ background-color: var(--custom-dasbhoards-heading-block-secondary-background-color); } /* RIGHT BACKGROUND LAYER - Primary Color*/ .shapes-banner::after { content: ""; position: absolute; inset: 0; background-color: var(--custom-dasbhoards-heading-block-background-color); z-index: 1; clip-path: polygon(28% 0, 100% 0, 100% 100%, 40% 100%); } /* THE TRIANGLE SHAPE: Primary color */ .shapes-banner .shapes-banner-triangle { position: absolute; inset: 0; background-color: var(--custom-dasbhoards-heading-block-background-color); z-index: 1; /* - 6% 100% (Bottom-left corner stays anchored) - 16.4% 20% (Top peak is lowered to 20% from the top edge. The X-coordinate is adjusted to 16.4% to stay perfectly parallel) - 26% 100% (Right base stays anchored) */ clip-path: polygon(6% 100%, 16.4% 20%, 26% 100%); } /* TEXT CONTENT */ .shapes-banner .shapes-banner-content { position: relative; z-index: 2; margin-left: auto; margin-right: 0; width: 50%; text-align: left; } .shapes-banner h1 { font-weight: 200 !important; font-size: 1.8rem !important; color: #ffffff; margin: 0; } .shapes-banner h1 .highlight { color: #26b9b1; } .shapes-banner h3 { font-weight: 200 !important; font-size: 1.1rem !important; } /* 📱 TABLET VIEW: Maintains the lowered peak with a safe margin */ @media (min-width: 769px) and (max-width: 1024px) { .shapes-banner .shapes-banner-triangle { clip-path: polygon(4% 100%, 14.4% 20%, 24% 100%); } .shapes-banner .shapes-banner-content { width: 55%; } } /* 📱 MOBILE VIEW */ @media (max-width: 768px) { .shapes-banner { flex-direction: column; justify-content: center; padding: 30px 20px; } .shapes-banner .shapes-banner-content { width: 100%; margin-left: 0; text-align: center; } .shapes-banner::after, .shapes-banner .shapes-banner-triangle { display: none; } .shapes-banner { background: var(--custom-dasbhoards-heading-block-background-color); } } /* ============================================== END CUSTOM BANNER WITH LEFT-ALIGNED TRIANGLE GEO SHAPE ============================================== */ /*==================================================================== ===================================================================== END - CUSTOM TEMPLATED CSS ===================================================================== ====================================================================*/ /*==================================================================== ------ADD YOUR CUSTOM CSS BELOW------ ====================================================================*/ /*Wisconsin.gov customizations*/ /*Hide Wisconsin DSPS dashboard page title*/ #page-totara-dashboard-6 .page-heading h1 { display: none !important; } /*Wisconsin.gov Dashboard banner - created from a copy of full-width banner template*/ .dashboard-banner-full-width-title { display: block; width: 100%; padding: 2rem 4rem; box-sizing: border-box; background: #184c85 ; background-image: linear-gradient(115deg, #184c85 50%, #0077B8 50%); color: #fff; border-radius: 0; } .dashboard-banner-full-width-title h2 { font-weight: 200 !important; font-size: 1.8rem !important; } .dashboard-banner-full-width-title p { font-size: 1.1rem !important; } /* Allow the HTML block containing the banner to break out */ .block:has(.dashboard-banner-full-width-title) { width: 100vw; max-width: 100vw; position: relative; left: 50%; transform: translateX(-50%); margin-left: 0; margin-right: 0; overflow: visible; } /*Wisconsin DSPS Dashboard customizations*/ /*my learning page sidebar block font customizations*/ #page-totara-dashboard-6 h3, #page-totara-dashboard-3 h3 { font-weight: normal; } #page-totara-dashboard-6 .block .content p { font-weight: normal; } #page-totara-dashboard-6 .block .block-header h2 { font-size: 1.4em; } /*What's coming up block higher and closer to the block above it*/ .what-up.block { margin-bottom: var(--gap-0) !important; } .what-up.block.chromeless .content { padding-bottom: 0 !important; } /*Podcasts block higher and closer to the block above it*/ .podcasts.block.chromeless .content { padding-top: 0 !important; } /*Tip of the Day block higher and closer to the block above it*/ .tip-of-day.block.chromeless .content { padding-top: 0 !important; } /*Earned Badges block higher and closer to the block above it*/ .earned-badges.chromeless .content { padding-top: 0 !important; } /*Earned Certificates block higher and closer to the block above it*/ .earned-certificates.chromeless .content { padding-top: 0 !important; padding-bottom: 0 !important; }