@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,700");

      :root {
        --font: Open Sans;
        --alt-font: Open Sans;
        --accent-color: #27cc90;
        --secondary-color: #5bcde4;
        --link-color: #5bcde4;
        --accent-highlight-color: #0e4c35;
        --accent-highlight-background-color: #e0f9f0;
        --accent-tinted-color-70: #bef0de;
        --accent-tinted-color-80: #d4f5e9;
        --accent-tinted-color-90: #e9faf4;
        --accent-contrast-color: #111;
        --accent-contrast-tinted-background-color: #fff;
        --accent-hover-color: #1fa172;
        --secondary-hover-color: #2fc0dd;
        --secondary-contrast-color: #111;
        --link-hover-color: #1fa0ba;
      }
      
body { background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1/course-uploads/0c38c8ed-5f01-4a9b-9e1c-757da1c4d2f7/ov6x0hmq5qzy-Screenshot2024-07-09at11.29.12AM.png'); background-repeat: repeat; background-size: auto; }
.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://media.thoughtindustries.com/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_v4/v1/course-uploads/0c38c8ed-5f01-4a9b-9e1c-757da1c4d2f7/z1l11j1woz89-SmallSOCiULogo.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}


/********** SOCi SPECIFIC CSS **********/


/******************* CSS FROM DIGITAL INTELLECTIVE *******************/
/*
INVENTORY OF CLASSES TO APPLY
   soci          Activates the widget's global styles, needs to be added to every widget
   soci-black-variant          Black background variant
   soci-green-variant          Light Purple background variant
   soci-light-green-variant    Light Green background variant
   soci-white-variant          White background variant
   soci-blue-variant           Blue background variant
   soci-light-gray-variant     Blue background variant
   soci-title-large            Override default to use large title size
   soci-title-medium           Override default to use medium title size
   soci-title-green            Override default to use green title color
   soci-title-white            Override default to use white title color
   soci-title-black            Override default to use black title color
   soci-gray-tiles             Light Gray Background for Widget Tiles
   soci-no-padding-tiles       Remove Padding from Widget Images


Example: [soci soci-light-green-variant soci-title-large]   Light Green background variant with large title size */






/* Variables for colors and font sizes reused throughout the rest of the CSS */
:root {
 --soci-green: #29CC91;
 --soci-light-green: #D4F5E9;
 --soci-blue: #213B61;
 --soci-gray: #F4F5F7;
 --soci-light-gray: #F2F3F5;
 --soci-title-large-size: 4rem;
 --soci-title-medium-size: 3rem;
 --soci-title-small-size: 2rem;
}


/* Default heading sizes */
.h2 {
 font-size: 2rem;
}


/* Default size and top margin for widget titles */
.soci > .row h3, .row h2, .row h1 {
   margin-top: 1rem;
   font-size: var(--soci-title-small-size);
   font-weight: 900;
}


/******* GLOBAL BUTTON CSS *******/
/* Global styling for buttons in soci widgets */
.soci .widget__title-cta, .soci .btn--alt, 
.soci .btn--primary:not(.btn--link):not(.btn--bare) {
   background-color: var(--soci-green);
   color: #0C0C0D;
   border: none;
   border-radius: 5px;
   transition: transform 0.3s;
   font-weight: 700;
   padding: 0.75rem 1.5rem;
   margin-top: 12px;
}


/******* MANUALLY ADDED BUTTONS *******/
/* Green button with black text */
.soci-green-button {
   display: block;
   width: fit-content;
   background-color: var(--soci-green);
   color: #0C0C0D !Important;
   border: none;
   border-radius: 5px;
   transition: transform 0.3s;
   font-weight: 700;
   padding: 0.75rem 1.5rem;
}


/* White button with green text */
.soci-white-button {
   display: block;
   width: fit-content;
   background-color: white;
   color: var(--soci-green) !Important;
   border: 1px solid var(--soci-green);;
   border-radius: 5px;
   transition: transform 0.3s;
   font-weight: 700;
   padding: 0.75rem 1.5rem;
}


/* Padding between caption and button for hero widget */
.hero .hero__caption span {
   padding-right: 1rem;
}


/* Override for View Details and Archive buttons in Learner Access widgets */
.widget--dashboard-access .btn--alt {
 font-weight: 500;
 background-color: white;
 border: 1px solid var(--accent-color);
 color: var(--accent-color);
}


/******* FORMATTING CSS FOR PAGE BUILDER WIDGETS *******/
/* Common styling for tiles contained in widgets - light gray variant */
.soci.soci-gray-tiles > .row .featured-content-block-grid > li > .catalog-item,.catalog-grid-item,
.soci.soci-gray-tiles > .row .featured-content-multi-carousel .featured-content-multi-carousel-item {
   background-color: var(--soci-gray);
   border-radius: 5px;
   border: none;
}


/* Tiles background for Carousel Item */
.soci .featured-content-multi-carousel-item {
   background: white;
   border-radius: 5px;
}




/* Common styling for carousel items in widgets */
.soci .featured-content-multi-carousel .featured-content-block-grid {
   display: flex;
   align-items: stretch;
}


/* Text size in featured carousel widget */
.soci .featured-content-multi-carousel-item__description {
   font-size: 14px;
}


.soci .featured-content-multi-carousel-item__title {
   font-size: 16px;
}


.soci .featured-content-multi-carousel .ember-view.catalog-item {
   height: 100%
}


/* Common styling for course images inside tiles */
.soci > .row .featured-content-block-grid > li .catalog-grid-item__asset {
   border-radius: 5px 5px 0 0;
   border: none;
}


/* Removal of padding on course images inside tiles */
.soci.soci-no-padding-tiles img {
 padding: 0;
}


/* Common styling for widget subtitles */
.soci .widget__alt-title__container p {
   font-size: initial;
}


/* Remove extra TI border in descriptive layout widget type */
.soci > .row .featured-content-article-item {
   border: none;
}


/* Remove Add to My Learning Link */
.featured-content-multi-carousel-item__queue {
 display: none;
}


/******* COLOR VARIANT CSS *******/
/* black widget variant */
.soci-black-variant > .row,
.soci-black-variant.widget {
   background-color: #0C0C0D;
}


.soci-black-variant > .row h3,
.soci-black-variant > .row h2,
.soci-black-variant.widget,
.soci-black-variant.widget h3,
.soci-black-variant.widget h2,
.soci-black-variant.widget .widget__subtitle {
   color: white;
}


/* light-green variant navigation widget override */
.widget--navbar_standard.soci-black-variant > .row > .small-12 > .top-bar .top-bar-section ul li>a {
 color: white !Important;
}


/* green widget variant */
.soci-green-variant > .row,
.soci-green-variant.widget {
   background-color: var(--soci-green);
}


.soci-green-variant > .row h3,
.soci-green-variant > .row h2,
.soci-green-variant.widget,
.soci-green-variant.widget h3,
.soci-green-variant.widget h2,
.soci-green-variant.widget .widget__subtitle {
   color: #0C0C0D;
}


/* green widget button style override */
.soci.soci-green-variant .widget__title-cta,
.soci.soci-green-variant .btn.btn--primary {
   background-color: black;
   color: white;
}


/* light-green variant navigation widget override */
.widget--navbar_standard.soci-green-variant > .row > .small-12 > .top-bar .top-bar-section ul li>a {
 color: #0C0C0D !Important;
}


/* light green widget variant */
.soci-light-green-variant > .row,
.soci-light-green-variant.widget {
   background-color: var(--soci-light-green);
}


.soci-light-green-variant > .row h3,
.soci-light-green-variant > .row h2,
.soci-light-green-variant.widget,
.soci-light-green-variant.widget h3,
.soci-light-green-variant.widget h2,
.soci-light-green-variant.widget .widget__subtitle {
   color: #0C0C0D;
}


/* light green widget button style override */
.soci.soci-light-green-variant .widget__title-cta,
.soci.soci-light-green-variant .btn.btn--primary {
   background-color: #0C0C0D;
   color: white;
}


/* light-green variant navigation widget override */
.widget--navbar_standard.soci-light-green-variant > .row > .small-12 > .top-bar .top-bar-section ul li>a {
 color: #0C0C0D !Important;
}


/* white widget variant */
.soci-white-variant > .row,
.soci-white-variant.widget {
   background-color: white;
}


.soci-white-variant > .row h3,
.soci-white-variant > .row h2,
.soci-white-variant.widget,
.soci-white-variant.widget h3,
.soci-white-variant.widget h2,
.soci-white-variant.widget .widget__subtitle {
   color: #333333;
}


/* light-green variant navigation widget override */
.widget--navbar_standard.soci-white-variant > .row > .small-12 > .top-bar .top-bar-section ul li>a {
 color: #333333 !Important;
}


/* blue widget variant */
.soci-blue-variant > .row,
.soci-blue-variant.widget {
   background-color: var(--soci-blue);
}


.soci-blue-variant > .row h3,
.soci-blue-variant > .row h2,
.soci-blue-variant.widget,
.soci-blue-variant.widget h3,
.soci-blue-variant.widget h2,
.soci-blue-variant.widget .widget__subtitle {
   color: white;
}


/* blue widget button style override */
.soci.soci-blue-variant .widget__title-cta,
.soci.soci-blue-variant .btn.btn--primary {
   background-color: white;
   color: #333333;
}


/* light-green variant navigation widget override */
.widget--navbar_standard.soci-blue-variant > .row > .small-12 > .top-bar .top-bar-section ul li>a {
 color: white !Important;
}


/* light gray widget variant */
.soci-light-gray-variant > .row,
.soci-light-gray-variant.widget {
   background-color: var(--soci-light-gray);
}


.soci-light-gray-variant > .row h3,
.soci-light-gray-variant > .row h2,
.soci-light-gray-variant.widget,
.soci-light-gray-variant.widget h3,
.soci-light-gray-variant.widget h2,
.soci-light-gray-variant.widget .widget__subtitle {
   color: #0C0C0D;
}


/* light gray widget button style override */
.soci.soci-light-gray-variant .widget__title-cta,
.soci.soci-light-gray-variant .btn.btn--primary {
   background-color: black;
   color: white;
}


/* light-green variant navigation widget override */
.widget--navbar_standard.soci-light-gray-variant > .row > .small-12 > .top-bar .top-bar-section ul li>a {
 color: #0C0C0D !Important;
}




/******* HOMEPAGE CSS *******/
/* border radius for video widget */
.video__frame {
 border-radius: 5px;
}


/* padding for video widget */
@media only screen and (min-width: 430px) {
.widget--video_standard > .ember-view > .row {
 padding-left: 15%;
 padding-right: 15%
}
}


/* Color changes to responsive menu design */
.top-bar .toggle-topbar.menu-icon button span:after {
   box-shadow: 0 0 0 1px #0C0C0D, 0 7px 0 1px #0C0C0D, 0 14px 0 1px #0C0C0D;
}


.top-bar .toggle-topbar button {
   color: #0C0C0D;
}


/* Cookies pop-up button */
.btn--primary--manager--new {
 background: var(--accent-color);
 color: var(--accent-contrast-color);
}


.btn--primary--manager--new:hover {
 background: var(--accent-hover-color);
 color: var(--accent-contrast-color);
}




/******* HEADING VARIANTS *******/
/* large title size override */
.soci.soci-title-large h3,
.soci.soci-title-large h2,
.soci.soci-title-large h1 {
   font-size: var(--soci-title-large-size);
}


/* medium title size override */
.soci.soci-title-large h3,
.soci.soci-title-large h2,
.soci.soci-title-large h1 {
   font-size: var(--soci-title-medium-size);
}


/* green title color override */
.soci.soci-title-green h3,
.soci.soci-title-green h2,
.soci.soci-title-green h1 {
   color: var(--soci-green);
}


/* black title color override */
.soci.soci-title-black h3,
.soci.soci-title-black h2,
.soci.soci-title-black h1 {
   color: black;
}


/* white title color override */
.soci.soci-title-white h3,
.soci.soci-title-white h2,
.soci.soci-title-white h1  {
   color: white;
}


/******* CATALOG HEADING AND UTILITY BUTTONS AND FIELDS *******/
/* hide catalog header */
.soci .catalog-header {
   visibility: hidden;
   height:0;
}


/* round borders for all of the utility row */
.soci .catalog-filters {
   border-radius: 5px;
}




/* round borders for search field */
.soci .catalog-filters__search {
   border-radius: 5px 0 0 5px;
}


/* round borders for sort field */
.soci .catalog-filters__sort {
   border-radius: 0 5px 5px 0;
}


/* round borders for view buttons */
.soci .catalog-display-type button {
   border-radius: 5px;
}


/******* CATALOG NAVIGATION DESIGN *******/
/* navigation category heading hover color */
.soci .catalog-aggregation__header--label:hover {
   color: var(--soci-green);
}


/* navigation heading padding */
.soci .catalog-aggregation {
   padding: 1em 0.5em 0.6em 0.5em;
   margin-bottom: 0.75rem;
}


/* expanded navigation background color and border */
.soci .catalog-aggregation--expanded {
   background-color: var(--soci-light-green);
   border: 1px solid #d1d5db;
   border-radius: 5px;
   margin-bottom: 1rem;
}


/* expanded navigation normal link color */
.soci .btn.catalog-aggregation__value {
   color: #2c7c5b;
}


/* expanded navigation hover link color */
.soci .btn.catalog-aggregation__value:hover {
   color: #2c7c5b;
}


/* non-expanded navigation background color and border */
.soci .catalog-aggregation {
 background-color: var(--soci-light-green);
   border: 1px solid #d1d5db;
   border-radius: 5px;
}


/******* CATALOG COURSE TILES *******/
/* round borders for course image */
.soci .catalog-grid-item__asset {
   border-radius: 5px 5px 0 0;
}


/* font size for author */
.soci .featured-content-item__authors {
   font-size: 0.8rem;
}


/* font size for description */
.soci .catalog-grid-item__description {
   font-size: 0.8rem;
}


/* view details link font weight */
.soci .btn--link.btn--primary {
   font-weight: 700;
}


/* view details link hover zoom effect */
.soci .btn--link.btn--primary:hover {
   transform: scale(1.05);
}


/* right padding for link button due to zoom effect */
.soci .catalog-grid-item__cta-container {
   padding-right: 5px
}


/* color of completed checkmark */
.soci .catalog-grid-item__completed i {
   color: var(--soci-green);
}


/* hide content type
.soci .catalog-grid-item__source {
   display: none;
}*/


/******* LEARNER DASHBOARD DESIGN *******/
/******* Global Navigation Widget Changes *******/
.widget--navbar_standard.soci {
 padding: 0rem 2rem 0rem 2rem !Important;
}


.widget--navbar_standard.soci > .row > .small-12 > .top-bar {
 background: transparent !Important;
 height: 2rem;
 line-height: 2rem;
}


.widget--navbar_standard.soci > .row > .small-12 > .top-bar .top-bar-section ul li {
 background: #7fe0bd !Important;
 border: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}


.widget--navbar_standard.soci > .row > .small-12 > .top-bar .top-bar-section ul>li.navigation-item {
 background: var(--soci-green) !Important;
 border-right: solid 2px;
}


.widget--navbar_standard.soci > .row > .small-12 > .top-bar .top-bar-section ul>li.navigation-item:last-of-type {
 background: var(--soci-green) !Important;
 border: none;
}


/* .widget--navbar_standard.soci > .row > .small-12 > .top-bar .top-bar-section ul li:not(:first-of-type) {
 background: var(--soci-light-green) !Important;
 border-right: none;
} */


.widget--navbar_standard.soci > .row > .small-12 > .top-bar .top-bar-section li:not(.has-form) a:not(.button) {
 background: transparent !Important;
}


.widget--navbar_standard.soci > .row > .small-12 > .top-bar .top-bar-section ul.left {
   border-bottom: none;
}


.navigation-bar .top-bar-section .has-dropdown > a:after, .navigation-bar .top-bar-section .navigation-widget__item--has-dropdown>a:after {
         border-top: 5px solid white;
}




/******* Learner Access Widget *******/
/* light-green background on heading row */
.soci .dashboard-access-tabs {
   background: var(--soci-light-green);
}


/* text color for inactive tabs */
.soci .dashboard-access-tab--inactive button {
   color: #0C0C0D;
}


/* text color for active tabs */
.soci .dashboard-access-tab--active .btn--link {
   color: var(--soci-green);
}


/* text hover color for active tabs */
.soci .dashboard-access-tab--active .btn--link:hover {
 color: var(--soci-green);
}


/* color for number in circle */
.soci .dashboard-access-tab__count {
   color: var(--soci-green);
}


/* background color for every other course */
.soci .dashboard-access-list-item:nth-of-type(2n) {
   background: var(--soci-light-green);
}


/* progress bar gradient */
.soci .progress.colorized .meter {
   background: linear-gradient(90deg, #213B61, #29CC91);
}


/* total hours stat text color */
.soci .user-engagement-stat--collaborations, .user-engagement-stat--hours {
   color: #29CC91;
}


/* total hours icon color */
.soci .icon-stopwatch:before {
   color: #29CC91;
}


/* content viewed stat text color - Not able to change this color */


/* complete stat text color */
.soci .user-engagement-stat--percent-complete {
   color: #29CC91;
}


/* Search Bar Widget */
/* Container for layout */
.search-bar-widget {
 position: relative;
 max-width: 80%;
 margin: 0 auto;
}


/* Form takes full width and anchors positioning */
.search-bar-widget form {
 position: relative;
 width: 100%;
}


/* Input takes up full width minus padding for button */
.search-bar-widget input.form-control {
 height: 35px; /* reduced from 40px */
 padding-right: 150px;
 box-sizing: border-box;
 border-radius: 5px;
 font-size: 1.05rem; /* slightly reduced from 1.125rem */
 margin: 0;
}


.search-bar-widget input {
 font-size: 15px ! Important;
}


/* Button positioned inside the form */
.search-bar-widget .btn--submit {
 margin-top: 0 !important;
 position: absolute;
 top: 50%;
 right: 0;
 transform: translateY(-50%);
 z-index: 1;


 height: 35px; /* match input height exactly */
 line-height: 1; /* prevent text stretching */
 display: flex;
 align-items: center;
 justify-content: center;


 background-color: var(--soci-green);
 color: #0C0C0D;
 border: none;
 border-radius: 5px;
 font-weight: 700;
 padding: 0 1rem; /* horizontal padding only */
 transition: transform 0.3s;
}


/* Optional: Better scaling for small screens */
@media (max-width: 480px) {
 .search-bar-widget input.form-control {
   padding-right: 120px;
   font-size: 1rem;
 }


 .search-bar-widget .btn--submit {
   padding: 0.5rem 1rem;
   font-size: 0.9rem;
 }
}


/* Dark Search Bar Variant */
.search-dark input.form-control {
 background-color: #1a1a1a;
 border: 1px solid #333;
 color: #e0e0e0;
}


.search-dark input.form-control:focus {
 border-color: var(--soci-green);
 box-shadow: 0 0 0 2px rgba(72, 194, 110, 0.3);
 outline: none;
}


.search-dark .btn--submit {
 background-color: transparent;
 color: var(--soci-green);
 border: 1px solid var(--soci-green);
}


.search-dark .btn--submit:hover {
 background-color: var(--soci-green);
 color: #0c0c0c;
}


.search-bar-widget.search-dark .btn--submit:hover {
 background-color: var(--soci-green);
 color: #0c0c0c;
 border-color: var(--soci-green);
}






/******* Recommendation and Hero Image Widget *******/
/* Move Button to own line for hero image */
.hero__caption .btn--primary {
   display: block;
   width: fit-content;
}


/******* Community Widget *******/
/* Border radius for utility bar */
.catalog-filters {
 border-radius: 5px;
}


/* Border radius for search bar */
.catalog-filters__search {
 border-radius: 5px 0 0 5px;
}


/* Border radius for filter drop down */
.catalog-filters__sort {
 border-radius: 0 5px 5px 0;
}


/* Border radius for buttons */
.btn--primary {
 border-radius: 5px;
}


/* Formatting for down arrow due to border radius */
.catalog-filters__sort {
 padding-right: 15px;
}


/* Hide white border due to radius */
.catalog-search > input.input--expand {
 background-color: transparent;
}


.catalog-search > catalog-filters__sort {
 background-color:transparent;
}


/******* CONTENT DETAIL PAGES *******/
/******* Learning Path *******/
/* hide Gift This Learning Path link */
.enroll__secondary-actions {
   display: none;
}


/* hide View Details link */
.learning-path-detail-milestone-item__cta {
   display: none;
}


/* Hide Content Type */
.learning-path-detail-milestone-item__content-type {
 display: none;
}


/******* Course *******/
/* Round borders for image */
.course__detail__asset img {
 border-radius: 0.5rem;
}


/* Round borders on purchase box */
.widget--course-purchase {
 border-radius: 0.5rem;
}


/* Rounded borders for active tab */
.tabs .tab-title.active>a {
 border-radius: 0.5rem 0.5rem 0 0;
}


/* Rounded borders for non-active tabs */
.tabs .tab-title>a {
 border-radius: 0.5rem 0.5rem 0 0;
}


/******* CONTENT PAGES *******/
/******* Global *******/
/* hide Search in sidebar */
.course__container .learner__sidebar__search .form-control {
   visibility: hidden;
}
/* Hide Search Icon */
.icon-search {
 display: none;
}






/* Border Radius for Hide Sidebar Toggle */
.learner__container__toggle--small .btn {
 border-radius: 9999px;
}


/* Hide Radius for Sidebar Menu Toggle */
.learner__container__toggle .btn {
 border-radius: 9999px;
}


/* Add padding to bottom of sidebar */
.expandable-sidebar__buttons {
 padding-bottom: 0.5rem;
}


.ember-view .ember-text-field .form-control {
 display: none;
}
/* fixing margin due to hiding search and navigation toggle */
.layout-panel {
   margin-top: 1.5rem;
}


/* Making header within content green */
.header--student {
   background: var(--soci-green);
}


/* Color of course title within content and kill hyperlink */
.course-title {
   color: #0C0C0D;
   pointer-events: none;
   padding-left: 1rem;
}


/* Hide home icon */
.header--student .header__left__icon {
 display: none;
}


/* Make company logo a max of 50px
.course__container .header .company__beta-logo .company-logo__container img {
 max-height: 35px;
}
*/


/* Border radius for SCORM container */
.quiz-start__content {
 border-radius: 0.5rem;
}


/* Add text to the left of the logo
.header__right::after {
 content: "Return to Dashboard";
 color: #0C0C0D;
 position: absolute;
 right: 133px;
 top: 70%;
 transform: translateY(-50%);
 font-size: 1em;
} */


/******* Courses *******/
/* background color and green footer */
body.course {
 background: var(--soci-light-green);
 border-bottom: solid 3rem var(--accent-color);
}


/* image background and green footer */
/* body.course {
   background: white;
   border-bottom: solid 3rem var(--soci-green);
   background-image: url(https://www.meetsoci.com/wp-content/themes/soci/_images/Wave-10s-1595px.svg);
   background-repeat: no-repeat;
} */


/* Hover color for navigation links */
.learner__sidebar__expandables a:hover {
 color: var(--soci-green);
}


/* Sidebar color and border */
.bg-accent-100 {
   background: none;
   border-top: solid 3px var(--soci-green);
   border-bottom: none;
   border-radius: 0.5rem 0.5rem 0 0;
}


/* Round borders for sidebar */
.learner__sidebar .layout-panel {
 border-radius: 0.5rem 0.5rem 0 0;
}


.expandable-sidebar__buttons {
 border-radius: 0 0 0.5rem 0.5rem;
}


/* Round border for Learning Panel */
.learner__content .layout-panel {
 border-radius: 0.5rem;
}


/* Sidebar top and bottom padding */
.py-5 {
   padding-bottom: 0.75rem;
   padding-top: 0.875rem;
}


/* Sidebar left and right padding */
.px-8 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
}


/* Hide sidebar testimonial */
.sidebar__testimonial {
 display: none;
}


/* Hardcode green colors in left learner sidebar */


/* Menu/Hide button */
.learner__container__toggle .btn {
 background-color: var(--soci-green);
 color: #0C0C0D;
 border: none;
}


/* Section headers */
.expandable-sidebar__toggle {
 background-color: var(--soci-green);
 color: #0C0C0D;
}


/* Little triangles next to lesson names  */
button.syllabus__lesson--expander .expander-triangle__closed-down {
   border-bottom: 0 solid transparent;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 6.9px solid var(--soci-green);
}


button.syllabus__lesson--expander .expander-triangle__closed-right {
   border-bottom: 4px solid transparent;
   border-left: 6.9px solid var(--soci-green);
   border-right: 0 solid transparent;
   border-top: 4px solid transparent;
}


/* Active topic*/
.syllabus__topic.syllabus__topic--active.syllabus__topic--non-expandable {
   color: var(--soci-green);
}


.syllabus__topic.syllabus__topic--active {
   background-color: var(--soci-light-green);
}


/* Show/Hide Details link in Progress Section*/
.course-progress .clearfix .btn--link {
 color: var(--soci-green);
}


/* Hover over text color */
ul.syllabus__topics a:hover {
 color:var(--soci-green);
}


.learner__sidebar-inner-list .syllabus__lesson .syllabus__lesson--title:hover {
   color: var(--soci-green);
}


/* Little triangle next to required content in Progress section */
.course-progress__section__expander .expander-triangle__closed-down {
   border-bottom: 0 solid transparent;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 8px solid var(--soci-green);
   height: 0;
   width: 0
}


.course-progress__section__expander .expander-triangle__closed-right {
   border-bottom: 5px solid transparent;
   border-left: 8px solid var(--soci-green);
   border-right: 0 solid transparent;
   border-top: 5px solid transparent;
}


/* Progress circles */
.icon-circle.icon-circle--full {
   border-color: var(--soci-green);
}


.icon-circle.icon-circle--full span {
   background: var(--soci-green);
   border-radius: 4px;
   height: 7px
}


.icon-circle.icon-circle--half {
   border-color: #5bcde4;
}


.icon-circle.icon-circle--half span {
   background: #5bcde4;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
   height: 4px
}


/* Progress meter gradiant in Progress section */
.progress.colorized .meter {
   background: -webkit-gradient(linear,left top,right top,from(#5bcde4),to(var(--soci-green)));
   background: linear-gradient(90deg,#5bcde4,var(--soci-green))
}


/* % and X/X numerator number in Progress section */
.course-progress .highlight {
   color: #5bcde4;
}




/******* ILT *******/
/* Remove overlay on hero image */
.learning-content-hero__overlay {
 background-image: none !Important;
}


/* Change background color and add border for event scheduling box */
.event-sidebar__container .event-sidebar {
 background: var(--soci-light-green);
 border-top: solid 5px var(--soci-green);
}


/* Round border for event scheduling box */
.event-sidebar__container .event-sidebar {
 border-radius: 0.5rem;
}


/* Change border radius of event times button */
.event-sidebar__meeting--active, .event-sidebar__meeting--active:hover {
 border-radius: 0.5rem;
}


/* Change height of hero image
.learning-content-hero--with-asset picture > img {
 height: 400px;
 object-fit: cover;
 object-position: center;
}  */


/* Hide hero image
.learning-content-hero--no-asset {
 display: none;
}
*/


.learning-content-hero--with-asset {
 height: 400px;
}


/******* Learning Path *******/
/* Color of Completion Criteria Numbers */
.learning-path-criterion:nth-of-type(1n) {
   color: var(--soci-green);
}


/* Invert stupid milestone caret */
.learning-path-timeline-milestone__toggle {
 rotate: 180deg;
}


/* Make milestone descriptions 16px */
.learning-path-milestone-item__description {
 font-size: 16px;
}


/* Change Criterion Color */
.learning-path-timeline-milestone__header .learning-path-criterion-badge {
 background-color: var(--soci-green);
 color: #111;
}


/******* Article Content Type *******/
/* Hide Sidebar */
.article-sidebar {
 display: none;
}


/* Content is full width */
.article-content {
 width: 100%;
}


/* Hide Content Type */
.article-header__type {
 visibility: hidden;
}


/* Adjust top padding */
.layout-panel.layout-panel--article {
 margin-top: 0;
}


/* Green footer */
body.article {
   border-bottom: solid 3rem var(--soci-green);
}


/* Hide Content Type */
.learning-path-milestone-item__info {
 display: none;
}


/******* Video Content Type *******/
/* Green footer */
body.video {
   border-bottom: solid 3rem var(--soci-green);
}


/******* Course *******/
/* Rounded corners for sidebar */
.expandable-sidebar__link > .expandable-sidebar__toggle {
 border-radius: 0.5rem 0.5rem 0 0;
}




/* WISTIA PLAYER COLOR OVERRIDE */


/* === BIG OVERLAY PLAY BUTTON === */


/* The two background divs that form the play pill */
.w-big-play-button div:first-child,
.w-big-play-button div:nth-child(2) {
 background: #373B41 !important;
 background-color: #373B41 !important;
}


/* Optional: slight translucent overlay if you want a layered effect */
.w-big-play-button div:nth-child(2) {
 background-color: rgba(55, 59, 65, 0.8) !important;
}


/* The white play icon */
.w-big-play-button svg {
 fill: #FFFFFF !important;
 color: #FFFFFF !important;
}


/* Backup for icons using CSS variable */
.w-big-play-button {
 --wistia-player-icon-color: #FFFFFF !important;
}




/* === BOTTOM CONTROL BAR === */


/* The two layers of the control bar background */
.w-bottom-bar .w-bottom-bar-lower > div:first-child > div:nth-child(1),
.w-bottom-bar .w-bottom-bar-lower > div:first-child > div:nth-child(2),
.w-bottom-bar .w-bottom-bar-lower > div:nth-of-type(2) > div:nth-child(1),
.w-bottom-bar .w-bottom-bar-lower > div:nth-of-type(2) > div:nth-child(2) {
 background: #373B41 !important;
 background-color: #373B41 !important;
}


/* Optional translucent top tint */
.w-bottom-bar .w-bottom-bar-lower > div:first-child > div:nth-child(2),
.w-bottom-bar .w-bottom-bar-lower > div:nth-of-type(2) > div:nth-child(2) {
 background-color: rgba(55, 59, 65, 0.85) !important;
}


/* Icon color inside control bar (play, volume, CC, fullscreen, etc.) */
.w-bottom-bar {
 --wistia-player-icon-color: #FFFFFF !important;
}


/* Optional: subtle hover for buttons */
.w-bottom-bar .w-vulcan-v2-button { background-color: transparent !important; }
.w-bottom-bar .w-vulcan-v2-button:hover { background-color: rgba(255, 255, 255, 0.12) !important; }








/**************************** CSS FROM TI ****************************/
/** SPACE CLASSES **/
/*Add these classes to any widget to add padding. Add "top",
, "bottom", "sides", or "all" to specify position*/


:root {
 --space-none: 0;
     --space-xxs: 0.25rem;
     --space-xs: 0.5rem;
     --space-sm: 0.75rem;
     --space-base: 1rem;
     --space-lg: 1.5rem;
     --space-xl: 2rem;
     --space-2xl: 3rem;
     --space-3xl: 4rem;
     --space-4xl: 5rem;
     --space-5xl: 6rem;
     --space-6xl: 7rem;


     --set-width-1:1900px;
     --set-width: 2300px;
}
.space-none-all {
 padding: var(--space-none)!important;
}


.space-none-top {
 padding-top: var(--space-none)!important;
}


.space-none-bottom {
 padding-bottom: var(--space-none)!important;
}


.space-none-sides {
 padding-left: var(--space-none)!important;
 padding-right: var(--space-none)!important;
}


.space-sm-all {
 padding: var(--space-2xl)!important;
}


.space-sm-top {
 padding-top: var(--space-2xl)!important;
}


.space-sm-bottom {
 padding-bottom: var(--space-2xl)!important;
}


.space-sm-sides {
 padding-left: var(--space-2xl)!important;
 padding-right: var(--space-2xl)!important;
}


.space-base-all {
 padding: var(--space-3xl)!important;
}


.space-base-top {
 padding-top: var(--space-3xl)!important;
}


.space-base-bottom {
 padding-bottom: var(--space-3xl)!important;
}


.space-base-sides {
 padding-left: var(--space-3xl)!important;
 padding-right: var(--space-3xl)!important;
}


.space-lg-all {
 padding: var(--space-4xl)!important;
}


.space-lg-top {
 padding-top: var(--space-4xl)!important;
}


.space-lg-bottom {
 padding-bottom: var(--space-4xl)!important;
}


.space-lg-sides {
 padding-left: var(--space-4xl)!important;
 padding-right: var(--space-4xl)!important;
}
/**END SPACE CLASSES**/


/* Dashboard Header */
.header.header--dashboard {
 padding: var(--space-xs);
 background-color: var(--accent-color);
 color: var(--accent-contrast-color);
}


.avatar.avatar--initials {
 background: var(--soci-light-gray);
 color: #0C0C0D;
}


.dashboard-header__arrow {
   color: var(--accent-contrast-color);
}


.dashboard-header__name {
 display: none;
}


/*** NAVIGATION ***/
.header.header--microsite, .header.header--article {
 padding: var(--space-xs);
 margin: 0 auto;
 background-color: var(--accent-color);
}


/*Making the layout of the navigation more flexible*/
.header.header--microsite .header__inner, .header.header--article .header__inner {
 display: flex;
 flex-direction: row;
 gap: var(--space-base);
 align-items: center;
 max-width: var(--set-width);
 margin: 0 auto;
}


.header.header--microsite .header__inner .company__beta-logo, .header.header--dashboard .header__inner .company__beta-logo, .header.header--article .header__inner .company__beta-logo {
 /* order: 1;
 width:50px; */
 max-height: none;
 max-width: 130px;
 margin-top: 5px;
}


/* Make company logo a max of 155px */
.course__container .header .company__beta-logo .company-logo__container img {
 max-width: 155px;
}


/*Fixing items in main navigation*/
.header.header--microsite .header__inner .top-bar {
 order: 2;
 flex-grow: 1;
 border: none;
 background-color: transparent;
}


/*Fixing dropdown items in main navigation*/
.header.header--microsite .header__inner .top-bar-section .dropdown {
 background: #7fe0bd !Important;
 border: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}


/* Making arrow for header dropdown white*/
.top-bar-section .has-dropdown>a:after, .top-bar-section  .navigation-widget__item--has-dropdown>a:after {
 border-top: 5px solid white !important;
}


/* Make header links bold */
 .top-bar-section li:not(.has-form) a:not(.button) {
     font-weight: bold;
   }


/* Make header dropdown items smaller line height */
 .top-bar-section .dropdown li a {
   line-height: 1.5rem !important;
   font-weight: normal !important;
 }


/* Add hover bold to header dropdown items */
.top-bar-section .dropdown li a:hover {
   font-weight: 600 !important;
 }




/*Centering the menu items*/
.header.header--microsite .header__inner .top-bar .left {
   display: flex;
   flex-direction: row;
   width: 100%;
   justify-content: left;
}


/*Setting all navigation items to the same style*/
.header.header--microsite a, .header.header--microsite .header__inner .top-bar-section ul li, .header.header--microsite .header__inner .nav--top ul button {
 background-color: transparent!important;
 color: #0C0C0D !important;
 font-size: 0.875rem !important;
 text-transform: none!important;
}


/*Fixing layout of manager access + cart buttons*/
.header.header--microsite .header__inner .nav.nav--top {
 order: 3;
}


.header.header--microsite .header__inner .nav.nav--top ul {
 display: flex;
 align-items: center;
}


#cart-button {
 display:none;
}


/*==================================================================
  HEADER + NAV FIXES
  1. Centers TI's global search bar in the dashboard header and stops
     it wrapping below the logo at narrow widths.
  2. Gives Foundation's collapsed nav toggle enough height to render
     all three hamburger bars without clipping.
==================================================================*/

/******* DASHBOARD HEADER — center search bar, prevent wrap *******/

.header.header--dashboard .header__inner {
  max-width: var(--set-width);
  margin: 0 auto;
}

/* Turn Foundation's grid row into a flex row */
.header.header--dashboard .header__inner > .row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-base);
  max-width: none;
  width: 100%;
}

/* Dissolve the .column boxes so logo / search / user menu become
   direct flex siblings */
.header.header--dashboard .header__inner > .row > .column {
  display: contents;
}

/* LEFT — logo. flex:1 1 0 makes it an equal-width gutter. */
.header.header--dashboard .header__inner .company__beta-logo {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  margin-top: 0;
  display: flex;
  align-items: center;
}
.header.header--dashboard .header__inner .company__beta-logo img {
  max-width: 130px;
  height: auto;
}

/* CENTER — the search bar */
.header.header--dashboard .header__inner .header__search {
  flex: 0 1 clamp(220px, 30vw, 420px);
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 auto;
  clear: none;
}

/* RIGHT — user menu. Equal gutter, pinned right. */
.header.header--dashboard .header__inner > .row > .column:last-child > .ember-view {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Mid widths — stay on one row, search shrinks instead of dropping */
@media (max-width: 1045px) {
  .header.header--dashboard .header__inner .header__search {
    flex: 1 1 auto;
    margin: 0;
  }
  .header.header--dashboard .header__inner .company__beta-logo,
  .header.header--dashboard .header__inner > .row > .column:last-child > .ember-view {
    flex: 0 0 auto;
  }
}

/* Phone — logo and avatar on row one, search on row two */
@media (max-width: 640px) {
  .header.header--dashboard .header__inner > .row {
    flex-wrap: wrap;
  }
  .header.header--dashboard .header__inner .header__search {
    order: 3;
    flex: 1 0 100%;
    margin: var(--space-xs) 0 0;
  }
  .header.header--dashboard .header__inner .company__beta-logo {
    flex: 1 1 auto;
  }
  .header.header--dashboard .header__inner > .row > .column:last-child > .ember-view {
    flex: 0 0 auto;
  }
}

/******* COLLAPSED NAV — hamburger clipping *******/
/* WARNING: Foundation uses height + overflow:hidden as the collapse
   mechanism. Do NOT set height:auto on .top-bar here — the menu will
   render permanently expanded. Only .expanded gets height:auto. */

@media only screen and (max-width: 40em) {
  .widget--navbar_standard.soci > .row > .small-12 > .top-bar {
    height: 45px;
    line-height: 45px;
  }
  .widget--navbar_standard.soci > .row > .small-12 > .top-bar.expanded {
    height: auto;
    line-height: normal;
  }
  /* Desktop item divider becomes a stray vertical line when stacked */
  .widget--navbar_standard.soci > .row > .small-12 > .top-bar .top-bar-section ul > li.navigation-item {
    border-right: none;
  }
}







/*** FOOTER ***/
.footer {
 display: flex;
 justify-content: center;
 background-color: var(--accent-color);
 padding: var(--space-base) var(--space-lg);
}


.footer-container {
 display: flex;
 flex-direction: column;
 width: var(--set-width);
 gap: var(--space-xl);
 background-color: transparent;
}


.footer .logo {
 width: 150px;
}
.footer .links {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-2xl);
}


.footer .links > * {
 flex: 1 1 15rem;
}


.footer .address {
 inline-size: 180px;
 overflow-wrap: break-word;
}


.footer .address p {
 color: #0C0C0D;
}


.footer .col {
 display: flex;
 flex-direction: column;
 gap: var(--space-xs);
 width: 100%;
}


.footer .col:first-child {
 gap: var(--space-lg);
}


.footer .footer__inner {
 border: none;
}


.footer .footer__company__info {
 display: none;
}


.footer p {
 color: #0C0C0D;
 margin-bottom: 0;
}


.footer a {
 color: #0C0C0D;
 font-weight: 700;
}


.footer li {
 list-style-type: none;
}


.footer .socials {
 display: flex;
 flex-direction: row;
 width: fit-content;
 gap: var(--space-lg);
}


.footer .btn--social i {
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 1.5rem;
}


.footer .captions {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 gap: var(--space-base);
}


.footer .captions a {
 font-weight: 400;
}


.footer .captions a, .footer .captions p {
 font-size: 0.875rem;
}


.footer .captions > * {
 flex: 1 1 15rem;
}


.footer .captions .col {
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: var(--space-2xl);
}


.footer .captions .col:last-child {
 justify-content: end;
}
/******* END FOOTER *******/


/* Hide Content Type on Dashboard */
.dashboard-access-list-item > .grid-cols-12 > .col-span-3 {
 display: none;
}




.session__forgot {
 display: none;
}








/********** PANORAMA-SPECIFIC CSS **********/


/*
INVENTORY OF CLASSES TO APPLY
   panorama          Activates the widget's global styles, needs to be added to every widget
   panorama-black-variant      Black background variant
   panorama-dark-variant   Customer's primary brand color variant (dark)
    panorama-light-variant   Customer's primary brand color variant (light)
   panorama-white-variant          White background variant
   panorama-light-gray-variant     Gray background variant
   panorama-title-large            Override default to use large title size
   panorama-title-medium           Override default to use medium title size
   panorama-title-primary            Override default to use primary title color
   panorama-title-white            Override default to use white title color
   panorama-title-black            Override default to use black title color
   panorama-gray-tiles             Light Gray Background for Widget Tiles
   panorama-no-padding-tiles       Remove Padding from Widget Images


   Panorama primary brand color: var(--accent-color);
   Panorama secondary brand color: var(--secondary-color);












/* Default size and top margin for widget titles */
.panorama > .row h3, .row h2, .row h1 {
   margin-top: 1rem;
   font-size: var(--soci-title-small-size);
   font-weight: 900;
}


/******* GLOBAL BUTTON CSS *******/
/* Global styling for buttons in soci widgets */
.panorama .widget__title-cta, .panorama .btn--alt, 
.panorama .btn--primary:not(.btn--link):not(.btn--bare) {
   background-color: var(--accent-color);
   color: var(--accent-contrast-color);
   border: none;
   border-radius: 5px;
   transition: transform 0.3s;
   font-weight: 700;
   padding: 0.75rem 1.5rem;
   margin-top: 12px;
}


/******* MANUALLY ADDED BUTTONS *******/
/* Green button with black text */
.panorama-dark-button {
   display: block;
   width: fit-content;
   background-color: var(--accent-color);
   color: var(--accent-contrast-color);
   border: none;
   border-radius: 5px;
   transition: transform 0.3s;
   font-weight: 700;
   padding: 0.75rem 1.5rem;
}


/* White button with green text */
.panorama-light-button {
   display: block;
   width: fit-content;
   background-color: var(--accent-color);
   color: var(--accent-contrast-color);
   border: 1px solid var(--accent-color);
   border-radius: 5px;
   transition: transform 0.3s;
   font-weight: 700;
   padding: 0.75rem 1.5rem;
}




/******* FORMATTING CSS FOR PAGE BUILDER WIDGETS *******/
/* Common styling for tiles contained in widgets - light gray variant */
.panorama.panorama-gray-tiles > .row .featured-content-block-grid > li > .catalog-item,.catalog-grid-item,
.panorama.panorama-gray-tiles > .row .featured-content-multi-carousel .featured-content-multi-carousel-item {
   background-color: var(--soci-gray);
   border-radius: 5px;
   border: none;
}


/* Tiles background for Carousel Item */
.panorama .featured-content-multi-carousel-item {
   background: white;
   border-radius: 5px;
}




/* Common styling for carousel items in widgets */
.panorama .featured-content-multi-carousel .featured-content-block-grid {
   display: flex;
   align-items: stretch;
}


/* Text size in featured carousel widget */
.panorama .featured-content-multi-carousel-item__description {
   font-size: 14px;
}


.panorama .featured-content-multi-carousel-item__title {
   font-size: 16px;
}


.panorama .featured-content-multi-carousel .ember-view.catalog-item {
   height: 100%
}


/* Common styling for course images inside tiles */
.panorama > .row .featured-content-block-grid > li .catalog-grid-item__asset {
   border-radius: 5px 5px 0 0;
   border: none;
}


/* Removal of padding on course images inside tiles */
.panorama.panorama-no-padding-tiles img {
 padding: 0;
}


/* Common styling for widget subtitles */
.panorama .widget__alt-title__container p {
   font-size: initial;
}


/* Remove extra TI border in descriptive layout widget type */
.panorama > .row .featured-content-article-item {
   border: none;
}




/******* COLOR VARIANT CSS *******/
/* black widget variant */
.panorama-black-variant > .row,
.panorama-black-variant.widget {
   background-color: #0C0C0D;
}


.panorama-black-variant > .row h3,
.panorama-black-variant > .row h2,
.panorama-black-variant.widget,
.panorama-black-variant.widget h3,
.panorama-black-variant.widget h2,
.panorama-black-variant.widget .widget__subtitle {
   color: var(--accent-contrast-color);
}


/* light-green variant navigation widget override */
.widget--navbar_standard.panorama-black-variant > .row > .small-12 > .top-bar .top-bar-section ul li>a {
   color: var(--accent-contrast-color) !Important;
 }


/* Panorama dark brand color widget variant */
.panorama-dark-variant > .row,
.panorama-dark-variant.widget {
   background-color: var(--accent-color);
}


.panorama-dark-variant > .row h3,
.panorama-dark-variant > .row h2,
.panorama-dark-variant.widget,
.panorama-dark-variant.widget h3,
.panorama-dark-variant.widget h2,
.panorama-dark-variant .widget__subtitle {
   color: var(--accent-contrast-color);
}


/* dark widget button style override */
.panorama-dark-variant .widget__title-cta,
.panorama-dark-variant .btn.btn--primary {
   background-color: var(--accent-color);
   color: var(--accent-contrast-color);
}


/* light variant navigation widget override */
.widget--navbar_standard.panorama-light-variant > .row > .small-12 > .top-bar .top-bar-section ul li>a {
 color: var(--accent-contrast-color) !Important;
}


/* Panorama light brand color widget variant */
.panorama-light-variant > .row,
.panorama-light-variant.widget {
   background-color: var(--accent-color);
}


.panorama-light-variant > .row h3,
.panorama-light-variant > .row h2,
.panorama-light-variant.widget,
.panorama-light-variant.widget h3,
.panorama-light-variant.widget h2,
.panorama-light-variant.widget .widget__subtitle {
   color: var(--accent-contrast-color);
}


/* light widget button style override */
.panorama.panorama-light-variant .widget__title-cta,
.panorama.panorama-light-variant .btn.btn--primary {
   background-color: var(--accent-color);
   color: var(--accent-contrast-color);
}


/* light variant navigation widget override */
.widget--navbar_standard.panorama-light-variant > .row > .small-12 > .top-bar .top-bar-section ul li>a {
 color: var(--accent-contrast-color) !Important;
}


/* white widget variant */
.panorama-white-variant > .row,
.panorama-white-variant.widget {
   background-color: white;
}


.panorama-white-variant > .row h3,
.panorama-white-variant > .row h2,
.panorama-white-variant.widget,
.panorama-white-variant.widget h3,
.panorama-white-variant.widget h2,
.panorama-white-variant.widget .widget__subtitle {
   color: #333333;
}


/* light variant navigation widget override */
.widget--navbar_standard.panorama-white-variant > .row > .small-12 > .top-bar .top-bar-section ul li>a {
 color: #333333 !Important;
}




/* light gray widget variant */
.panorama-light-gray-variant > .row,
.panorama-light-gray-variant.widget {
   background-color: var(--soci-light-gray);
}


.panorama-light-gray-variant > .row h3,
.panorama-light-gray-variant > .row h2,
.panorama-light-gray-variant.widget,
.panorama-light-gray-variant.widget h3,
.panorama-light-gray-variant.widget h2,
.panorama-light-gray-variant.widget .widget__subtitle {
   color: #0C0C0D;
}


/* light gray widget button style override */
.panorama.panorama-light-gray-variant .widget__title-cta,
.panorama.panorama-light-gray-variant .btn.btn--primary {
   background-color: #0C0C0D;
   color: white;
}


/* light variant navigation widget override */
.widget--navbar_standard.panorama-light-gray-variant > .row > .small-12 > .top-bar .top-bar-section ul li>a {
 color: #0C0C0D !Important;
}




/******* HEADING VARIANTS *******/
/* large title size override */
.panorama.panorama-title-large h3,
.panorama.panorama-title-large h2,
.panorama.panorama-title-large h1 {
   font-size: var(--soci-title-large-size);
}


/* medium title size override */
.panorama.panorama-title-large h3,
.panorama.panorama-title-large h2,
.panorama.panorama-title-large h1 {
   font-size: var(--soci-title-medium-size);
}


/* primary accent title color override */
.panorama.panorama-title-accent h3,
.panorama.panorama-title-accent h2,
.panorama.panorama-title-accent h1 {
   color: var(--accent-color);
}


/* black title color override */
.panorama.panorama-title-black h3,
.panorama.panorama-title-black h2,
.panorama.panorama-title-black h1 {
   color: black;
}


/* white title color override */
.panorama.panorama-title-white h3,
.panorama.panorama-title-white h2,
.panorama.panorama-title-white h1  {
   color: white;
}


/******* CATALOG HEADING AND UTILITY BUTTONS AND FIELDS *******/
/* hide catalog header */
.panorama .catalog-header {
   visibility: hidden;
   height:0;
}


/* round borders for all of the utility row */
.panorama .catalog-filters {
   border-radius: 5px;
}




/* round borders for search field */
.panorama .catalog-filters__search {
   border-radius: 5px 0 0 5px;
}


/* round borders for sort field */
.panorama .catalog-filters__sort {
   border-radius: 0 5px 5px 0;
}


/* round borders for view buttons */
.panorama .catalog-display-type button {
   border-radius: 5px;
}


/******* CATALOG NAVIGATION DESIGN *******/
/* navigation category heading hover color */
.panorama .catalog-aggregation__header--label:hover {
   color: var(--accent-color);
}


/* navigation heading padding */
.panorama .catalog-aggregation {
   padding: 1em 0.5em 0.6em 0.5em;
   margin-bottom: 0.75rem;
}


/* expanded navigation background color and border */
.panorama .catalog-aggregation--expanded {
   background-color: var(--secondary-color);
   border: 1px solid #d1d5db;
   border-radius: 5px;
   margin-bottom: 1rem;
}


/* expanded navigation normal link color */
.panorama .btn.catalog-aggregation__value {
   color: #0C0C0D;
}


/* expanded navigation hover link color */
.panorama .btn.catalog-aggregation__value:hover {
   color: var(--accent-color);
}


/* non-expanded navigation background color and border */
.panorama .catalog-aggregation {
 background-color: var(--secondary-color);
   border: 1px solid #d1d5db;
   border-radius: 5px;
}


/******* CATALOG COURSE TILES *******/
/* round borders for course image */
.panorama .catalog-grid-item__asset {
   border-radius: 5px 5px 0 0;
}


/* font size for author */
.panorama .featured-content-item__authors {
   font-size: 0.8rem;
}


/* font size for description */
.panorama .catalog-grid-item__description {
   font-size: 0.8rem;
}


/* view details link font weight */
.panorama .btn--link.btn--primary {
   font-weight: 700;
}


/* view details link hover zoom effect */
.panorama .btn--link.btn--primary:hover {
   transform: scale(1.05);
}


/* right padding for link button due to zoom effect */
.panorama .catalog-grid-item__cta-container {
   padding-right: 5px
}


/* color of completed checkmark */
.panorama .catalog-grid-item__completed i {
   color: var(--accent-color);
}


/* hide content type
.soci .catalog-grid-item__source {
   display: none;
}*/


/******* LEARNER DASHBOARD DESIGN *******/
/******* Global Navigation Widget Changes *******/
.widget--navbar_standard.panorama {
 padding: 1.5rem 2rem 0rem 2rem !Important;
}


.widget--navbar_standard.panorama > .row > .small-12 > .top-bar {
 background: transparent !Important;
}


.widget--navbar_standard.panorama > .row > .small-12 > .top-bar .top-bar-section ul li {
 background: transparent !Important;
 border-right: solid 1px;
}


.widget--navbar_standard.panorama > .row > .small-12 > .top-bar .top-bar-section li:not(.has-form) a:not(.button) {
 background: transparent !Important;
}


.widget--navbar_standard.panorama > .row > .small-12 > .top-bar .top-bar-section ul.left {
   border-bottom: none;
}


/******* Learner Access Widget *******/
/* secondary background on heading row */
.panorama .dashboard-access-tabs {
   background: var(--secondary-color);
}


/* text color for inactive tabs */
.panorama .dashboard-access-tab--inactive button {
   color: #0C0C0D;
}


/* text color for active tabs */
.panorama .dashboard-access-tab--active .btn--link {
   color: var(--accent-color);
}


/* text hover color for active tabs */
.panorama .dashboard-access-tab--active .btn--link:hover {
 color: var(--accent-tinted-color-80);
}


/* color for number in circle */
.panorama .dashboard-access-tab__count {
   color: var(--accent-color);
}


/* background color for every other course */
.panorama .dashboard-access-list-item:nth-of-type(2n) {
   background: var(--soci-light-gray);
}


/* progress bar gradient */
.panorama .progress.colorized .meter {
   background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
}


/* total hours stat text color */
.panorama .user-engagement-stat--collaborations, .user-engagement-stat--hours {
   color: var(--accent-color);
}


/* total hours icon color */
.panorama .icon-stopwatch:before {
   color: var(--accent-color);
}


/* content viewed stat text color - Not able to change this color */


/* complete stat text color */
.panorama .user-engagement-stat--percent-complete {
   color: var(--accent-color);
}




/* Panorama-specific Custom fonts */
@import url("https://www.willowbridgepc.com/themes/lincoln-2021/corp/main/shared/stylesheets/app-c7060211.min.css");


@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap");