:root {
        --font: 'Inter', sans-serif;;
        --alt-font: 'Poppins', sans-serif;;
        --accent-color: #0091a1;
        --secondary-color: #e9ed54;
        --link-color: #0091a1;
        --accent-highlight-color: #00353b;
        --accent-highlight-background-color: #54eeff;
        --accent-tinted-color-70: #b3dee3;
        --accent-tinted-color-80: #cce9ec;
        --accent-tinted-color-90: #e6f4f6;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #00bfd4;
        --secondary-hover-color: #e3e826;
        --secondary-contrast-color: #111;
        --link-hover-color: #08e6ff;
      }
      

.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/a6befdf5-930e-4572-b7ce-008caa9a78ba/6eicm8dwc9qm-ti_ico.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
/* EDITED ON 02/15/2024 - 08:02AM EST - Edited by Ale */
/* CHANGE LOG: 
- Light/Dark THeme Variables  work
    - Added some CSS for Personas:
      - shortened Select dropdown field length to max-width of 200px
      - added margins of 4em 8em 1em 8em for persona container (".pathfinder")
      - added margins of 0 em to .container-filtering and flex-wrap: wrap property to wrap elements in-between breakpoints
      -edited  and  margins to 1em 0.5em
      - adjusted select dropdown radius to 6px
      - changed .jumbotron h1 to 48px, font weigh to 800, and set text-transform to capitalize
      - added display: flex attribute to container-filtering class, and align-items: center + justify-content: center to center fields
      - added code to @media 768 breakpoint for mobile version of persona:
          - changed flex-direction from row to column (.container-filtering)
          - changed max-width to 100% for select input ()
          - changed jumbotron h1 size to 36px (.jumbotron h1)
          - changed font size to 16px; ()
          - changed flex-wrap to nowrap; (.container-filtering)
          - adjusted padding to 4em 4em 1 em 4em (.pathfinder)
          - adjusted margins to 0.5em for .select and .container-filtering  tag
          - added class specifier for select changes (.container-filtering)

        --Added Variable for Border Radius: none or default 4px
        -- changed "align-items" from flex-start to center
      
      -Hiding navigational header of Academy in Atlas--can't find embed class within Article/video template
        -Pushed article to -2em top position to accomodate for hidden header
        -Removed all code for this until we can get this fixed

        --LP hiding overlay and adding more styles that follow the variable system
        
        --Fixing display error in Atlas Carousel Cards by having the new grid code that standardizes card sizes exclusively for catalog and featured content cards only.
        

        -- Added Redemdetion Widget Fix
        
        -- Added code for new snippet for Courses (per LS request)
            -Incldues a variation of the tiOS cards
            -Edited green highlighted box to blue
            
        -- Fixing padding and width of video widget in Atlas
        
        --Adding some CSS for the new content page header block for CECP
          -Adding some new variables for the CSS snipper block
          -Working on creating new section block for CECP

*/

:root {
      /* Light Theme */

      --academy-light:#8BD2D6;
      --helpcenter-light:#E9ED54;
      --communities-light:#A2D5AB;
      --developer-doc-light:var(--surface-100);

      --brand-academy-light:#ea2b7b;
      --brand-helpcenter-light: #2864F6;
    
      --ui-primary-light:#374151;
      --ui-secondary-light:#6B7280;
      --ui-tertiary-light:#CBCBCB;
      --ui-quaternary-light:#FFFFFF;
      --ui-disabled-light:#EAEDEF;
    
      --ui-error-light:#FF3B30;
      --ui-success-light:#62B771;
      --ui-warning-light:#F59E0B;
      
      --text-primary-light:#1F2937;
      --text-secondary-light:#6B7280;
      --text-disabled-light: #A1A1AA;
      --text-inverse-light: #FFFFFF;
    
      --border-100-light:#E5E7EB;
      --border-200-default-light:#D1D5DB;
      --border-disabled-light:#E4E4E7;
      --accessibility_focus-light:#2ED0E1;
    
      --surface-100-light:#FFFFFF;
      --surface-200-light:#F3F4F6;
      --surface-disabled-light:#E4E4E7;
    
      --bg-default-light:#F3F4F6;
  
      --shadow-color-light: 220deg 5% 58%;
      --blend-mode-light: multiply;
    
  
  /* Dark theme */
    --brand-academy-dark:#ea2b7b;
    --brand-helpcenter-dark: #2864F6;
  
    --ui-primary-dark:#D4D4D8;
    --ui-secondary-dark:#71717A;
    --ui-tertiary-dark:#52525B;
    --ui-quaternary-dark:#18181B;
    --ui-disabled-dark:#000000;
  
    --ui-error-dark: #FF3B30;
    --ui-success-dark:#62B771;
    --ui-warning-dark:#F59E0B;
   
  
    --text-primary-dark: #D4D4D8;
    --text-secondary-dark: #A1A1AA;
    --text-disabled-dark: #1E293B;
    --text-inverse-dark: #18181B;
  
    --border-100-dark:#52525B;
    --border-200-default-dark:#71717A;
    --border-disabled-dark:#E4E4E7;
    --accessibility_focus-dark:#2ED0E1;
  
    --surface-100-dark: #27272A; 
    --surface-200-dark: #18181B;
    --surface-disabled-dark: #52525B;
  
    --bg-default-dark: #3F3F46;
  
    --shadow-color-dark: 220deg 7% 13%;
    --blend-mode-dark: overlay;
  
  /* Default */
    --light-constant:#FFFFFF;
    --dark-constant: #18242E;
  
    --default-weight: 300;
    --bold-weight: 600;
  
    --border-radius-none: 0;
    --border-radius-default: 4px;
    --border-radius-round: 1000px;

    /*Spacing*/
    --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 for fixing an element's width to the current breakpoint */ 
    --set-width: 1440px;
    --set-width-max: 100%;

    --set-width-xs: 420px;
    --set-width-sm: 640px;
    --set-width-md: 768px;
    --set-width-lg: 1024px;
    --set-width-xl: 1280px;
    --set-width-2xl: 1536px;
    
  /* CECP Landing Page Colors  Delete if pages are not being used */
    --background-cyan: #C8EAEB;
    --background-green: #AEE3CE;
    --background-pink: #FFCCD9;
    --background-yellow: #FBE29E;
  
  }
      
      
  @media(prefers-color-scheme: dark){
    :root {
      --brand-academy:var( --brand-academy-dark);
      --brand-helpcenter:var( --brand-helpcenter-dark);
  
      --ui-primary:var(--ui-primary-dark);
      --ui-secondary:var(--ui-secondary-dark);
      --ui-tertiary:var(--ui-tertiary-dark);
      --ui-quaternary:var(--ui-quaternary-dark);
      --ui-disabled:var(--ui-disabled-dark);
    
      --ui-error:var(--ui-error-dark);
      --ui-success:var(--ui-success-dark);
      --ui-warning:var(--ui-warning-dark);
      
      --text-primary: var(--text-primary-dark);
      --text-secondary: var(--text-secondary-dark);
      --text-disabled: var(--text-disabled-dark);
      --text-inverse: var(--text-inverse-dark);
    
      --border-100:var(--border-100-dark);
      --border-200-default:var(--border-200-default-dark);
      --border-disabled:var(--border-disabled-dark);
      --accessibility_focus:var();
    
      --surface-100:var(--surface-100-dark);
      --surface-200:var(--surface-200-dark);
      --surface-disabled:var(--surface-disabled-dark);
    
      --bg-default:var(--bg-default-dark);
      --blend-mode: var(--blend-mode-dark);
  
      --shadow-elevation-low:
        0.3px 0.5px 0.7px hsl(var(--shadow-color-dark) / 0.34),
        0.4px 0.8px 1px -1.2px hsl(var(--shadow-color-dark) / 0.34),
        1px 2px 2.5px -2.5px hsl(var(--shadow-color-dark) / 0.34);
      --shadow-elevation-medium:
        0.3px 0.5px 0.7px hsl(var(--shadow-color-dark) / 0.36),
        0.8px 1.6px 2px -0.8px hsl(var(--shadow-color-dark) / 0.36),
        2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color-dark) / 0.36),
        5px 10px 12.6px -2.5px hsl(var(--shadow-color-dark) / 0.36);
      --shadow-elevation-high:
        0.3px 0.5px 0.7px hsl(var(--shadow-color-dark) / 0.34),
        1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color-dark) / 0.34),
        2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color-dark) / 0.34),
        4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color-dark) / 0.34),
        7.1px 14.3px 18px -1.4px hsl(var(--shadow-color-dark) / 0.34),
        11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color-dark) / 0.34),
        17px 33.9px 42.7px -2.1px hsl(var(--shadow-color-dark) / 0.34),
        25px 50px 62.9px -2.5px hsl(var(--shadow-color-dark) / 0.34);

        --shadow-neu-hover:
        4px 4px 16px rgba(0, 0, 0, 0.5), 
        -4px -4px 16px rgba(255, 255, 255, 0.05);

        --neu-gradient:linear-gradient(
          290deg,
          hsl(195deg 6% 13%) 0%,
          hsl(196deg 7% 13%) 20%,
          hsl(197deg 7% 13%) 40%,
          hsl(198deg 8% 13%) 60%,
          hsl(199deg 8% 14%) 80%,
          hsl(200deg 8% 14%) 100%
        );
    }
  }
  
  @media(prefers-color-scheme: light) {
    :root {
      --brand-academy:var( --brand-academy-light);
      --brand-helpcenter:var( --brand-helpcenter-light);
  
      --ui-primary:var(--ui-primary-light);
      --ui-secondary:var(--ui-secondary-light);
      --ui-tertiary:var(--ui-tertiary-light);
      --ui-quaternary:var(--ui-quaternary-light);
      --ui-disabled:var(--ui-disabled-light);
    
      --ui-error:var(--ui-error-light);
      --ui-success:var(--ui-success-light);
      --ui-warning:var(--ui-warning-light);
      
      --text-primary: var(--text-primary-light);
      --text-secondary: var(--text-secondary-light);
      --text-disabled: var(--text-disabled-light);
      --text-inverse: var(--text-inverse-light);
    
      --border-100:var(--border-100-light);
      --border-200-default:var(--border-200-default-light);
      --border-disabled:var(--border-disabled-light);
      --accessibility_focus:var();
    
      --surface-100:var(--surface-100-light);
      --surface-200:var(--surface-200-light);
      --surface-disabled:var(--surface-disabled-light);
    
      --bg-default:var(--bg-default-light);
      --blend-mode: var(--blend-mode-light);
  
      --shadow-elevation-low:
        0.3px 0.5px 0.7px hsl(var(--shadow-color-light) / 0.36),
        0.4px 0.8px 1px -1.2px hsl(var(--shadow-color-light) / 0.36),
        1px 2.1px 2.6px -2.5px hsl(var(--shadow-color-light) / 0.36);
      --shadow-elevation-medium:
        0.3px 0.5px 0.7px hsl(var(--shadow-color-light) / 0.38),
        0.8px 1.7px 2.1px -0.8px hsl(var(--shadow-color-light) / 0.38),
        2.1px 4.2px 5.3px -1.7px hsl(var(--shadow-color-light) / 0.38),
        5.1px 10.3px 12.9px -2.5px hsl(var(--shadow-color-light) / 0.38);
      --shadow-elevation-high:
        0.3px 0.5px 0.7px hsl(var(--shadow-color-light) / 0.35),
        1.5px 3px 3.8px -0.4px hsl(var(--shadow-color-light) / 0.35),
        2.8px 5.7px 7.1px -0.7px hsl(var(--shadow-color-light) / 0.35),
        4.7px 9.4px 11.8px -1.1px hsl(var(--shadow-color-light) / 0.35),
        7.5px 15px 18.9px -1.4px hsl(var(--shadow-color-light) / 0.35),
        11.7px 23.4px 29.4px -1.8px hsl(var(--shadow-color-light) / 0.35),
        17.8px 35.6px 44.8px -2.1px hsl(var(--shadow-color-light) / 0.35),
        26.3px 52.5px 66.1px -2.5px hsl(var(--shadow-color-light) / 0.35);

        --shadow-neu-hover:
        8px 8px 12px -2px rgba(72, 79, 96, 0.4), 
        -6px -6px 12px -1px rgba(255, 255, 255, 1);

        --neu-gradient:linear-gradient(
          290deg,
          hsl(210deg 22% 91%) 0%,
          hsl(211deg 22% 92%) 0%,
          hsl(212deg 22% 92%) 3%,
          hsl(213deg 23% 93%) 11%,
          hsl(213deg 23% 94%) 28%,
          hsl(214deg 24% 94%) 98%
          );
      }
  }
  
  [color-scheme="dark"]{
    --brand-academy:var( --brand-academy-dark);
    --brand-helpcenter:var( --brand-helpcenter-dark);
  
    --ui-primary:var(--ui-primary-dark);
    --ui-secondary:var(--ui-secondary-dark);
    --ui-tertiary:var(--ui-tertiary-dark);
    --ui-quaternary:var(--ui-quaternary-dark);
    --ui-disabled:var(--ui-disabled-dark);
  
    --ui-error:var(--ui-error-dark);
    --ui-success:var(--ui-success-dark);
    --ui-warning:var(--ui-warning-dark);
    
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --text-disabled: var(--text-disabled-dark);
    --text-inverse: var(--text-inverse-dark);
  
    --border-100:var(--border-100-dark);
    --border-200-default:var(--border-200-default-dark);
    --border-disabled:var(--border-disabled-dark);
    --accessibility_focus:var();
  
    --surface-100:var(--surface-100-dark);
    --surface-200:var(--surface-200-dark);
    --surface-disabled:var(--surface-disabled-dark);
  
    --bg-default:var(--bg-default-dark);
    --blend-mode: var(--blend-mode-dark);
  
    --shadow-elevation-low:
      0.3px 0.5px 0.7px hsl(var(--shadow-color-dark) / 0.34),
      0.4px 0.8px 1px -1.2px hsl(var(--shadow-color-dark) / 0.34),
      1px 2px 2.5px -2.5px hsl(var(--shadow-color-dark) / 0.34);
    --shadow-elevation-medium:
      0.3px 0.5px 0.7px hsl(var(--shadow-color-dark) / 0.36),
      0.8px 1.6px 2px -0.8px hsl(var(--shadow-color-dark) / 0.36),
      2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color-dark) / 0.36),
      5px 10px 12.6px -2.5px hsl(var(--shadow-color-dark) / 0.36);
    --shadow-elevation-high:
      0.3px 0.5px 0.7px hsl(var(--shadow-color-dark) / 0.34),
      1.5px 2.9px 3.7px -0.4px hsl(var(--shadow-color-dark) / 0.34),
      2.7px 5.4px 6.8px -0.7px hsl(var(--shadow-color-dark) / 0.34),
      4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color-dark) / 0.34),
      7.1px 14.3px 18px -1.4px hsl(var(--shadow-color-dark) / 0.34),
      11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color-dark) / 0.34),
      17px 33.9px 42.7px -2.1px hsl(var(--shadow-color-dark) / 0.34),
      25px 50px 62.9px -2.5px hsl(var(--shadow-color-dark) / 0.34);
      
      --shadow-neu-hover:
        4px 4px 16px rgba(0, 0, 0, 0.5), 
        -4px -4px 16px rgba(255, 255, 255, 0.05);

        --neu-gradient:linear-gradient(
          290deg,
          hsl(195deg 6% 13%) 0%,
          hsl(196deg 7% 13%) 20%,
          hsl(197deg 7% 13%) 40%,
          hsl(198deg 8% 13%) 60%,
          hsl(199deg 8% 14%) 80%,
          hsl(200deg 8% 14%) 100%
          );
  }
  
  [color-scheme="light"] {
    --brand-academy:var( --brand-academy-light);
    --brand-helpcenter:var( --brand-helpcenter-light);
    
    --ui-primary:var(--ui-primary-light);
    --ui-secondary:var(--ui-secondary-light);
    --ui-tertiary:var(--ui-tertiary-light);
    --ui-quaternary:var(--ui-quaternary-light);
    --ui-disabled:var(--ui-disabled-light);
  
    --ui-error:var(--ui-error-light);
    --ui-success:var(--ui-success-light);
    --ui-warning:var(--ui-warning-light);
    
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --text-disabled: var(--text-disabled-light);
    --text-inverse: var(--text-inverse-light);
  
    --border-100:var(--border-100-light);
    --border-200-default:var(--border-200-default-light);
    --border-disabled:var(--border-disabled-light);
    --accessibility_focus:var();
  
    --surface-100:var(--surface-100-light);
    --surface-200:var(--surface-200-light);
    --surface-disabled:var(--surface-disabled-light);
  
    --bg-default:var(--bg-default-light);
    --blend-mode: var(--blend-mode-light);
  
    --shadow-elevation-low:
      0.3px 0.5px 0.7px hsl(var(--shadow-color-light) / 0.36),
      0.4px 0.8px 1px -1.2px hsl(var(--shadow-color-light) / 0.36),
      1px 2.1px 2.6px -2.5px hsl(var(--shadow-color-light) / 0.36);
    --shadow-elevation-medium:
      0.3px 0.5px 0.7px hsl(var(--shadow-color-light) / 0.38),
      0.8px 1.7px 2.1px -0.8px hsl(var(--shadow-color-light) / 0.38),
      2.1px 4.2px 5.3px -1.7px hsl(var(--shadow-color-light) / 0.38),
      5.1px 10.3px 12.9px -2.5px hsl(var(--shadow-color-light) / 0.38);
    --shadow-elevation-high:
      0.3px 0.5px 0.7px hsl(var(--shadow-color-light) / 0.35),
      1.5px 3px 3.8px -0.4px hsl(var(--shadow-color-light) / 0.35),
      2.8px 5.7px 7.1px -0.7px hsl(var(--shadow-color-light) / 0.35),
      4.7px 9.4px 11.8px -1.1px hsl(var(--shadow-color-light) / 0.35),
      7.5px 15px 18.9px -1.4px hsl(var(--shadow-color-light) / 0.35),
      11.7px 23.4px 29.4px -1.8px hsl(var(--shadow-color-light) / 0.35),
      17.8px 35.6px 44.8px -2.1px hsl(var(--shadow-color-light) / 0.35),
      26.3px 52.5px 66.1px -2.5px hsl(var(--shadow-color-light) / 0.35);

    --shadow-neu-hover:
        8px 8px 12px -2px rgba(72, 79, 96, 0.4), 
        -6px -6px 12px -1px rgba(255, 255, 255, 1);
    
     --neu-gradient:linear-gradient(
          290deg,
          hsl(210deg 22% 91%) 0%,
          hsl(211deg 22% 92%) 0%,
          hsl(212deg 22% 92%) 3%,
          hsl(213deg 23% 93%) 11%,
          hsl(213deg 23% 94%) 28%,
          hsl(214deg 24% 94%) 98%
      );
  }
  
