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

      :root {
        --font: Lato;
        --alt-font: Lato;
        --accent-color: #29cc91;
        --secondary-color: #0c0c0d;
        --link-color: #5bcee4;
        --accent-highlight-color: #0f4d36;
        --accent-highlight-background-color: #e1f9f1;
        --accent-tinted-color-70: #bff0de;
        --accent-tinted-color-80: #d4f5e9;
        --accent-tinted-color-90: #eafaf4;
        --accent-contrast-color: #111;
        --accent-contrast-tinted-background-color: #fff;
        --accent-hover-color: #20a273;
        --secondary-hover-color: #242428;
        --secondary-contrast-color: #fff;
        --link-hover-color: #1fa1ba;
      }
      
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://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/0c38c8ed-5f01-4a9b-9e1c-757da1c4d2f7/9fdb1twrmt3w-SOCiULogowbulbB.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;
}



/**************************** 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;
}

/*** 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);
}