/*** SET WIDTH CLASS ***/

/**MAKE WIDGETS FIXED WIDTH**/
/*Add "set-width" class to a widget to fix the width of the container holding content*/
.set-width {
    max-width: var(--set-width);
}
.set-width-xs {
    max-width: var(--set-width-sm);
}
.set-width-md {
    max-width: var(--set-width-md);
}
.set-width-lg {
    max-width: var(--set-width-lg);
}
.set-width-xl {
    max-width: var(--set-width-xl);
}

.set-width .ember-view:first-child {
  /* max-width: var(--set-width); */
  margin: 0 auto;
}

/*Extra code to make widgets follow set-width classes but allow background to change*/
.widget-contain .row, .set-width.widget--title.widget--title_standard  {
  max-width: var(--set-width);
  margin: 0 auto;
}

/*** END SET WIDTH CLASS ***/


/*** SPACE CLASSES ***/
/*Add these classes to any widget to add padding. Add "top", "bottom", "sides", or "all" to specify position*/
.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;
}
/*GAP CLASSES*/
/*Use these classes with widgets that have a layout of cards*/

/*Add "gap-none" to set the gap in between objects to none*/
.gap-none .container, .gap-none [class*=block-grid-] {
  gap: var(--space-none)!important;
}

/*Add "gap-base" to set the gap in between objects to base*/
.gap-base .container, .gap-base [class*=block-grid-]{
  gap: var(--space-lg)!important;
}

/*Add "gap-lg" to set the gap in between objects to lg*/
.gap-lg .container, .gap-lg [class*=block-grid-] {
  gap: var(--space-3xl)!important;
}

/*NEGATIVE MARGIN CLASSES TO BLEED ELEMENTS BETWEEN ROWS*/
.negative-margin-top {
    margin-top: -5em;
}
.negative-margin-bottom {
    margin-bottom: -5em;
}

/*** END SPACE CLASSES ***/


/*** BACKGROUND CLASSES ***/

/** WIDGET BACKGROUNDS **/

/*SURFACE-100 BACKGROUND*/
/*Add "surface-100" class to a widget to add a surface-100 background*/
.surface-100 {
  background-color: var(--surface-100);
}

/*SURFACE-200 BACKGROUND*/
/*Add "surface-200" class to a widget to add a surface-200 background*/
.surface-200 {
  background-color: var(--surface-200);
}
/*SURFACE-PRIMARY BACKGROUND*/
/*Add "accent-color" class to a widget to add a accent-color background*/
.surface-primary {
  background-color: var(--accent-color);
}
/*SURFACE-Secondary BACKGROUND*/
/*Add "accent-color" class to a widget to add a accent-color background*/
.surface-secondary {
  background-color: var(--secondary-color);
}


/** CARD BACKGROUNDS **/

/*CARD-100 COLOR*/
/*Add "card-100" class to change the color of the cards to surface-100 (the lighter color)*/
.card-100 .stat, .card-100 .catalog-item, .card-100 .dashboard-access-list-item, .tios-card.card-100 {
  background-color: var(--surface-100)!important;
}


/*CARD-200 COLOR*/
/*Add "card-200" class to change the color of the cards to surface-200 (the darker color)*/
.card-200 .stat, .card-200 .catalog-item, .card-200 .dashboard-access-list-item, .tios-card.card-200 {
  background-color: var(--surface-200)!important;
}

/*CARD-BODY BACKGROUN COLOR*/
/*Add "card-bg" class to change the color of the cards to the background card*/
.card-bg .stat, .card-bg .catalog-grid-item, .card-bg .dashboard-access-list-item, .tios-card.card-bg {
  background-color: var(--bg-default)!important;
}

/*CARD-HELP-CENTER COLOR*/
/*Add "card-helpcenter" class to change the color of the cards to the background card*/
.card-helpcenter .stat, .card-helpcenter.catalog-grid-item, .card-helpcenter .dashboard-access-list-item, .tios-card.card-helpcenter {
  background-color: var(--helpcenter-light)!important;
}

/*CARD-COMMUNITIES COLOR*/
/*Add "card-communities" class to change the color of the cards to the background card*/
.card-communities .stat, .card-communities.catalog-grid-item, .card-communities .dashboard-access-list-item, .tios-card.card-communities {
  background-color: var(--communities-light)!important;
}

/*CARD-DEVELOPER COLOR*/
/*Add "card-developer" class to change the color of the cards to the background card*/
.card-developer .stat, .card-developer.catalog-grid-item, .card-developer .dashboard-access-list-item, .tios-card.card-developer {
  background-color: var(--surface-100)!important;
}


/** WIDGET CONTENT ALIGNMENT **/

/*Add "align-left" to align elements inside of a widget to the left*/
.align-left .ember-view:first-child, .align-left .testimonial-quote.testimonial-quote--left {
  text-align: left;
}

/*Add "align-center" to align elements inside of a widget to the center*/
.align-center .ember-view:first-child, .align-center .testimonial-quote.testimonial-quote--left {
  text-align: center;
}


/*** END BACKGROUND CLASSES ***/


/*** TEXT CLASSES ***/

/** TEXT SIZE **/

/*LARGEST TEXT*/
/*Add "h1-6xl" class to a widget to make the text the largest size. Replace "h1" with the corresponding tag you wish to change*/
.h1-6xl h1, .h2-6xl h2, .h3-6xl h3, .h4-6xl h4, .h5-6xl h5, .h6-6xl h6, .span-6xl span, .p-6xl p {
  font-size: var(--text-6xl)!important;
}

/*SECOND LARGEST TEXT*/
/*Add "h1-5xl" class to a widget to make the text the second largest size. Replace "h1" with the corresponding tag you wish to change*/
.h1-5xl h1, .h2-5xl h2, .h3-5xl h3, .h4-5xl h4, .h5-5xl h5, .h6-5xl h6, .span-5xl span, .p-5xl p {
  font-size: var(--text-5xl)!important;
}

/*THIRD LARGEST TEXT*/
/*Add "h1-4xl" class to a widget to make the text the third largest size. Replace "h1" with the corresponding tag you wish to change*/
.h1-4xl h1, .h2-4xl h2, .h3-4xl h3, .h4-4xl h4, .h5-4xl h5, .h6-4xl h6, .span-4xl span, .p-4xl p {
  font-size: var(--text-4xl)!important;
}

/*FOURTH LARGEST TEXT*/
/*Add "h1-3xl" class to a widget to make the text the fourth largest size. Replace "h1" with the corresponding tag you wish to change*/
.h1-3xl h1, .h2-3xl h2, .h3-3xl h3, .h4-3xl h4, .h5-3xl h5, .h6-3xl h6, .span-3xl span, .p-3xl p {
  font-size: var(--text-3xl)!important;
}

/*FIFTH LARGEST TEXT*/
/*Add "h1-2xl" class to a widget to make the text the fifth largest size. Replace "h1" with the corresponding tag you wish to change*/
.h1-2xl h1, .h2-2xl h2, .h3-2xl h3, .h4-2xl h4, .h5-2xl h5, .h6-2xl h6, .span-2xl span, .p-2xl p {
  font-size: var(--text-2xl)!important;
}

/*SIXTH LARGEST TEXT*/
/*Add "h1-xl" class to a widget to make the text the sixth largest size. Replace "h1" with the corresponding tag you wish to change*/
.h1-xl h1, .h2-xl h2, .h3-xl h3, .h4-xl h4, .h5-xl h5, .h6-xl h6, .span-xl span, .p-xl p {
  font-size: var(--text-xl)!important;
}

/*SEVENTH LARGEST TEXT*/
/*Add "h1-lg" class to a widget to make the text the seventh largest size. Replace "h1" with the corresponding tag you wish to change*/
.h1-lg h1, .h2-lg h2, .h3-lg h3, .h4-lg h4, .h5-lg h5, .h6-lg h6, .span-lg span, .p-lg p {
  font-size: var(--text-lg)!important;
}

/*BASE TEXT*/
/*Add "h1-base" class to a widget to make the text the base size. Replace "h1" with the corresponding tag you wish to change*/
.h1-base h1, .h2-base h2, .h3-base h3, .h4-base h4, .h5-base h5, .h6-base h6, .span-base span, .p-base p {
  font-size: var(--text-base)!important;
}

/*SMALL TEXT*/
/*Add "h1-sm" class to a widget to make the text the small size. Replace "h1" with the corresponding tag you wish to change*/
.h1-sm h1, .h2-sm h2, .h3-sm h3, .h4-sm h4, .h5-sm h5, .h6-sm h6, .span-sm span, .p-sm p {
  font-size: var(--text-sm)!important;
}

/*GLOBAL TEXT SCALE*/
/*Semantic scale to show hiearchy */
.home :is(h1, h2, h3, h4, h5, h6), .dashboard :is(h1, h2, h3, h4, h5, h6), .article :is(h1, h2, h3, h4, h5, h6) {
    text-rendering: optimizeLegibility;
    color: var(--text-primary);
    font-weight: var(--bold-weight);
}
.home p, .dashboard p, .article p {
    color: var(--text-secondary);
    font-weight: var(--default-weight);
    line-height: 1.5rem;
    height: 100% !important;
}


/** TEXT WEIGHTS **/

/*DEFAULT WEIGHT TEXT*/
/*Add "h1-bold" class to a widget to make the text the bold weight. Replace "h1" with the corresponding tag you wish to change*/
.h1-bold h1, .h2-bold h2, .h3-bold h3, .h4-bold h4, .h5-bold h5, .h6-bold h6, .span-bold span, .p-bold p {
  font-weight: var(--bold-weight)!important;
}

/*BOLD TEXT*/
/*Add "h1-normal" class to a widget to make the text the default weight. Replace "h1" with the corresponding tag you wish to change*/
.h1-normal h1, .h2-normal h2, .h3-normal h3, .h4-normal h4, .h5-normal h5, .h6-normal h6, .span-normal span, .p-normal p {
  font-size: var(--default-weight)!important;
}



/**TEXT ALIGNMENT**/

/*LEFT ALIGN TEXT*/
/*Add "h1-left" class to a widget to left align the text. Replace "h1" with the corresponding tag you wish to change*/
.h1-left h1, .h2-left h2, .h3-left h3, .h4-left h4, .h5-left h5, .h6-left h6, .span-left span, .p-left p {
  text-align: left!important;
}

/*CENTER ALIGN TEXT*/
/*Add "h1-center" class to a widget to center align the text. Replace "h1" with the corresponding tag you wish to change*/
.h1-center h1, .h2-center h2, .h3-center h3, .h4-center h4, .h5-center h5, .h6-center h6, .span-center span, .p-center p {
  text-align: center!important;
}



/**TEXT COLOR**/

/*TITLE TEXT COLOR--BLACK*/
/*Add "h1-primary" class to a widget to set the text color to primary (black). Replace "h1" with the corresponding tag you wish to change*/
.h1-primary h1, .h2-primary h2, .h3-primary h3, .h4-primary h4, .h5-primary h5, .h6-primary h6, .span-primary span, .p-primary p {
  color: var(--text-primary)!important;
}

/*TITLE TEXT COLOR--GRAY*/
/*Add "h1-secondary" class to a widget to set the text color to secondary (gray). Replace "h1" with the corresponding tag you wish to change*/
.h1-secondary h1, .h2-secondary h2, .h3-secondary h3, .h4-secondary h4, .h5-secondary h5, .h6-secondary h6, .span-secondary span, .p-secondary p {
  color: var(--text-secondary)!important;
}

/*TITLE TEXT COLOR--WHITE*/
/*Add "h1-inverse" class to a widget to set the text color to inverse (white). Replace "h1" with the corresponding tag you wish to change*/
.h1-inverse h1, .h2-inverse h2, .h3-inverse h3, .h4-inverse h4, .h5-inverse h5, .h6-inverse h6, .span-inverse span, .p-inverse p {
  color: var(--text-inverse)!important;
}

/*TITLE TEXT COLOR--THEME COLOR*/
/*Add "h1-accent" class to a widget to set the text color to the theme color. Replace "h1" with the corresponding tag you wish to change*/
.h1-accent h1, .h2-accent h2, .h3-accent h3, .h4-accent h4, .h5-accent h5, .h6-accent h6, .span-accent span, .p-accent p {
  color: var(--accent-color)!important;
}



/*** END TEXT CLASSES***/


/*** BORDER COLORS ***/

/**CARDS**/

/*CARD BORDER-NONE*/
/*Add "card-border-none" class to remove borders around each card*/
.card-border-none .stat, .card-border-none .catalog-item {
  border: none!important;
}

/*CARD BORDER-100 COLOR*/
/*Add "card-border-100" class to add a border around each card using the lighter border color*/
.card-border-100 .stat, .card-border-100 .catalog-item {
  border: 1px solid var(--border-100);
}

/*CARD BORDER-200 COLOR*/
/*Add "card-border-200" class to add a border around each card using the darker border color*/
.card-border-200 .stat, .card-border-200 .catalog-item {
  border: 1px solid var(--border-200);
}

/*** END BORDER COLORS ***/




/*** RADIUS CLASSES ***/


/** CARDS **/

/*RADIUS-NONE*/
/*Add "card-radius-none" class to a widget to set the border radius of a card to 0*/
.card-radius-none .stat, .card-radius-none .catalog-grid-item {
  border-radius: var(--rounded-none)!important;
}

/*RADIUS-BASE*/
/*Add "card-radius-base" class to a widget to add a border radius of a card to rounded size*/
.card-radius-base .stat, .card-radius-base .catalog-grid-item {
  border-radius: var(--rounded-default)!important;
}

/*RADIUS-LG*/
/*Add "card-radius-lg" class to a widget to add a border radius of a card to rounded-lg size*/
.card-radius-lg .stat, .card-radius-lg .catalog-grid-item {
  border-radius: var(--rounded-lg)!important;
}

/*RADIUS-2XL*/
/*Add "card-radius-2xl" class to a widget to add a border radius of a card to rounded-2xl size*/
.card-radius-2xl .stat, .card-radius-2xl .catalog-grid-item {
  border-radius: var(--rounded-2xl)!important;
}

/*RADIUS-3XL*/
/*Add "card-radius-3xl" class to a widget to add a border radius of a card to rounded-3xl size*/
.card-radius-3xl .stat, .card-radius-3xl .catalog-grid-item {
  border-radius: var(--rounded-3xl)!important;
}

/*RADIUS-FULL*/
/*Add "card-radius-full" class to a widget to add a completed rounded border to a card*/
.card-radius-full .stat, .card-radius-full .catalog-grid-item {
  border-radius: var(--rounded-full)!important;
}


/** BACKGROUNDS **/

/*Add "background-radius-none" class to a widget to add a radius of none to the background of a widget*/
.background-radius-none .testimonial.learner {
  border-radius: var(--rounded-none)!important;
}

/*RADIUS-BASE*/
/*Add "bacakground-radius-base" class to a widget to add a radius of rounded size to the background of a widget*/
.background-radius-base .testimonial.learner {
  border-radius: var(--rounded-default)!important;
}

/*RADIUS-LG*/
/*Add "background-radius-lg" class to a widget to add a border radius of a card to rounded-lg size*/
.background-radius-lg .testimonial.learner {
  border-radius: var(--rounded-lg)!important;
}

/*RADIUS-2XL*/
/*Add "background-radius-2xl" class to a widget to add a border radius of a card to rounded-2xl size*/
.background-radius-2xl .testimonial.learner {
  border-radius: var(--rounded-2xl)!important;
}

/*RADIUS-3XL*/
/*Add "background-radius-3xl" class to a widget to add a border radius of a card to rounded-3xl size*/
.background-radius-3xl .testimonial.learner {
  border-radius: var(--rounded-3xl)!important;
}

/*RADIUS-FULL*/
/*Add "background-radius-full" class to a widget to add a completed rounded border to a card*/
.background-radius-full .testimonial.learner {
  border-radius: var(--rounded-full)!important;
}

/*** END RADIUS CLASSES ***/



  
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Poppins:ital,wght@0,600;1,600&display=swap');
  

  body, .layout-panel, .session, body.embed {
    background: var(--bg-default);
    color: var(--text-secondary);
    font-family: var(--font);
  }  
  .container {
    background: none;
    -webkit-box-shadow:none;
    box-shadow: none;
  }
  /* START Layout padding & margin */
  .home__content{ padding:0 !important; margin-top: 3.7em;}
  .learn.dashboard #learner, .layout-panel.layout-panel--article, .session {margin-top: 3.7em; }
  
  .course__detail__container {padding: 3rem 4rem;}
  .header--article {display: none;}
  
  body.learn.course header.header_academy {
    display: none;
  }
  .session__container {
    border: 1px solid var(--border-100);
    background: var(--surface-100);
    padding: 3rem;
    box-shadow: var(--shadow-elevation-medium);
    border-radius: var(--border-radius-default);
  }
  
  .flex-fill .row, .flex-fill .editor-content {
    flex-wrap: wrap;
    display: flex;
    height: 100%;
    width: 100%;
  }
  /* END Layout padding & margin */
  
  
  h1, h2, h3, h4, h5, h6 {
    color:var(--text-primary);
    font-weight: var(--bold-weight);
  }
  p {
  font-weight: var(--default-weight);
  }
  hr {
    border: 1px solid var(--border-100);
  }
  a {
    color: var(--accent-color);
  }
  label {
    color: var(--text-primary);
  }
  select {
    color: var(--text-primary);
    background-color: var(--ui-quaternary);
    border: 1px solid var(--border-200-default);
    font-weight: var(--default-weight);
    font-family: var(--font);
  }
  select:hover {
    background-color: var(--surface-200);
    border-color: var(--border-200-default);
  }
  #learner .catalog-calendar__table caption, #learner .collection__course__title, #learner .h1, #learner .h2, #learner .h3, #learner .h4, #learner .h5, #learner .h6, #learner .metrics__title, #learner .topic__index .topic__index__number, #learner h1, #learner h2, #learner h3, #learner h4, #learner h5, #learner h6, .catalog-calendar__table #learner caption, .catalog-calendar__table .session caption, .quiz__container--assessment .question__container .session h2, .quiz__container--learner .question__container .session h2, .session .catalog-calendar__table caption, .session .collection__course__title, .session .h1, .session .h2, .session .h3, .session .h4, .session .h5, .session .h6, .session .metrics__title, .session .quiz__container--assessment .question__container h2, .session .quiz__container--learner .question__container h2, .session .topic__index .topic__index__number, .session h1, .session h2, .session h3, .session h4, .session h5, .session h6, .topic__index #learner .topic__index__number, .topic__index .session .topic__index__number {
    font-weight: var(--bold-weight);
  }
  .btn, button {
    border-radius: var(--border-radius-default);
    font-family: var(--font);
    font-weight: var(--default-weight);
  }
  .btn:hover, button:hover {
    background-color: var(--surface-200);
    border-color:var(--border-200-default);
    color: var(--text-primary);
  }
  .btn--primary, .btn-primary {
    border-radius: var(--border-radius-default);
    font-weight: var(--default-weight);
    font-family: var(--font);
  }
  .btn--large, .btn-large {
    padding: 1em 1.5em;
  }
  
  .btn--link {color: var(--accent-color);}
  
  .btn--alt.btn--primary {
    background-color: var(--ui-quaternary);
    border-color: var(--accent-color);
    color: var(--accent-color);
    padding: 1em 1.5em;
  }
  .btn--alt.btn--secondary {
    background-color: var(--ui-quaternary);
    border-color: var(--border-200-default);
    color: var(--text-primary);
    padding: 1em 1.5em;
  }
  
  .event-sidebar__meeting {
      border-radius: var(--border-radius-default);
      color: var(--text-primary);
      padding: 2em;
  }
  .email-capture button {
    margin-top: 2em;
    padding: 1em;
  }
  
  .builder__mini-widget, .course__detail__enrolled, .course__detail__social, .example-widget, .multiselect, .panel, .panel--flex, .panel--logs, .topic__sidebar__add {
    background: var(--surface-100);
    border-radius: var(--border-radius-default);
    color: var(--text-secondary);
  }
  .builder__mini-widget, .course__detail__enrolled, .course__detail__social, .example-widget, .multiselect, .panel--alt {
    border: 1px solid var(--border-200-default);
  }
  .alert-box.alert {
    background-color: var(--ui-error-dark);
    border-color: var(--ui-error-dark);
    color: var(--light-constant);
    border-radius: var(--border-radius-default);
    box-shadow: var(--shadow-elevation-medium);
  }
  .layout-panel--article .btn--email, .layout-panel--article .btn--print {
    color: var(--ui-primary);
  }
  .topic__index .topic__index__number {
    color: var(--text-secondary);
  }
  
  .topic__list__info .btn--link {
    color: var(--text-secondary);
  }
  .topic__list__info .btn--link:hover {
    color: var(--text-primary);
  }
  /* Course Styles Start*/
  .header--student {
    background: var(--surface-100);
    -webkit-box-shadow: var(--shadow-elevation-medium);
    box-shadow: var(--shadow-elevation-medium);
  }
  .header--student .header__left__icon {
    background: var(--ui-quaternary);
    color: var(--ui-primary);
  }
  .learner__sidebar-inner-list span.syllabus__section-title {
    color: var(--text-primary);
  }
  .learner__sidebar-inner-list .syllabus__lesson .syllabus__lesson--title:not(:hover) {
    color: var(--text-secondary);
  }
  .learner__sidebar-list>li {
    border-bottom: 1px solid var(--border-200-default);
  }
  .expandable-sidebar__buttons {
    background-color: var(--bg-default);
  }
  .expandable-sidebar__buttons a {
    color: var(--text-primary);
  }
  .learner-section__title {
      color: var(--text-secondary);
  }
  .sidebar--open--right .completed-section__overlay {
    background: var(--dark-constant);
    opacity: 40%;
  }
  .sidebar--open--right .sidebar__container.sidebar__container--right {
    -webkit-box-shadow: var(--shadow-elevation-medium);
    box-shadow: var(--shadow-elevation-medium);
    padding: 4rem;
    background: var(--surface-200);
  }
  .disabled .directional__nav__button {
    background: var(--ui-disabled);
    color: var(--text-disabled);
  }
  /* Course Styles END*/
  /* Article-vid Styles START*/
  .panel--article-sidebar {
    border-color: var(--border-100);
  }
  .article-content__sub-header {
    color: var(--text-primary);
    font-weight: var(--bold-weight);
  }
  .article-sidebar__icon {
    color: var(--ui-primary);
  }
  .panel--article-sidebar a.btn--link {
    color: var(--text-primary);
  }
  .bookmark-article {
    color: var(--ui-primary)!important;
  }
  /* Article-vid Styles END*/
  
  /* LP STYLES START*/
  .learning-content-hero__overlay {
    background-image: none!important;
  }
  .learning-path-timeline-milestone-items {
    background-color: var(--surface-100);
  }
  .learning-path-timeline-milestone__header--alt {
    background-color: var(--surface-200);
  }
  .learning-path-progress-bar-item--current .learning-path-progress-bar-item__index {
    background: var(--link-color);
    border: 3px solid var(--link-color);
    box-shadow: var(--shadow-elevation-low);
  }
  .learning-path-timeline-milestone__header {
    background-color: var(--accent-tinted-color-80);
    border:  1px 0 solid var(--border-100);
  }
  .learning-path-timeline-milestone-item__content a {
    color: var(--light-constant);
  }
  .learning-path-milestone-item__alt-description, .learning-path-milestone-item__description {
    color: var(--text-secondary);
  }
  /* LP Styles END*/
  
  .widget__title {
    color: var(--text-primary);
  }
  .widget__subtitle {
    color: var(--text-secondary);
    }
  
  .footer__inner {
    border-top: 1px solid var(--border-100);
  }
  .footer__company__info {
    color: var(--text-secondary);
  }
  
  /********************* START Catalog  *********************/
  .layout__content .widget {
    padding: 2em 4em;
  }
  .catalog-filters {
    background: var(--ui-quaternary);
    border: 1px solid var(--border-200-default);
  }
  .catalog-filters__search {
    background: var(--ui-quaternary);
  }
  .catalog-filters__sort {
    background: var(--ui-quaternary);
    border-left: 1px solid var(--border-200-default);
  }
  .catalog-display-type button {
    background: var(--surface-100);
    border: 1px solid var(--border-100);
    border-radius: var(--border-radius-default);
    color: var(--ui-secondary);
    box-shadow: var(--shadow-elevation-low);
  }
  .catalog-display-type button.btn--primary {
    background: var(--accent-color);
    border: none;
    color: var(--light-constant);
  }
  
   .widget--catalog ul.featured-content-block-grid, .featured-content-default-grid ul.featured-content-block-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .catalog-item {
    height: 100%;
  }
  .catalog-grid-item {
    border: 1px solid var(--border-100);
    background: var(--surface-100);
    box-shadow: var(--shadow-elevation-low);
    border-radius: var(--border-radius-default);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    height: 100%;
  }
  .catalog-grid-item:hover {
    background: var(--surface-200);
    box-shadow: var(--shadow-elevation-high);
    transition: 0.5s all ease-out;
  }
  
  .catalog-grid-item__asset-container--split {
    padding: 0;
    }
  .catalog-grid-item__asset {
    border-radius: 4px 4px 0 0;
    }
  .catalog-grid-item__body {
    padding: 2em;
    }
  .catalog-grid-item__title {
    margin-bottom: .5em;
    font-size: 1.125rem;
    color: var(--text-primary);
    font-weight: var(--bold-weight);
    font-family: var(--alt-font);
    line-height: 1.25em;
    }
  .catalog-grid-item__description {
    font-size: .875rem;
    color: var(--text-secondary);
    padding-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    line-height: 1.75rem;
    }
  .catalog-grid-item__hr {
    margin:0;
    display: none;
  }
  .catalog-active-filter {
    margin: 1em 0.5em 0 0.5em;
    padding: 0;
  }
  
  .catalog-item {
    color: var(--text-secondary);
  }
  
  .catalog-list-item {
    border-bottom: 1px solid var(--border-200-default);
  }
  .catalog-list-item__title {
    color:var(--text-primary);
  }
  
  .catalog-grid-item__start-date, .catalog-list-item__start-date {
    color: var(--text-secondary);
  }
  .catalog-list-item__description {
    color: var(--text-secondary);
    font-size: 1rem;
  }
  
  /********************** END CATALOG  **********************/
  
  /****** Featured content   START*****/
  .featured-content-multi-carousel .featured-content-block-grid:before {
  display:none;
  }
  
  .featured-content-multi-carousel .featured-content-block-grid {
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    display: grid;
    grid-row-start: 1;
    grid-row-end: 4;
    grid-template-columns: auto auto auto auto;
    justify-items: stretch;
    align-items: stretch;
    justify-content: space-between;
    align-content: stretch;
    gap: 1em;
    margin: 0;
  }
  
  .featured-content-multi-carousel .featured-content-block-grid>li {
    display: inline-flex;
    width: 100%;
    float: none;
    font-size: 1rem;
    white-space: normal;
    grid-template-columns: auto auto auto auto;
    padding: 1em;
    grid-gap: 1em;
  }
  
  .featured-content-multi-carousel-item {
    background: var(--surface-100);
    border: 1px solid var(--border-100);
    border-radius: var(--border-radius-default);
    padding-bottom: 1em;
    height: 100%;
  }
  
  .featured-content-multi-carousel-item img {
    padding: 0;
    border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
  }
  .featured-content-multi-carousel-item__body {
    text-align: left;
    padding: 1.5em;
  }
  .featured-content-multi-carousel-item__title {
    font-size: 1.25rem;
    margin-bottom: 0.5em;
  }
  .featured-content-multi-carousel-item__source {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 0.5em;
  }
  .featured-content-multi-carousel-item__description {
    font-size: .875rem;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  
  .featured-content-multi-carousel {
    padding: 0;
  }
  /****** Featured content  END*****/
  
  /** Utility **/
  .text-center{
    text-align: center;
  }
  input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea {
    background-color: var(--ui-quaternary); 
    border: 1px solid var(--border-100);
    border-radius: var(--border-radius-default);
    color: var(--text-secondary);
    font-family: var(--font);
  }
  input[type=color]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=datetime]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, textarea:focus {
    background: var(--ui-quaternary); 
    border: 1px solid var(--border-100);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
  }
  .field__input[type=color]:focus, .field__input[type=date]:focus, .field__input[type=datetime-local]:focus, .field__input[type=datetime]:focus, .field__input[type=email]:focus, .field__input[type=month]:focus, .field__input[type=number]:focus, .field__input[type=password]:focus, .field__input[type=search]:focus, .field__input[type=tel]:focus, .field__input[type=text]:focus, .field__input[type=time]:focus, .field__input[type=url]:focus, .field__input[type=week]:focus {
    border-color: var(--border-200-default);
  }
  .catalog-active-filter {
    margin: 1em 0.5em 0 0.5em;
    padding: 0;
  }
  
  
  
  /** Navigation **/
  
  button.theme {
    background: none;
    border: none;
    padding: 0;
    border-radius: var(--border-radius-round);
    width: 100%;
  }
  
  .toggle_tall {
    width: 56px;
    padding: 2px;
    height: 32px;
    border-radius: var(--border-radius-round);
    background-color: var(--surface-disabled);
  }
  .toggle_tall:hover {
    background-color: var(--secondary-color);
  }
  
  .toggle_off, .toggle_on {
    height: 27px;
    width: 27px;
    background-color: var(--ui-quaternary);
    border-radius: 24px;
    cursor: pointer;
    display: flex;
    place-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    color: var(--text-primary);
    padding: 0.25em;
    border: 0;
    box-shadow: var(--shadow-elevation-medium);
  }
  .toggle_on {
    float: right;
  }
  .toggle_tall .theme i {
    padding: 0;
    font-size: 16px;
  }
  
  .bkg2--stroke {
    stroke: var(--ui-primary);
  }
  .bkg2--stroke:is(:hover, :focus){
    stroke: var(--light-constant);
  }
  .manager.dashboard.learn.dashboard #learner {
    margin-top: 0;
  }
  
  .manager header.header_academy, .manager .theme, .manager .theme-switcher{
    display: none;
  }
  .header_academy {
    background-color: var(--surface-100);
    box-shadow: 0 18px 50px -10px rgb(0 0 0 / 20%);
    z-index: 50;
    padding: none;
    top: 0;
    width: 100%;
    position: fixed;
    transition: 0.6s;
    display: inline-flex;
    flex-direction: row;
    align-content: flex-start;
    align-items: center;
  }
  
  .header--microsite, .header--dashboard {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: center;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    padding: 0em 3em;
    z-index: 100;
    flex-direction: row;
    align-content: flex-start;
  }
  header .header__inner, .header .header__inner {
    width: 100%;
  }
  
  #cart-button{
    display:none;
  }
  
  
  .header__logo {
    position: relative;
    height: 32px;
    width: 32px;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    margin: 0 1em;
  }
  .header__logo_mobile{
    display: none;
  }
  .logo_text {
    fill: var(--text-secondary);
  }
  .header__nav {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0;
    vertical-align: top;
    margin: 0;
  }
  .header__list {
    position: relative;
    list-style: none;
    line-height: 3.5em;
  }
  .header__list_selected {
    border-bottom: 4px solid var(--accent-color);
  }
  .header__list_selected:hover {
    border-bottom: 4px solid var(--accent-highlight-color);
  }
  
  .header__link {
    position: relative;
    margin: 0;
    color:var(--text-secondary);
    letter-spacing: 0px;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    cursor: pointer;
    font-size: 15px;
    font-weight: var(--default-weight);
    font-family: var(--font);
  }
  .header__link_selected{
    color: var(--accent-color);
    font-weight: var(--bold-weight);
  }
  .nav--top ul {
    text-align: right;
  }
  .nav--top ul a {
    color: var(--accent-contrast-color);
    height: 40px;
    font-size: .75rem;
    border-radius: var(--border-radius-default);
    border: rgba(255, 255, 255, 0.41) solid 1px;
    font-family: var(--font);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 38px;
    background-color: var(--accent-color);
    text-transform: initial;
    margin: .5rem 0;
  }
  /* Main Nav Desktop */
  .main-nav {
      flex-grow: inherit; /* fill remaining space */
      display: flex;
      justify-content: space-around; /* evenly space items */
      align-items: center; /* center vertically */
  }
  
  .main-nav li {
      display: block;
      width: 140px;
      height: 60px;
      line-height: 60px; /* vertically center text, matches height */
      text-align: center;
  }
  
  .main-nav li a,
  .main-nav li span { 
      display: block;
      width: 100%;
      height: 100%;
  }
  
  .main-nav li a:hover,
  .main-nav li span:hover {
      border-bottom: 2px solid var(--accent-highlight-color);
      background: var(--accent-tinted-color-90);
  }
  
  .main-nav li > ul {
      max-height: 0px; /* max-height instead of height, height can't transition to auto */
      transition: all 500ms ease-in-out;
      overflow: hidden; /* make it so nav doesn't show beyond the 0px max-height */
      margin-left: 0;
  }
  
  .main-nav li:hover > ul {
      max-height: 540px; /* height x how many links */
      height: auto;
      margin: 0;
      box-shadow: var(--shadow-elevation-medium);
      border-radius: 0 0 4px 4px;
  }
  
  .main-nav li > ul li a,
  .main-nav li > ul li span {
      background-color: var(--surface-100);
      box-shadow: var(--shadow-elevation-medium);
      font-size: .875rem;
  }
  
  .main-nav li > ul li a:hover,
  .main-nav li > ul li span:hover {
      background-color: var(--accent-tinted-color-90);
      color:var(--accent-highlight-color);
      border-bottom: none;
  }
  
  
  .header--microsite.sticky, .header--dashboard.sticky, header.header_academy.sticky {
    padding: 0em 5em 0;
  }
  .header--microsite.sticky .header__inner, .header--dashboard.sticky .header__inner, header.header_academy.sticky .header__inner{
    padding: 0.5em 0;
  }
  
  .header--microsite.sticky .header__link, .header--dashboard.sticky .header__link {
    
  }
  .header--microsite.sticky .header__logo, .header--dashboard.sticky .header__logo, .header_academy.sticky .header__logo {
    margin: 0 1em;
    height: 32px;
    width: 32px;
  }
  .header--microsite.sticky .header__list, .header--dashboard.sticky .header__list, .header_academy.sticky .header__list{
    line-height: 3.2em;
  }
  .header--microsite.sticky .nav--top ul a, .header--dashboard.sticky .nav--top ul a, .header_academy.sticky .nav--top ul a{
    margin: 0;
  }
  
  
  .header--microsite .top-bar {
  border: 0px;
  background: none;
  }
  .header--microsite .top-bar-section ul li {
  background: none;
  padding: 1px;
  color: var(--text-inverse);
  }
  .header--microsite .top-bar-section ul li>a {
  color: var(--text-inverse);
  }
  .header--microsite .top-bar-section li:not(.has-form) a:not(.button),
     .top-bar-section li:not(.has-form) a:not(.button):hover,
     .top-bar-section li:not(.has-form) a:not(.button):focus {
        background-color: transparent;
        color: var(--text-inverse);
  }
  
  
  
  
  .topic__content pre code {
    display: block;
  }
  .topic__content code {
  display: inline;
  }
  .topic__content p {
  color: var(--text-secondary);
  }
  
  .topic__text__body {
  color: var(--text-secondary);
  }
  
  .topic__content h1, .topic__content h2, .topic__content h3, .topic__content h4, .topic__content h5, .topic__content h6, .topic__content .h1, .topic__content .h2, .topic__content .h3, .topic__content .h4, .topic__content .h5, .topic__content .h6 {
  color:var(--text-primary); 
  }
  
  .container {max-width:100%;}
  
  
  
  
  
  
  /*headers*/
  
  
  .index.home .nav ul>li:not(.has-form) a:not(.button):focus {
    background-color: transparent;
  }
  
  
  
  .header--microsite .company-logo__container img, .header--dashboard .company-logo__container img {
    display: none;
  }
  .dashboard-header-dropdown__link {
    color:var(--accent-color); 
    padding: 0;
    margin-top: 0.75em;
  }
  
  .dashboard-header__name {
    font-size: .8125rem;
    font-weight: var(--bold-weight);
    margin: 0 1em;
    overflow: hidden;
    padding-top: 0.5em;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
  }
  .dashboard-header__avatar {
    display: inline-block;
    margin-bottom: auto;
  }
  .avatar {
    background: var(--surface-200);
    color: var(--text-secondary);
    display: block;
    height: 32px;
    position: relative;
    width: 32px;
    border: 1px solid var(--border-100);
  }
  .avatar.avatar--initials {
    border-radius: 50%;
    font-size: .75rem;
    font-weight: var(--bold-weight);
    line-height: 32px;
    text-align: center;
    font-family: var(--alt-font);
  }
  i.icon.icon-navigatedown {
    font-size: .75em;
    color: var(--text-primary);
  }
  
  
  /******Drop Down Styling *****/
  .course-actions-dropdown, .dashboard-header-dropdown {
    border: 1px solid #f6f6f6;
    -webkit-box-shadow: 0 0 12px -2px rgb(0 0 0 / 25%);
    box-shadow: 0 0 12px -2px rgb(0 0 0 / 25%);
    list-style: none;
    position: absolute;
    top: 110%;
    width: auto;
    z-index: 4;
    border-radius: var(--border-radius-default);
    margin: 0;
  }
  .course-actions-dropdown>li, .dashboard-header-dropdown>li {
    padding: 0.75em 1.5em;
    background: var(--surface-100);
  }
  .course-actions-dropdown>li a, .course-actions-dropdown>li button, .dashboard-header-dropdown>li a, .dashboard-header-dropdown>li button {
    color: var(--text-primary);
    display: block;
    font-size: .75rem;
    line-height: 1rem;
    padding: 0!important;
    width: 100%;
    border: none;
  }
  
  
  /* Hide checkbox that controls Mobile Nav Button*/
  #drop-down-cbox {
      display: none;
  }
  
  /* Mobile Nav Button */
  #drop-down-cbox + label {
      position: relative;
      display: none;
      width: 60px;
      height: 60px;
      overflow: hidden;
      background-color: transparent;
      transition: all 10ms ease-in-out;
      margin: 0 1rem 0 0;
  }
  
  /* Mobile Nav Button Bars */
  #drop-down-cbox + label span {
      position: absolute;
      display: block;
      background-color: var(--accent-color);
      width: 24px;
      height: 2px;
      border-radius: var(--border-radius-default);
      left: 50%;
      transform: translate(-50%, -50%); /* centering trick */
      transition: all 300ms ease-in-out;
  }
  
  /* Mobile Nav Button Bars Invididually */
  #drop-down-cbox + label span:nth-child(1) {
      top: 40%; /* evenly spaced */
  }
  #drop-down-cbox + label span:nth-child(2) {
      top: 50%; /* evenly spaced */
  }
  #drop-down-cbox + label span:nth-child(3) {
      top: 60%; /* evenly spaced */
  }
  
  /* Mobile Nav Button Styling for Checked */
  #drop-down-cbox:checked + label {
      background-color: var(--accent-color);
  }
  
  #drop-down-cbox:checked + label span {
      background-color: var(--ui-quaternary);
  }
  
  /* Transform the bars into an 'X' */
  #drop-down-cbox:checked + label span:nth-child(1) {
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg); /* center, then rotate */
  }
  #drop-down-cbox:checked + label span:nth-child(2) {
      left: -150%; /* move center bar out of the picture */
  }
  #drop-down-cbox:checked + label span:nth-child(3) {
      top: 50%;
      transform: translate(-50%, -50%) rotate(-45deg); /* center, then rotate */
  }
  
  /****** HERO  CAROSUEL WIDGET DEFAULT Styling START*****/
  .full-screen {
    padding: 0 !important;
    width: 100%;
  }
  /****** HERO  CAROSUEL WIDGET DEFAULT Styling END*****/
  
  /****** HERO  WIDGET DEFAULT Styling START*****/
   .layout__content .widget--hero-image, .layout__content .widget--html {
      padding: 0!important;
  }
  
  /*.hero .hero__caption {
      top: 0;
      background: none;
      padding: 4rem 8rem;
      height: 100%;
      width: 100%;
      display: inline-flex;
      flex-direction: column;
      align-content: flex-start;
      justify-content: center;
      align-items: flex-start;
      z-index: 20;
      position: relative;
  }
  .hero-center .hero .hero__caption  {
    top: 0;
    background: none;
    padding: 4rem 8rem;
    height: 100%;
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    align-items: center;
    z-index: 20;
    position: relative;
  }
  .scrim-default .hero .hero__caption  {
    background: rgba(0, 0, 0, 0.16);
  }
  .scrim-gradient .hero .hero__caption {
    background: rgba(0, 93, 163, 0.3); /* fallback colour. Make sure this is just one solid colour. */
    /*background: -webkit-linear-gradient(rgba(0, 93, 163, 0.3), rgba(10, 236, 183, 0.3));
    background: linear-gradient(rgba(0, 93, 163, 0.3), rgba(10, 236, 183, 0.3)); The least supported option. */
  /* }
  .hero .hero__caption .hero__title {
    color:var(--light-constant);
  }
  .hero .hero__caption span {
    color:var(--light-constant);
    font-family: var(--font)!important;
    font-weight: var(--default-weight)!important;
    display: inline-block;
    line-height: 1.75rem;
  }
  .hero .hero__caption a.btn {
    background-color: var(--link-color); 
    border: 1px solid var(--link-color);
    margin: 1em 0;
    padding: 13px 24px;
  }
  .hero .hero__caption a.btn:hover {
    background-color: var(--link-hover-color);
    border: 1px solid var(--link-hover-color);
    color: var(--text-primary);
  }
  .hero picture {
    display: inline-flex;
    width: 100%;
    position: absolute;
    z-index: 0;
    height: 100%;
  }
  .hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  } */
  /****** END HERO Styling *****/
  
  
  
  
  /****** Learner Access Styling  START*****/
  .dashboard-access {
    border: 1px solid var(--border-100);
    box-shadow:var(--shadow-elevation-low);
    border-radius: var(--border-radius-default);
    overflow: hidden;
  }
  .dashboard-access__header {
    background:var(--surface-100);
    line-height: 21px;
    padding: 1.5em;
  }
  .dashboard-access__header--expanded {
    border-bottom: 1px solid var(--border-200-default);
  }
  .dashboard-access-tabs {
    background:var(--surface-100);
    border: 1px solid var(--border-100);
  }
  .dashboard-access-tab--active {
    background: hsl(201, 72%, 96%);
    border-color: var(--accent-color);
  }
  /****** END Learner Access Styling *****/
  
  
  /*tios-Cards*/
  .equal-cards .row, .equal-cards .row .columns  {
        display: flex;
  }

    .tios-container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
    }
   .tios-card {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-default); /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    -webkit-border-radius: var(--border-radius-default);/* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -moz-border-radius: var(--border-radius-default);/* Firefox 1-3.6 */
    }
    .tios-container .tios-card {
    background-color: var(--surface-100);
    transition: 0.3s all ease-in-out;
    position: relative;
    box-shadow: var(--shadow-elevation-low);
    margin-bottom: 2rem;
    }
    .tios-container .tios-card .cardContent {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    text-align: left;
    padding: 24px;
    }
    .tios-card .cardContent em, .tios-card .cardContent i{
      font-size: 2rem;
      margin-bottom: 0.5em;
    }
    .tios-container .tios-card .cardContent .icon {
    color:var(--ui-secondary);
    font-size: 2em;
    padding: 8px 0px;
    }
    .tios-container .tios-card .cardContent figure {
    margin: 0;
    }
    .tios-container .tios-card .cardContent .title {
    font-size: 1.25em;
    color: var(--text-primary);
    font-weight: var(--bold-weight);
    margin:0px;
    }
    .tios-container .tios-card .cardContent .desc {
    color:var(--text-secondary);
    font-size: 1em;
    line-height:24px;
    padding: 8px 0px;
    margin: 0;
    }
    .tios-container .tios-card a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    }
    .tios-container .tios-card:hover {
      background: linear-gradient(130deg, var(--link-color) 0%, var(--link-color) 100%);
      box-shadow: none;
      transition: 0.3s all ease-out;
    }
  .tios-container .coghover:hover {
      background: #9FCFCA;
      box-shadow: none;
      transition: 0.3s all ease-out;
    }
    .tios-container .tios-card:hover .icon, .tios-container .tios-card:hover .title, .tios-container .tios-card:hover .desc, .tios-container .tios-card:hover i, .tios-container .tios-card:hover em{
      color:var(--light-constant);
      transition: 0.3s all ease-in;
    }
    .cardContent img {
      min-height: 80px;
      max-height: 100px;
    }
    /*tios-Cards END */
  
    /*tiOS Sign in Start*/
  .tios-splash {
    position: fixed;
    z-index: 100;
    bottom: 0;
    right: 0; 
    width: 100%;
    height:100vh;
  }
  .tios-splash .col{
    width: 40%;
    position: absolute;
    top:40px;
    left: 28%;
    z-index:200;
  }
  .tios-splash .logo{
  padding: 2em; 
  }
  .tios-splash .center-logo {
  margin: auto;
  display: block;
  }
  
  .tios-splash .sso-card {
    width:100%;
    padding: 3em;
    background-color: var(--surface-100);
    border-radius: var(--border-radius-default);
  }
  .tios-splash .sso-card .title {
  text-align:center;
  }
  .tios-splash .sso-card p {
  text-align:center;
  }
  .tios-splash .inline-footer ul {
    text-align: center;
    color: #FFFFFF;
    font-size: 13px;
    margin: 1em;
  }
  .tios-splash .inline-footer ul li{
  display: inline;
  margin: 0 1em;
  }
  .tios-splash .inline-footer ul li a{
  color: #FFFFFF;
  }
  
  .sso-bg{
    background: #224F67;  
    background: -webkit-linear-gradient(to left, #2390C7, #E0F1F9); 
  }
  .kc-bg{
    background: #005DA3;
    background: -webkit-linear-gradient(top left, #005DA3, #0AECB7);
    background: -moz-linear-gradient(top left, #005DA3, #0AECB7);
    background: linear-gradient(to bottom right, #005DA3, #0AECB7);
  }
  .community-bg{
    background: #7C2674;  
    background: -webkit-linear-gradient(to left, #A1569A, #E0F1F9); 
    background: -moz-linear-gradient(top left, #A1569A, #E0F1F9);
    background: linear-gradient(to bottom right, #A1569A, #E0F1F9);
  }
  
  .sign_on_footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  padding: 1.5em;
  background: rgba( 255, 255, 255, 0.10 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  }
  .power-link {
  float: left;
  }
  .power-link a {
  color: #FFFFFF;
  font-size: 13px;
  }
  .social-row {
  float: right;
  }
  .sign_on_footer .social-row ul{
  color: #FFFFFF;
  font-size: 20px;
  margin: 0;
  }
  .sign_on_footer .social-row ul li{
  display: inline;
  margin: 0 1em;
  }
  .sign_on_footer .social-row ul li a{
  color: #FFFFFF;
  }
  
  .circles{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  }
  
  .circles li{
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 25s linear infinite;
  bottom: -150px;
  
  }
  
  .circles li:nth-child(1){
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
  }
  
  
  .circles li:nth-child(2){
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
  }
  
  .circles li:nth-child(3){
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
  }
  
  .circles li:nth-child(4){
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
  }
  
  .circles li:nth-child(5){
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
  }
  
  .circles li:nth-child(6){
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
  }
  
  .circles li:nth-child(7){
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
  }
  
  .circles li:nth-child(8){
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
  }
  
  .circles li:nth-child(9){
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
  }
  
  .circles li:nth-child(10){
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
  }
  
  @keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
  }
  /******** END tiOS Sign in Start *********/
  
    .course__detail__content {
      color: var(--text-secondary);
    }
    .course__detail__header h1 {
      color: var(--text-primary);
      font-weight: var(--bold-weight);
    }
    .course__detail__header p {
      color: var(--text-secondary);
    }
  
  /*tios-Hero*/
  .tios-hero{
    height: auto;
    background: linear-gradient(-45deg, #25A446, #2498D2, #15CCE5, #2C3C48);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    padding: 0px !important;
    }
    
    @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
    
  /*Redemtion Widget Start*/
    .widget--redemption-form {
      padding: 3em;
      background: var(--surface-100);
      width: 80%;
      border-radius: var(--border-radius-default);
      margin: 6em auto;
      box-shadow: var(--shadow-elevation-low);
  }
  /*Redemtion Widget END*/
    
    
    /* Helper Cards START */
    .help-card {
    padding: 14px;
    display: inline-flex;
    flex-wrap: nowrap;
    margin-bottom: 24px;
    }
    
    .help-card .left-col{
    width: 45px;
    font-size: 2.75em;
    line-height: 1.912em;
    }
    
    .help-card .right-col{
    margin-left: .5em;
    }
    .help-card .right-col .card-content .title {
    font-size: 1.25em;
    line-height: 1.2em;
    font-style: normal;
    letter-spacing: 1px;
    font-weight: var(--bold-weight);
    margin: 4px 0px;
    padding: 0px;
    }
    .help-card .right-col .card-content p  {
    font-size: .875em;
    line-height: 1.5em; 
    font-weight: var(--default-weight);
    font-style: normal;
    margin:0px;
    padding: 0px;
    }
    
    
    /* Individual section-helper Styling */
    .tios-tip {  
    border: 1px solid #C5ADEE;
    box-shadow: 0px 1px 2px rgba(23, 97, 134, 0.1), 0px 4px 4px rgba(23, 97, 134, 0.05);
    background: #F6F0FF; 
    color: #6B1CB0;
    }

/* KEY INSIGHT */
    .tios-key {  
    border: 1px solid #C9DE75;
    box-shadow: 0px 1px 2px rgba(23, 97, 134, 0.1), 0px 4px 4px rgba(23, 97, 134, 0.05);
    background: #E6EAD5; 
    color: #7E932D;
    }

    /* IMPORTANT POINT */
    .tios-point {  
    border: 1px solid #7C2674;
    box-shadow: 0px 1px 2px rgba(23, 97, 134, 0.1), 0px 4px 4px rgba(23, 97, 134, 0.05);
    background: #F6EEF5; 
    color: #5D1757;
    }
    
    /* NEXT STEPS CALL OUT */
    .tios-next {  
    box-shadow: 0px 1px 2px rgba(23, 97, 134, 0.1), 0px 4px 4px rgba(23, 97, 134, 0.05);
    color: #EA2B7B;
    }

    /* FEATURE NOTE*/
    .tios-note {  
    border: 1px solid #868E96;
    box-shadow: 0px 1px 2px rgba(52, 58, 64, 0.1), 0px 4px 4px rgba(52, 58, 64, 0.05);
    background: #F1F3F5;
    color: #343A40;
    }
    
    /* FEATURE FLAG */
    .tios-flag {   
    border: 1px solid #95CEA4;
    box-shadow: 0px 1px 2px rgba(37, 164, 70, 0.1), 0px 4px 4px rgba(37, 164, 70, 0.05);
    background: #F0F9F2;
    color: #18692D;
    }
    /* WARNING */
    .tios-warning {  
    border: 1px solid #E0C299;
    box-shadow: 0px 1px 2px rgba(255, 149, 0, 0.1), 0px 4px 4px rgba(255, 149, 0, 0.05);
    background: #FFF9F0;
    color: #A35F00;
    }
    
    /* DOCUMENT */
    .tios-doc{  
    border: 1px solid #73C9F4;
    box-shadow: 0px 1px 2px rgba(23, 97, 134, 0.1), 0px 4px 4px rgba(23, 97, 134, 0.05);
    background: #F0F8FC;
    color: #2498D2;
    }
    
    /* Divider */
    .tios-divider{  
    background: #2C3C48;
    color: #F0F1F2;
    }
    .tios-divider .left-col {  
    width: 32px;
    height: auto;
    }
    .tios-divider .right-col .title {  
    font-size: 14px;
    }
    
    /* FEATURE Path*/
    .tios-path {  
    background: #F8F9FA;
    color: #343A40;
    padding: 1em;
    /* /shadow/base */
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
    }
    .tios-path ol {
      list-style: none;
      padding: 0;
      margin: 0;
      display: block;
      font-size: .875em;
      line-height: 1em;
    }
    .tios-path ol li {
      display: inline-flex;
      padding: 0 .4em;
      color: #2498D2;
    }
    .tios-path ol li i, .tios-path ol li em {
      padding-top: 4px;
      color: #2498D2;
    }
    .tios-path ol li i.ph-house-fill, em.ph-house-fill {
      color: #868E96;
    }
    .tios-path ol li i.ph-caret-right-bold, em.ph-caret-right-bold {
    color: #CBCBCB;
    }
    .tios-path ol li.text {
      margin-bottom: 6px;
      vertical-align: middle;
    }
    
  
  /*** Atlas Styles Start ***/
    /* Start Atlas Cards */
    .tios-card.atlas {
    height: auto;
    min-height: auto;
    margin-bottom: 1em;
    }
    .tios-container .tios-card.atlas .cardContent {
    flex-direction: row;
    }
    .tios-container .tios-card.atlas .cardContent .left-col {
    font-size: 1.5em;
    padding-right: 16px;
    }
    .tios-container .tios-card.atlas .cardContent .right-col {
    width: auto;
    }

    section.main-cards{
       columns: 2;
       column-gap: 1.5em;
    }

    .tios-card.nue {
      background: var(--shadow-neu-hover);
      background-image: var(--neu-gradient);
      box-shadow: var(--shadow-elevation-high);
      border-radius: var(--border-radius-default);
      border: 1px solid transparent;
      margin: 0;
    }
    .tios-card.nue .cardContent {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.25em;
    }
   .tios-card.nue:hover {
      background: inherit;
      box-shadow: none !important;
      border: 1px solid var(--border-200-default);
  }
  .tios-card.nue:hover .cardContent em, .tios-card.nue:hover .cardContent i, .tios-card.nue:hover .cardContent h5 {
    color: var(--text-primary);
  }
    .tios-card.nue .cardContent em, .tios-card.nue .cardContent i {
      font-size: 2rem;
      margin-bottom: auto;
    }
    .tios-card.nue .cardContent p {
      font-size: 1rem;
      margin: auto;
      text-align: center;
      line-height: 1.5rem;
      color: var(--text-secondary);
    }
    .tios-card.nue .cardContent h5 {
      text-align: center;
      line-height: 1.75rem;
      color: var(--text-secondary);
    }

    .help i, .help em, .help h5 {
      color:var(--brand-helpcenter) !important;
    }
    .academy i, .academy em, .academy h5 {
      color:var(--brand-academy) !important;
    }

    
    /* END Atlas Cards */
    
    
    /* Start menucard */
    .atlas-layout section.cards {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-bottom: 1em;
    }
    .tios-card.menu {
      min-height: fit-content;
      background-color: transparent;
      margin-bottom: 0em;
      box-shadow: none;
    }
    
    .tios-container .tios-card.menu .cardContent {
      padding: 16px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      align-content: center;
      gap: .5rem;
    }
    .tios-container .tios-card.menu i, .tios-container .tios-card.menu em{
      vertical-align: middle;
      height: auto;
      font-size: 1.25em;
      margin-bottom: 0;
      color: var(--text-primary);
    }
    
    .tios-container .tios-card.menu .cardContent .title {
    font-size: 1em;
    font-weight: 500 !important;
    font-family: var(--font);
    line-height: 1.3em;
    width: 100%;
    }

    /* neu */
    .tios-container .tios-card.menu.neu:hover .title, .tios-container .tios-card.menu.neu:hover i, .tios-container .tios-card.menu.neu:hover em {
        color: var(--text-primary);
    }
    .neu {
        border: none;
        z-index: 1;
        border-radius: var(--border-radius-default);
    }
    .neu:after {
        position: absolute;
        content: "";
        width: 0;
        height: 100%;
        top: 0;
        right: 0;
        z-index: -1;
        box-shadow: var(--shadow-neu-hover);
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: var(--border-radius-default);
        background-image: var(--neu-gradient);
    }
    .neu:hover {
        background: transparent !important;
    }
    .neu:hover:after {
        left: 0;
        width: 100%;
    }
    .neu:active {
        top: 2px;
    }
    /* END menucard */
    
    /* Atlas Search Bar Start */
    .atlas .hero {
      margin-bottom: 0;
    }
    .atlas .hero__caption {
      padding: 3rem;
    }
    .atlas .hero__caption  .hero__title{
      color: var(--text-primary);
      font-size: 1.715em;
      font-weight: var(--bold-weight);
    }
    .atlas-ico-seach {
      top: 60px;
      position: absolute;
      padding: 32px !important;
      z-index: 20;
    }
    .atlas-ico-seach .search-bar-widget input {
    margin: 0;
    width: 99%;
    height: 40px;
    border-radius: var(--border-radius-default);
    font-size: 1em;
    }
    .atlas-ico-seach .search-bar-widget button {
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    text-transform: uppercase;
    background-color: #25A446;
    border: #25A446;
    }
    .atlas-ico-seach .search-bar-widget button i, .btn i {
    padding-right: 0;
    font-size: 20px;
    }
    .atlas-ico-seach .search-bar-widget button span {
    display: none;
    }
    /* Atlas Search Bar END */
    
    /* Atlas Headers START */
    .atlas-header {
      padding: 1.5rem 1rem!important;
    }
    .atlas-header h2, .atlas-header p {
      text-align: left !important;
      padding: 0;
      margin: 0;
    }
    .atlas-header h2 {
      font-size: 1.5rem;
      color: var(--text-primary);
    }
    .atlas-header p {
      font-size: 1rem;
      color: var(--text-primary);
      font-weight: var(--bold-weight);
    }
    .atlas-header .row .columns {
    height: 1px;
    }
    .atlas-header img {
    float: right;
    z-index: -1;
    position: absolute;
    top: -48px;
    right: -8px;
    mix-blend-mode: var(--blend-mode);
    height: 140px;
    } 

    .cards .atlas-headers h1.h2.widget__title {
    text-align: left;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 1em;
    font-weight: var(--bold-weight);
    }
    .atlas-layout .widget__alt-title__container h3 {
    font-size: 1em;
    font-weight: var(--bold-weight);
    margin-bottom: 8px;
    color: var(--text-secondary);
    }
    .atlas-layout .hr__accent {
    position: relative;
    display: none;
    }
    /* Atlas Headers END */

    /* Atlas Featured Card START */
    .atlas-catalog-feature-card [class*="block-grid-"] {
    display: block;
    margin: 0;
    padding: 0;
    }
    .atlas-catalog-feature-card [class*=block-grid-]>li {
    display: block;
    float: left;
    padding: 0;
    margin: 0 1em 1em 0;
    border-radius: var(--border-radius-default); /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: var(--border-radius-default); /* Firefox 1-3.6 */
    -moz-border-radius: var(--border-radius-default); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    background-color: var(--surface-200);
    }
    .atlas-catalog-feature-card [class*=block-grid-]>li:hover {
    background: #E0F1E3;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    transition: 0.5s all ease-out;
    }
    .atlas-catalog-feature-card .catalog-grid-item__asset-container--split {
    padding: 0;
    }
    .atlas-catalog-feature-card .catalog-grid-item__asset {
    border-radius: 4px 4px 0 0;
    }
    .atlas-catalog-feature-card .catalog-grid-item__body {
    padding: 2.29125em 2.29125em 4em 2.29125em;
    }
    .atlas-catalog-feature-card .catalog-grid-item__title {
    margin-bottom: .5em;
    font-size: 2.29125em;
    color: var(--text-primary);
    font-weight: var(--bold-weight);
    font-family: var(--alt-font);
    line-height: 1.25em;
    }
    .atlas-catalog-feature-card .catalog-grid-item__description {
    font-size: 1.25rem;
    color: var(--text-secondary);
    padding-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    line-height: 1.9rem;
    }
    .atlas-catalog-feature-card .catalog-grid-item__hr {
    margin:0;
    display: none;
    }
    .atlas-catalog-feature-card .catalog-grid-item__cta-container {
    display: none;
    line-height: 0;
    }
    /* Atlas Featured Card END */
    
    
    
    
    /* Atlas Catalog-cards START */
    .atlas-catalog-cards .featured-content-default-grid {
    display: flex;
    flex-wrap: wrap;
    }
    .atlas-catalog-cards ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    }
    .atlas-catalog-cards .catalog-grid-item {
      background: transparent;
    }
    .atlas-catalog-cards [class*=block-grid-]>li {
    display: block;
    float: left;
    padding: 0;
    margin: 0 1em 1em 0;
    border-radius: var(--border-radius-default); /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: var(--border-radius-default); /* Firefox 1-3.6 */
    -moz-border-radius: var(--border-radius-default);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    background-image: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/a_exif,c_fit,w_300/v1/course-uploads/a6befdf5-930e-4572-b7ce-008caa9a78ba/rfy5t89iyg3e-content-card_bg.png');
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    background-color: var(--surface-100);
    }
    
    .atlas-catalog-cards [class*=block-grid-]>li:hover {
    background: #E0F1E3;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    transition: 0.5s all ease-out;
    background-image: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/a_exif,c_fit,w_300/v1/course-uploads/a6befdf5-930e-4572-b7ce-008caa9a78ba/rfy5t89iyg3e-content-card_bg.png');
    background-repeat: no-repeat;
    background-position: bottom;
    }
    
    .atlas-catalog-cards .catalog-grid-item__asset-container--split {
    padding: 0;
    }
    .atlas-catalog-cards [class*="column"] + [class*="column"]:last-child {
    float: right;
    width: 100%;
    }
    
    .atlas-catalog-cards .catalog-grid-item__asset {
    border-radius: 4px 4px 0 0;
    }
    .atlas-catalog-cards .catalog-grid-item__body {
      padding: 2em;
    }
    .atlas-catalog-cards .catalog-grid-item__title {
    margin-bottom: .25em;
    font-size: 1.175em;
    color: var(--text-primary);
    }
    .atlas-catalog-cards .catalog-grid-item__description {
    font-size: 1rem;
    color: var(--text-secondary);
    padding-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    line-height: 1.5rem;
    }
    .atlas-catalog-cards .catalog-grid-item__hr {
    margin:0;
    display: none;
    }
    .atlas-catalog-cards .catalog-grid-item__cta-container {
    display: none;
    line-height: 0;
    }
    
    /* Atlas Catalog-cards Small */
    .atlas-catalog-cards, .one-card .small-block-grid-1 > li:nth-of-type(n+1) {
    clear: none;
    width: 100%;
    }
    .atlas-catalog-cards .small-block-grid-1>li:nth-of-type(1n+1) {
    clear: none;
    }
    .atlas-catalog-cards .small-block-grid-1>li {
    width: 46%;
    list-style: none;
    clear: none;
    }
    
    /* Atlas Catalog-cards END */
    
    
    /* Atlas Carousel Card START */
    .atlas-carousel .featured-content-multi-carousel .featured-content-block-grid .featured-content-multi-carousel-item {
    display: block;
    padding: 2em;
    margin: 0;
    border-radius: var(--border-radius-default);
    -webkit-border-radius: var(--border-radius-default);
    -moz-border-radius: var(--border-radius-default);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    background: var(--surface-100);
    width: 320px;
    border: none;
    }
    
    .atlas-carousel .featured-content-multi-carousel .featured-content-block-grid .featured-content-multi-carousel-item:hover {
    background: var(--surface-200);
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    transition: 0.5s all ease-out;
    }
    .atlas-carousel .featured-content-multi-carousel-item__body {
    padding: 0;
    text-align: inherit;
    }
    .atlas-carousel .featured-content-multi-carousel-item__title {
    margin-bottom: .25em;
    font-size: 1.175em;
    color: var(--text-primary);
    font-family:var(--font);
    font-weight: var(--default-weight);
    line-height: 1.45;
    text-rendering: optimizeLegibility;
    }
    
    .atlas-carousel .featured-content-multi-carousel-item__description {
    font-size: 1rem;
    color: var(--text-secondary);
    padding: 0;
    margin: 0;
    overflow: hidden;
    line-height: 1.5rem;
    }
    /* Atlas Carousel Card END*/
    
    /* Atlas overview Card START*/
    .atlas-overview ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    }
    .atlas-overview [class*=block-grid-]>li {
      display: block;
      padding: 0;
      margin: 0;
      transition: all 0.3s cubic-bezier(.25,.8,.25,1);
      border-bottom: 1px solid var(--border-200-default);
      background-color: var(--surface-100);
      margin-bottom: 0.5em;
      }
      .atlas-overview [class*=block-grid-]>li:hover {
      background:var(--surface-200);
      transition: 0.5s all ease-out;
      border-bottom: 1px solid var(--border-200-default);
      }
  
      .atlas-overview .catalog-grid-item {
        border: none;
        background: transparent;
        box-shadow: none;
        border-radius: var(--border-radius-none);
      }
    
    .atlas-overview .catalog-grid-item__asset-container--split {
    padding: 0;
    }
    .atlas-overview [class*="column"] + [class*="column"]:last-child {
    float: right;
    width: 100%;
    }
    
    .atlas-overview .catalog-grid-item__body {
    padding: 1em 2em;
    }
    .atlas-overview .catalog-grid-item__title {
      font-size: 1em;
      color: var(--text-primary);
      font-family: var(--font);
    }
    .atlas-overview .catalog-grid-item__description {
      font-size: 1rem;
      margin-top: .25em;
      color: var(--text-secondary);
      padding-top: 0;
      margin-bottom: 0;
      overflow: hidden;
      line-height: 1.5rem;
    }
    .atlas-overview .catalog-grid-item__hr {
    margin:0;
    display: none;
    }
    .atlas-overview .catalog-grid-item__cta-container {
    display: none;
    line-height: 0;
    }
    .atlas-overview .catalog-grid-item__description::before {
    clear: both;
    font-family: Phosphor;
    display: inline-block;
    padding-right: 4px;
    vertical-align: middle;
    content: "\F052";
    }
    /* Atlas overview Card END*/
    
    
    /*Atlas Video Widget Start*/
    .atlas-video .video__container {
      padding: 0;
      padding-right:1rem;
      width: 100%;
    }
    /*Atlas Video Widget End*/
    
    
    /* Atlas Disable Cookie Banner Start */
    body.ember-application.embed .cookie-popover {
    display: none;
    }
    
    .embedded .cookie-popover {
    display: none;
    }
    /* Atlas Disable Cookie Banner END */
    
    /* Atlas only Article & Video Layout Adjustment Start*/
    .embedded .layout-panel.layout-panel--article {
    padding: 2rem 2.5rem;
    }
    .embedded .global-nav__container {
    display: none;
    }
  
    .embedded .header.header--article {
    display: none;
    }
    .embedded .article-sidebar__rating .stars {
    margin: 1em;
    }
    .embedded .stars i {
    color: #cbcbcb;
    font-size: 2rem;
    }
    /* Atlas only Article & Video Layout Adjustment END*/
    
    /* Atlas only LP Adjustment Start*/
    .embedded .header--microsite .header--dashboard {
    display: none;
    }
    .embedded .footer__inner {
    display: none;
    }
    /* Atlas only LP Adjustment END*/
    
    
    
    /* Atlas only Course Layout Adjustment Start*/
    .embedded .header--student {
    background: #f1f3f5;
    }
    .embedded .header--learner .header__left {
    padding: 0;
    float: inherit;
    position: initial;
    width: 100%;
    }
    .embedded .header--student .header__left__copy {
    width: 100%;
    padding: 1rem 3rem;
    }
    /* Hidding Search Bar Start*/
    .embedded .enroll__secondary-actions, .embed .header_academy, .embedded .btn--bare, .embedded .expandable-sidebar__buttons, .embedded .header--student .header__left__icon,  .embedded .header--student .header__right {
      display: none;
    }
    /* Hidding Search Bar End*/
  /* Atlas only Course Layout Adjustment END*/
    
  
  
  
  /************************ Mobile *************************/
  /* Smartphones (landscape) ----------- */
  @media only screen and (min-width : 375px) {
  /* Styles */
  }
  
  /************************   Tablet   *************************/
  /* (portrait) ----------- */
  @media only screen and (min-width : 768px) {
      .header_academy {
        padding: 0em 5em 0;
      }
      .layout__content .widget {
        padding: 2em 8em;
      }
      .layout__content .widget.widget--course-purchase {
        padding: 0;
      }
      .pad, .footer {
        padding: 2em 3em!important;
      } 

  }
  @media only screen and (max-width: 768px) {
      .header--microsite.sticky, .header--dashboard.sticky, header.header_academy.sticky {
        padding: 0em 1em 0 0;
      }
      .header--microsite.sticky .header__logo, .header--dashboard.sticky .header__logo, .header_academy.sticky .header__logo {
        margin: 0 0.5em;
        height: 24px;
        width: 24px;
      }
      .header__logo_mobile {
        display: block;
      }
      #drop-down-cbox + label {
        display: inline-block; /* unhide the mobile nav button */
      }
      
      .main-nav {
        max-height: 0px; /* same vertical grow transition trick as above */
        height: calc(100vh - 60px); /* take full vertical viewport height, -60px for nav-bar */
        overflow: auto;
        position: absolute;
        top: 60px;
        line-height: auto;
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: var(--surface-100);
        transition: all 500ms ease-in-out;
      }
      .header__list_selected:hover {
        border-bottom: none;
      }
      
      #drop-down-cbox:checked ~ .main-nav {
        max-height: fit-content;
        height: auto;
        transition: all 500ms ease-in-out;
        box-shadow: var(--shadow-elevation-medium);
      }
      .main-nav li {
        display: block;
        width: 100%;
        display: inline-table;
      }
      .main-nav li span {
        position: relative;
      }
      .main-nav li.header__list.header__list_selected ul {
        display: initial;
      }
      .header__list_selected {
        border-bottom: none;
    }
      
      /* design and position downward arrow */
      .main-nav li.header__list_selected span:after {
        width: 0;
        height: 0;
        display: none;
      }
      .main-nav li span:after {
        content: "";
        width: 8px;
        height: 8px;
        position: absolute;
        top: 50%;
        right: 2em;
        transform: translateY(-50%) rotate(-45deg);
        border-left: 2px solid var(--ui-primary);
        border-bottom: 2px solid var(--ui-primary);
      }
      
      .main-nav li a:hover,
      .main-nav li span:hover {
        background-color: var(--accent-color);
        color:var(--text-inverse);
        border-bottom: none;
      }
      
      .main-nav li > ul li {
        position: relative;
      }
      .main-nav li > ul li a,
      .main-nav li > ul li span {
        background-color: #eee;
      }
  
      .featured-content-multi-carousel {
        padding: 0;
      }
      
      .featured-content-multi-carousel .featured-content-block-grid {
        grid-template-columns: auto auto;
        }
      .featured-content-multi-carousel .featured-content-block-grid>li {
        padding: 0.5em;
        grid-gap: 1em;
        }
        
        .cloud-bg .space-base-sides img {
          display: none;
        }   

        .equal-cards .row {
          flex-direction: column;
        } 

        .atlas-carousel .featured-content-multi-carousel .featured-content-block-grid {
            grid-template-columns: auto auto auto auto;
        }
        .atlas-carousel .featured-content-multi-carousel .featured-content-block-grid>li {
            padding: 2em;
            grid-gap: 2em;
        }
  
      .pad, .footer{
        padding: 2em 3em!important;
      } 
      
      /*PERSONA CODE*/
      .pathfinder {
        padding: 4em 4em 1em 4em !important;
      }
      .jumbotron h1 {
        font-size: 36px !important;
      }
  
      .container-filtering {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
      }
    
      .container-filtering select {
        min-height: 48px;
        max-width: none !important;
        margin: 0.5em !important;
      }
      
      .container-filtering p {
        font-size: 16px !important;
        margin: 0.5em !important;
      }
  
      /*SEARCH BAR MOBILE */
      .catalog-search-bar .columns {
        margin-bottom: 1rem;
        padding: 0;
      }
      .catalog-search input {
        height: 100%;
        margin: 0;
        padding: 1em;
      }
      .catalog-filters__sort {
        width: 100%;
      }
      .catalog-filters__sort select {
        padding: 1em;
        height: auto;
      }
      .tios-splash .col {
        width: 92%;
        position: absolute;
        top: 40px;
        left: 4%;
        z-index: 200;
    }
  /*** Atlas Styles Start ***/
      .layout__content .widget.atlas-layout {
        padding: 1.5rem 1rem;
      }
      .layout__content .widget.atlas-layout.atlas-carousel {
        padding: 1.5rem 1rem;
      }
      .layout__content .widget.atlas {
        padding: 0rem;
      }
      .layout__content .widget.atlas-headers {
        padding: 0 1rem;
      }
      .atlas-headers h1.h2.widget__title {
        text-align: left;
      }
      .tios-card.atlas, .tios-card.menu {
          flex: 0 1 calc(100% - 0em);
          min-height: auto;
      }
      .atlas-carousel .featured-content-multi-carousel {
        padding: 0;
      }
  /*** Atlas Styles END ***/
  
  }
  
      
  /* (landscape) ----------- */
  @media only screen and (min-width : 1024px) {
  /* Styles */
     
      .global-nav__container {
        max-width: 100%;
      }
      .nav--global-links {
        background-color: #2c3c48;
        padding: 3px 0;
      }
      .nav--global-links>a {
        padding-left: 2em;
        font-size: 12px;
        font-size: 0.75rem;
        color: var(--text-inverse);
      }
      .pad, .footer {
        padding: 2em 4em!important;
      }
      
  
  
  /*** Atlas Styles Start ***/
      .tios-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        height: 100%;
    }
    .tios-card.atlas, .tios-card.menu{
        flex: 0 1 calc(50% - 0em);
        min-height: auto;
    }
    .layout__content .atlas {
      padding: 0;
      top: 0;
      position: relative;
      height: auto;
    }
    .atlas-ico-seach {
      width: 32%;
      margin: auto;
      float: right;
      right: 0;
      top: 16px;
    }
    .layout__content .widget.atlas-headers {
      padding: 0 2rem;
    }
    .atlas-headers h1.h2.widget__title {
      text-align: left;
      margin-bottom: 0;
      color: var(--text-primary);
      font-size: 1em;
      font-weight: var(--bold-weight);
    }
    .atlas-catalog-cards .featured-content-default-grid {
      display: inline;
      flex-wrap: inherit;
    }
    .atlas-catalog-cards .small-block-grid-1>li {
      width: 48%;
      list-style: none;
      clear: none;
    }
    .atlas-carousel .featured-content-multi-carousel {
      padding: 0;
    }
  /*** Atlas Styles END ***/
      
  }
  /************************ Desktop *************************/
  /* Desktops and laptops ----------- */
  @media only screen  and (min-width : 1224px) {
  /* Styles */
    .pad, .footer {
      padding: 2em 8em!important;
    }
  }
  
  /* Large screens ----------- */
  @media only screen  and (min-width : 1674px) {
  /* Styles */
  
  }
  
  
  
  @media only screen and (min-width: 48.063em) {
  
  .layout__content .widget.atlas-layout {
    padding: 2rem 10rem;
  }
  .layout__content .widget.atlas-layout.atlas-carousel {
    padding: 2rem 10rem 0;
  }
    
  }
  
  
  /* start snippet Numbered Tip (Fill) */
  .callout-box-icon {
    position: relative;
    margin-left: 30px;
    background-color: #D1E8EC;
    padding: 2rem;
    border: 1px solid #fff;
  }
  .callout-box-icon p:last-of-type {
    margin-bottom: 0;
  }
  .callout-box-icon__icon-holder {
    position: absolute;
    top: 12px;
    left: -30px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: inherit;
    padding: 12px;
    font-size: 26px;
    font-weight: var(--bold-weight);
  }
  /* end snippet Numbered Tip (Fill) */
  
  /* start snippet Numbered Tip v2 (Fill) */
  .callout-box-icon-v2 {
    position: relative;
    margin-left: 30px;
    background-color: #B7ECE2;
    padding: 2rem;
    border: 1px solid #fff;
  }
  .callout-box-icon-v2 p:last-of-type {
    margin-bottom: 0;
  }
  .callout-box-icon-v2__icon-holder {
    position: absolute;
    top: 12px;
    left: -30px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: inherit;
    padding: 12px;
    font-size: 26px;
    font-weight: var(--bold-weight);
  }
  /* end snippet Numbered Tip v2 (Fill) */
  
  /* start snippet Numbered Tip v3 (Fill) */
  .callout-box-icon-v3 {
    position: relative;
    margin-left: 30px;
    background-color: #3FD3E7;
    padding: 2rem;
    border: 1px solid #fff;
  }
  .callout-box-icon-v3 p:last-of-type {
    margin-bottom: 0;
  }
  .callout-box-icon-v3__icon-holder {
    position: absolute;
    top: 12px;
    left: -30px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: inherit;
    padding: 12px;
    font-size: 26px;
    font-weight: var(--bold-weight);
  }
  /* end snippet Numbered Tip v3 (Fill) */
  
  /* start snippet Numbered Tip v4 (Fill) */
  .callout-box-icon-v4 {
    position: relative;
    margin-left: 30px;
    background-color: #E2F7FD;
    padding: 2rem;
    border: 1px solid #fff;
  }
  .callout-box-icon-v4 p:last-of-type {
    margin-bottom: 0;
  }
  .callout-box-icon-v4__icon-holder {
    position: absolute;
    top: 12px;
    left: -30px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: inherit;
    padding: 12px;
    font-size: 26px;
    font-weight: var(--bold-weight);
  }
  /* end snippet Numbered Tip v4 (Fill) */
  
  /* start snippet Numbered Tip v5 (Fill) */
  .callout-box-icon-v5 {
    position: relative;
    margin-left: 30px;
    background-color: #F5F5F5;
    padding: 2rem;
    border: 1px solid #fff;
  }
  .callout-box-icon-v5 p:last-of-type {
    margin-bottom: 0;
  }
  .callout-box-icon-v5__icon-holder {
    position: absolute;
    top: 12px;
    left: -30px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: inherit;
    padding: 12px;
    font-size: 26px;
    font-weight: var(--bold-weight);
  }
  /* end snippet Numbered Tip v5 (Fill) */
  
  /* start snippet Numbered Tip v6 (Fill) */
  .callout-box-icon-v6 {
    position: relative;
    margin-left: 30px;
    background-color: #EEEBF8;
    padding: 2rem;
    border: 1px solid #fff;
  }
  .callout-box-icon-v6 p:last-of-type {
    margin-bottom: 0;
  }
  .callout-box-icon-v6__icon-holder {
    position: absolute;
    top: 12px;
    left: -30px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: inherit;
    padding: 12px;
    font-size: 26px;
    font-weight: var(--bold-weight);
  }
  /* end snippet Numbered Tip v6 (Fill) */  
  
  
  
  
  
  /* start snippet Numbered Tip (Outlined) */
  .callout-box-icon-light {
    position: relative;
    margin-left: 30px;
    padding: 2rem;
    border: 2px solid #7AB8AF;
  }
  
  .callout-box-icon-light p:last-of-type {
    margin-bottom: 0;
  }
  .callout-box-icon-light__icon-holder {
    position: absolute;
    top: 12px;
    left: -30px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    background-color: #fff;
    padding: 12px;
    font-size: 26px;
    font-weight: var(--bold-weight);
  }
  .callout-box-icon-light__icon-holder > span {
    position: absolute;
    z-index: 3;
    font-size: 25px;
  }
  .callout-box-icon-light__icon-holder:before {
    content: '';
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 50%;
    border: 2px solid #7AB8AF;
    position: absolute;
    z-index: 1;
  }
  
  .callout-box-icon-light__icon-holder:after {
    content: '';
    display: block;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    background: #fff;
    position: absolute;
    z-index: 2;
  
  }
  
  /* end snippet Numbered Tip (Outlined) */
  
  /* start snippet Solid Tip */
  .solid-box {
    border-radius: var(--border-radius-default);
    background-color: #405667;
    color: white;
    margin-bottom: 1em;
    padding: 1em;
  }
  /* end snippet Solid Tip */
  
  /* start snippet Solid Tip Blue */
  .solid-box-blue {
    border-radius: 1px;
    background-color: #BDE2F6;
    color: #111;
    margin-bottom: 1em;
    padding: 1em;
  }
  /* end snippet Solid Tip */
  
  /* start snippet Outlined Tip */
  .outlined-box {
    border-radius: var(--border-radius-default);
    border: 1px solid #B7ECE2;
    color: #111;
    margin-bottom: 1em;
    padding: 1em;
  }
  /* end snippet Outlined Tip */

    /* start snippet Outlined Tip - Sammie 12/9/24*/
  .outlined-box-2 {
    border-radius: var(--border-radius-default);
    border: 2px solid #7C2674;
    color: #111;
    margin-bottom: 1em;
    padding: 1em;
    background: #F6EEF5;
  }
  /* end snippet Outlined Tip - Sammie 12/9/24*/
  
  
  /* start snippet Outlined Tip with Icon */
  .outlined-box-w-icon {
    border-radius: var(--border-radius-default);
    border: 1px solid #969797;
    background: #f8f8f8;
    color: #111;
    margin-bottom: 1em;
    padding: 1em;
  }
  
  
  .outlined-box-w-icon em, .outlined-box-w-icon i {
    display: inline-block;
    padding-right: 1em;
  }
  
  .outlined-box-w-icon strong {
    display: inline-block;
    padding-right: 1em;
  }
  /* end snippet Outlined Tip with Icon */
  
  /* Grey Panel */
  .panel-grey {
    border-radius: var(--border-radius-default);
    background-color:var(--surface-200);
    margin-bottom: 1em;
    padding: 1em;
  }
  
  
  /* TI Path snippet */
  .kc-ti-path {
    padding: 38px;
  }
  .kc-ti-path__holder {
    border: 2px solid #404550;
    background-color: #eeeeee;
    position: relative;
    min-height: 66px;
    padding-left: 60px;
    padding-top: 20px;
  }
  .kc-ti-path__holder ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    color: #37393a;
  }
  .kc-ti-path__holder ul li {
    font-size: 14px;
    font-weight: var(--default-weight);
    position: relative;
    padding-left: 7px;
    padding-right: 15px;
  }
  .kc-ti-path__holder ul li:before{
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -4px;
    width: 8px;
    height: 9px;
    background-image: url(//d36ai2hkxl16us.cloudfront.net/m/ti-knowledge-center/caret.png);
    background-size: contain;
    background-position: 50% 50%;
  }
  
  .kc-ti-path__holder ul li a:not(.btn) {
    color: #37393a;
  }
  .kc-ti-path__holder ul li.kc-ti-path__head {
    font-weight: 900;
    padding-left: 0;
    padding-right: 0;
  }
  .kc-ti-path__holder ul li:last-child {
    padding-right: 0;
  }
  .kc-ti-path__holder ul li:last-child:before {
    display: none;
  }
  .kc-ti-path__holder:before {
    content: '';
    position: absolute;
    left: -40px;
    top: -14px;
    width: 81px;
    height: 90px;
    background-image: url(//d36ai2hkxl16us.cloudfront.net/m/ti-knowledge-center/snippet-logo.png);
    background-size: contain;
    background-position: 50% 50%;
  }
  .kc-ti-path__holder ul li.kc-ti-path__head:before {
    display: none;
  }
  
  
  /* page curl dropshadow */
  
  .curl {
    position: relative;
    display: inline-block;
  }
  .curl img {
    z-index: 1;
    position: relative;
  }
  .curl:before, .curl:after {
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .3);
    -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.3);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
    position: absolute;
    left: 10px;
    bottom: 15px;
    width: 50%;
    max-width: 300px;
    height: 20%;
    content: "";
  }
  
  .curl:after {
    -webkit-transform: rotate(3deg);
      -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg);
      right: 10px;
      left: auto;
  }
  /* end page curl dropshadow */
  
  /* image border */
  
  .bordered {
  border: 2px solid var(--border-200-default);
  display: inline-block;
  padding: 5px;
  }
  
  /* end image border */
  
  
  
  .syllabus__section-title-index {
  display: none;
  }
  
  .learn.course .directional__nav .directional__nav__label {
  display: none;
  }
  
  .directional__nav__button.directional__nav__button--right:before {
  top: 0px !important;
  padding-bottom: 4px;
  padding-top: 8px;
  }
  
  
  .directional__nav__button i::before {
  position: relative !important;
  }
  
  /* IE11 HACK */
  *::-ms-backdrop, .syllabus__topic--non-expandable-title-bullet {
  font-size: 7px;
  line-height: 16px;
  }
  
  
  .article-sidebar__custom-fields { display: none; }
  
  /* CSS for CECP Landing page START*/
  .CECP--iconset {
  background:url("https://d36ai2hkxl16us.cloudfront.net/course-uploads/c30ddc04-1c23-4e27-8e1d-6ec3f9bc9569/47bntjjp679j-widgtbkg.png"); 
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  }
  .engagebkg {
  background:url("https://d36ai2hkxl16us.cloudfront.net/course-uploads/c30ddc04-1c23-4e27-8e1d-6ec3f9bc9569/a1oq2vjwcc9f-engagebkg.png"); 
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
  }
  .CECP--iconset {font-weight: var(--bold-weight); }
  .cecpdan h3 {font-weight: var(--bold-weight); font-size:28px; color:var(--text-primary);}
  .grey {background: #f6f6f6;}
  .grey .featured-content-multi-carousel-item {border:none;}
  .page hr {display:none;}
  
  /* CSS for CECP Landing page END*/
  
  /*EDITED 10/19/2021*/
  /*TAILWIND REFACTOR*/
  .hero-test {
    min-width:100vw;
    height: auto;
    margin: 0 auto;
    background-color: #ff7384;
  }
  .theme-switcher {
    bottom: 3em;
    right: 0;
    float: right;
    position: relative;
  }
  
  
  /*COURSE RIBBON CARD START*/
  section.course-cards .tios-container .tios-card {
    box-shadow: var(--shadow-elevation-low);
    border: 1px solid var(--border-100);
  }
  
  section.course-cards .tios-container .tios-card .cardContent .left-col {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  section.course-cards .tios-container .tios-card .cardContent .left-col em {
    line-height: 0px;
    margin-bottom: 0px;
    margin-right: 8px;
  }
  
  
  section.course-cards .cardContent {
    display: flex;
    flex-direction: column;
  }
  
  section.course-cards .tios-container .tios-card:hover {
      background: var(--surface-100);
      box-shadow: var(--shadow-elevation-medium);
      transition: 0.3s all ease-out;
      cursor: pointer;
  }
    
  section.course-cards .tios-container .tios-card:hover, section.course-cards .tios-container .tios-card:hover .title, section.course-cards .tios-container .tios-card:hover em{
      color:var(--link-color);
      transition: 0.3s all ease-in;
  }
  
  section.course-cards .tios-container .tios-card:hover .icon, section.course-cards .tios-container .tios-card:hover .desc, section.course-cards .tios-container .tios-card:hover i {
      color:var(--text-primary);
      transition: 0.3s all ease-in;
    }
    
  /*COURSE RIBBON CARD END*/
  
  
  /*EDITED 12/10/2021*/
  /*PERSONA CSS*/
  .pathfinder {
    padding: 4em 8em 1em 8em;
  }
  
  .jumbotron h1 {
    font-size: 48px;
    font-weight: 800;
    text-transform: capitalize;
    text-align: center;
  }
  
  .container-filtering {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  
  .container-filtering select {
    max-width: 200px;
    margin: 1em 0.5em !important;
    border-radius: 1px solid var(--border-radius-default);
    padding: 0 1em;
  }
  
  .container-filtering select:focus {
    border: 1px solid var(--accent-color) !important;
  }
  
  .container-filtering p {
    margin: 1em 0.5em;
  }
  
  /*******NEXT LVL PAGE EDITS*******/
  
  /*NEXT LVL LAYOUT START*/
  @media screen and (max-width: 768px) {
    .cecp .content .layout__content .widget {
      padding: 1em 2em!important;
    }
  }
  /*NEXT LVL LAYOUT END*/
  
  /*NEXT LVL LANDING PAGE BANNER START*/
  .header-banner .col-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .header-banner .col-container > * {
    flex: 1 1 15em;
  }
  
  .header-banner .col-container .col {
    max-height: 95%;
  }
  
  .header-banner .col-container .col.text {
    align-items: center;
    margin: auto;
  }
  
  .body-text {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 5em;
    vertical-align: center;
  }
  
  .header-banner .col-container .col img {
    min-height: 100%;
    float: right;
    object-fit: cover;
  }
  
  .header-banner .col-container h1 {
    color: var(--text-primary-light);
    font-size: 3.75rem;
  }
  
  .header-banner .col-container p {
    color: var(--text-secondary-light);
    font-size: 1.25rem;
  }
  
  a.btn-primary {
    display: flex;
    background-color: var(--link-color);
    color: var(--light-constant)!important;
    padding: 1em 2.5em;
    border-radius: var(--border-radius-round);
    font-size: 1.125rem;
    font-weight: var(--bold-weight);
    max-width: 16em;
    justify-content: center;
    border: none;
  }
  
  a.btn-primary:hover {
    background-color: var(--link-color);
  }
  
  a.btn-primary:active {
    background-color: var(--link-color);
  }
  
  a.btn-primary:focus {
    background-color: var(--link-color);
  }
  
  @media screen and (max-width: 768px) {
    .header-banner .col-container .body-text {
      padding: 2.5rem;
    }
    
    .header-banner .col-container h1 {
      font-size: 2.5rem;
    }
    
    .header-banner .col-container p {
      font-size: 1rem;
    }
    
    .header-banner .col-container .col.text {
      flex-grow: 3;
    }
  }
  
  @media screen and (min-width: 1920px) {
    .header-banner .col-container .col .body-text {
      max-width: 70%;
      margin: auto;
    }
  }
  
  /*END NEXT LVL LANDING PAGE BANNER*/
  
  /*NEXT LVL LANDING PAGE CONTENT BLOCK START*/
  .cecp.content .ember-view {
    padding: 2em 0;
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  
  .cecp.content .widget__title {
    margin: 0!important;
  }
  
  .cecp.content h2 {
    font-size: 2.5rem!important;
  }
  .cecp.content .ember-view.indent-list {
      padding: 0;
  }
  
  /*END NEXT LVL LANDING PAGE CONTENT BLOCK*/
  
  /*NEXT LVL FEATURED ICON BLOCK START*/
  .cecp.content .col {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 3em;
  }
  
  .cecp.content .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    gap: 2em;
    align-items: flex-start;
  }
  
  .cecp.content.left-align .row {
    gap: 0em!important;
  }
  
  .feature-block {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: left;
    gap: 1.5em;
  }
  
  .feature-block em {
    color: var(--dark-constant);
  }
  
  .feature-block .icon {
    padding: 1em;
    border-radius: 4px;
  }
  
  .feature-block .text h6 {
    font-size: 1em;
  }
  
  .feature-block .text p {
    margin-bottom: 0;
  }
  
  .cecp.content .medium-6.columns {
    width: 100%;
  }
  
  @media screen and (max-width: 1320px) {
    .cecp.content .row {
      flex-wrap: wrap;
    }
    
    .cecp.content .medium-6.columns {
      min-width: 100%;
    }
    
    .cecp.content img {
      width: 100%;
    }
    
  }
  
  @media screen and (max-width: 768px) {
    .header-banner .col-container .body-text {
      padding: 2.5rem;
    }
  }
  /*END NEXT LVL FEATURED ICON BLOCK*/
  
  /*NEXT LVL FEATURES BLOCK START*/
  .cecp.content.featured {
    background-color: var(--surface-100);
  }
  
  /*END NEXT LVL FEATURES BLOCK*/
  
  /*NEXT LVL CONTENT BLOCK START*/
  .cecp.content .body-text {
    padding: 0!important;
  }
  
  .cecp.content.left-align .ember-view {
    align-items: flex-start;
    margin: 0;
  }
  
  
  a.btn-secondary {
    display:flex;
    align-items: center;
    gap: 0.5em;
    color: var(--link-color);
    padding: 0;
    font-size: 1.125rem;
    font-weight: var(--bold-weight);
    max-width: 16em;
  }
  /*END NEXT LVL CONTENT BLOCK*/
  
  /*NEXT LVL VIDEO CONTENT BLOCK START*/
  .cecp.content .video__container .video__frame {
    border-radius: 4px;
  }
  /*END NEXT LVL VIDEO CONTENT BLOCK*/
  
  /*NEXT LVL PRICING BLOCK*/
  .cecp.content.pricing {
    background-color: var(--surface-100);
  }
  
  /*END NEXT LVL PRICING BLOCK*/
  
  /*NEXT LVL MEDIA SCREEN BODY ADJUSTMENTS*/
  @media screen and (min-width: 1920px) {
    /*.cecp.content .ember-view {
      max-width: 90%;
      margin: auto;
    }*/
  }
  /*END NEXT LVL MEDIA SCREEN BODY ADJUSTMENTS*/
  
  /*NEXT LVL DETAIL PAGE START*/
  .cecp.content.hide-title .ember-view {
    padding-top: 0px;
  }
  
  .cecp.content.center-text .row {
    align-items: center;
  }
  
  .cecp.content.featured .medium-6.columns:first-child {
    width: 100%;
  }
  
  .cecp.content.featured .medium-6.columns:last-child {
    width: 100%;
  }
  
  .cecp.content.featured.detail-page .medium-6.columns:first-child {
    width: 40%;
  }
  
  .cecp.content.featured img {
    border-radius: 4px;
  }
  /*END NEXT LVL DETAIL PAGE*/
  /*******END NEXT LVL PAGE EDITS*******/
  
  /*cog page*/
  .cogslider .featured-content-carousel-item__overlay, .cogslider .featured-content-carousel__nav { display:none;}
  
  /*FIXING TRANSCRIPT HEADER ISSUE*/
  .header.header--dashboard {
    position: relative;
    width: 100%;
    z-index: 100;
    margin-top: 64px;
  }
  
  .header_academy {
    z-index: 101;
  }
  
  /*Adding space to top of buttons*/
  .ember-view.btn.btn--print.hide-for-print {
    margin-top: 16px;
  }
  /*END FIXING TRANSCRIPT HEADER ISSUE*/
  
  /*Fixing learner dashboard dropdown link menu position*/
  .dashboard-header-dropdown__link {
    float: right;
  }

/*SAMMIE*/
/* 2024 Custom Cloud background */
.cloud-bg {
  background-image: url(https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1/course-uploads/a6befdf5-930e-4572-b7ce-008caa9a78ba/pyjr1rcfs03h-backgroundCloud.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
}
.circle-pattern-1 {
  background-image: url(https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1/course-uploads/a6befdf5-930e-4572-b7ce-008caa9a78ba/w9qe8qp850qx-Group34012x.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
}

/* Need more help Bottom Cards */
.tios-card:is(.card-helpcenter, .card-communities, .card-developer ) .cardContent {
    display: flex;
    align-items: center;
    text-align: center;
    padding: var(--space-2xl);
}
/* Office Hours page styling */

  .office-hours .featured-content-image-overlay-item .featured-content-image-overlay-item__overlay{display: none;}

.office-hours .featured-content-image-overlay-item {
opacity: 0.8;}

  .office-hours .featured-content-image-overlay-item:hover {
    background: var(--surface-200);
    opacity: 1;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.25), 10px 0 10px rgba(0,0,0,0.22);
    transition: 0.5s all ease-out;
    }

.office-hours .featured-content-carousel-item .featured-content-carousel-item__overlay,.office-hours .featured-content-carousel__nav,.office-hours .featured-content-carousel__dots{display: none;}


.office-hours-hover img:hover{box-shadow: 10px 10px 10px rgba(0,0,0,0.25), 10px 0 10px rgba(0,0,0,0.22);}

.office-hours .btn--primary {
  background-color: #e92c7b!important;
    border-color: #e92c7b!important;
    color: var(--accent-contrast-color)!important;
    }
.office-hours .btn--primary:hover {
  background-color: #373c44!important;
    border-color: #373c44!important;
    color: var(--accent-contrast-color)!important;
    } 

/*Start Office Hours Upcoming Sessions Featured Content Widget Styling*/

    .office-hours .widget__title-cta {
  background-color: #e92c7b!important;
    border-color: #e92c7b!important;
    color: var(--accent-contrast-color)!important;
    border-radius: 4px;
    }
.office-hours .widget__title-cta:hover {
  background-color: #373c44!important;
    border-color: #373c44!important;
    color: var(--accent-contrast-color)!important;
    } 

.office-hours .catalog-grid-item__body {
    padding: 2em;
    max-height: 1px;}

/*End Office Hours Upcoming Sessions Featured Content Widget Styling*/

.office-hours-columns .columns
    {border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    max-width: 300px;
    min-height: 150px;
    margin: 5px;
    justify-content: center;}

  /* For um Banner1 */
.umBanner1 {position: relative;}
.umBanner1::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.umBanner1 .hero__caption { background: transparent; left: 15%; top: 50%; transform: translateY(-60%); bottom: auto; z-index: 2; width: 40%;}

.umBanner1 .hero__caption .hero__title {font-size: 60px; color: #fff; font-weight: 700;}
.umBanner1 .hero__caption span {font-size: 18px; margin-bottom: 36px; color:white;}
.umBanner1 .btn--primary { color: white; background-color: transparent; border: 2px solid white; border-radius: 4px; font-size: 18px; display: block; margin-top: 5%; max-width:50%}
@media only screen and (max-width: 979px) {
    .umBanner1 .hero__caption .hero__title {font-size: 32px !important;}
    .umBanner1 .hero__caption span {font-size: 18px; margin-bottom: 14px;}
    .umBanner1 .btn--primary {font-size: 18px;}
}
@media only screen and (max-width: 767px) {
    .umBanner1::before {display: none;}
    .umBanner1 .hero__caption {transform: none;}
    .umBanner1 .hero__caption .hero__title {color: #2e2e2e !important; }
    .umBanner1 .hero__caption span {color: #2e2e2e !important; font-size: 14px;}
    .umBanner1 .btn--primary {color: #2e2e2e; font-size: 14px; border-color: #2e2e2e;}
}  

/* For um Banner2 Dark Text */
.umBanner2 {position: relative;}
.umBanner2::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.umBanner2 .hero__caption { background: transparent; left: 15%; top: 50%; transform: translateY(-60%); bottom: auto; z-index: 2; width: 40%;}

.umBanner2 .hero__caption .hero__title {font-size: 40px; color: #2e2e2e; font-weight: 700;}
.umBanner2 .hero__caption span {font-size: 18px; margin-bottom: 36px; color:#2e2e2e;}
.umBanner2 .btn--primary { color: white; background-color: transparent; border: 2px solid white; border-radius: 4px; font-size: 18px; display: block; margin-top: 5%; max-width:50%}
@media only screen and (max-width: 979px) {
    .umBanner2 .hero__caption .hero__title {font-size: 32px !important;}
    .umBanner2 .hero__caption span {font-size: 18px; margin-bottom: 14px;}
    .umBanner2 .btn--primary {font-size: 18px;}
}
@media only screen and (max-width: 767px) {
    .umBanner2::before {display: none;}
    .umBanner2 .hero__caption {transform: none;}
    .umBanner2 .hero__caption .hero__title {color: #2e2e2e !important; }
    .umBanner2 .hero__caption span {color: #2e2e2e !important; font-size: 14px;}
    .umBanner2 .btn--primary {color: #2e2e2e; font-size: 14px; border-color: #2e2e2e;}
} 
    /* end Office Hours page styling*/



/** TWO COL HEADER **/
/*Horizontally align columns*/

.two-col-center.widget--two-column .row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/** END TWO COL HEADER **/



/** PRIMARY CARDS **/
/*Use a column widget and pull in the corresponding snippet*/
.primary-card {
  width: 100%; 
  height: 100%; 
  background: var(--accent-color); 
  border-radius: var(--border-radius-default); 
  justify-content: flex-start; 
  align-items: flex-start; 
  display: inline-flex
}

.primary-card .inner {
    padding: var(--space-2xl) var(--space-xl);
    flex-direction: column;
    gap: 8px;
    display: flex;
}

.primary-card-inverse .inner {
    padding: var(--space-2xl) var(--space-xl);
    flex-direction: column;
    gap: 8px;
    display: flex;
}

.primary-card em, .primary-card i {
    font-size: 4em;
    color: var(--light-constant);
}

.primary-card :is(h1, h2, h3, h4, h5, h6, p, a) {
    margin: 0;
    color: var(--light-constant);
}

.primary-card-inverse :is(h1, h2, h3, h4, h5, h6, p, ) {
    margin: 0;
    color: var(--text-primary);
}

.primary-card ul {
    margin: 0 0.5rem;
    padding: 0;
    font-size: 1em;
    color: var(--light-constant);
    line-height: 1.5em;
    word-wrap: break-word;
}

.primary-card li {
    padding-left: 0.5em;
}

.primary-card ul li::marker {
  content: "▸";
}

.primary-card a {
    color: var(--light-constant) !important;
}

/*Make everything full-width in mobile*/
@media screen and (max-width: 768px) {
  .equal-cards .row {
    display: flex;
    gap: 1em;
    flex-direction: column;
  } 

}  
/*** END PRIMARY CARDS ***/

/*Accordion added by Sammie 10/21/24*/
.accordion:hover .accordion-item:hover .accordion-item-content,

.accordion .accordion-item--default .accordion-item-content {

    height: 15rem;

max-height: fit-content;

}



.accordion-item-content,

.accordion:hover .accordion-item-content {

    height: 0;

    overflow: hidden;

    transition: height 1s;

}



/* Aesthetic */



.accordion {

    padding: 0;

    margin: 0 auto;

    width: 100%;

}



.accordion .accordion-item {

  border-bottom: 1px solid #d73a15;

  padding: 1em;

}



.accordion h1 {

  margin: 0;

}

.accordionheader{

    background-color: #fff;

    color: #d73a15;

    display: inline-block;

    text-transform: uppercase;

}



/*.accordion .accordion-item:nth-child(1) {

  background-color: hsl(200, 80%, 60%);

  background-image: linear-gradient(-90deg, hsl(200, 80%, 60%), hsl(200, 80%, 45%) 2em, hsl(200, 80%, 60%));



}



.accordion .accordion-item:nth-child(2) {

  background-color: hsl(280, 60%, 45%);

  background-image: linear-gradient(-90deg, hsl(280, 80%, 60%), hsl(280, 60%, 45%) 2em, hsl(280, 80%, 60%));

}



.accordion .accordion-item:nth-child(3) {

  background-color: hsl(40, 80%, 40%);

  background-image: linear-gradient(-90deg, hsl(40, 80%, 60%), hsl(40, 80%, 45%) 2em, hsl(40, 80%, 60%));

}



.accordion .accordion-item:nth-child(4) {

  background-color: hsl(80, 40%, 40%);

  background-image: linear-gradient(-90deg, hsl(80, 80%, 40%), hsl(80, 80%, 35%) 2em, hsl(80, 80%, 40%));

} */


/*end Accordion added by Sammie*/

/* Next Steps Call Out - added by Sammie 12/10/24 */
 .next-steps-call-out {
    color: #111;
    margin-bottom: 1em;
    padding: 1em;
    background: #F6EEF5;
  }