@font-face {
  font-family: "Griffith Sans Display";
  font-weight: 100 900;
  src: url("https://canvasuidevsa.blob.core.windows.net/canvasui/static/assets/fonts/griffith-sans-display.woff2") format("woff2");
}
@font-face {
  font-family: "Griffith Sans Text";
  font-weight: 100 900;
  src: url("https://canvasuidevsa.blob.core.windows.net/canvasui/static/assets/fonts/griffith-sans-text.woff2") format("woff2");
}
@font-face {
  font-family: "Griffith Sans Text";
  font-weight: 100 900;
  font-style: italic;
  src: url("https://canvasuidevsa.blob.core.windows.net/canvasui/static/assets/fonts/griffith-sans-text-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Griffith Serif Display";
  font-weight: 275 900;
  src: url("https://canvasuidevsa.blob.core.windows.net/canvasui/static/assets/fonts/griffith-serif-display.woff2") format("woff2");
}
@font-face {
  font-family: "Griffith Serif Text";
  font-weight: 275 900;
  font-style: italic;
  src: url("https://canvasuidevsa.blob.core.windows.net/canvasui/static/assets/fonts/griffith-serif-text-italic.woff2") format("woff2");
}

body {
  font-family: "Griffith Sans Text", sans-serif;
}

:root {
  --primary: var(--red-medium);
  --feature: var(--red-medium);
  --color-feature: var(--red-medium);
  --secondary: var(--black-medium);
  --tertiary: var(--white-medium);
  --black-medium: hsla(0, 0%, 0%, 1.0);
  --black-60: hsla(0, 0%, 40%, 1.0);
  --grey-medium: hsla(240, 8%, 33%, 1.0);
  --white-medium: hsla(0, 0%, 100%, 1.0);
  --red-medium: hsla(355, 79%, 51%, 1.0);
  --barbie: hsla(330, 100%, 50%, 1.0);

  --catalog-red: #E51F30;
  --catalog-dark-red: rgb(156, 21, 33);
  --off-white: #F4F3EF;
  --primary-black: #000;

} 

/*HEADER*/

  #header-menu {
    color: #000;
  }


  #header-menu a,
  #header-menu a:link,
  #header-menu a:visited,
  #header-menu a:hover,
  #header-menu a:active {
    color: #000 !important;
  }


  
  
  /*HOME PAGE*/
  
  /*Modify the home page feature area background*/ 
  #home-page .feature-region {
    background: #fff;
  }

  #home-page #feature .feature_gradient {
    background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,1) 100%);
  }
  
  /*Modify the layout for the contents of the feature area background*/
  #home-page #feature .feature_wrapper {
    color: #fff;
  }
  
  /* Modify the search box background color*/
  #search-form.callout-region {
    background-color: var(--catalog-red);
  }
  
  /*Modify the layout of the search box label*/ 
  .search-form .search-label {
    color: var(--catalog-red);
  }


  
  /* Modify the layout of the search box submit icon*/
  .search-form .search-submit {
  color: var(--catalog-red);
  }

  .ProductIcon__LargeCircle--program, .ProductIcon__LargeCircle--course {
    background-color: var(--catalog-red);
  }


  .product-tile .product-footer {
    color: var(--catalog-red);
  }

  .product-results .product-tile:hover {
    box-shadow: inset 0px -5px 0px var(--catalog-dark-red);
  }


  .product-tile .product-footer .learn-more:before {
    background-color: rgba(var(--catalog-red), 0.25);
  }


  .product-tile .jqFlag {
    border-top-color: var(--catalog-red) !important;
  }

  .product-tile .product-flag-free {
    background-color: var(--catalog-red)
  }
  

  

  



  /*LISTING PAGE*/
  

  /*Format the listing page feature area background*/
  #product-page #feature {
      background: #fff;
  }

  #product-page .jqFlag {
    border-top-color: var(--catalog-red) !important;
  }

  #product-page .product-flag-free {
    background-color: var(--catalog-red)
  }

  #product-page #main :is(a, a:hover, a:focus, a:visited) {
    color: var(--catalog-red);
  }

  #product-page #main :is(a:hover) {
    color: var(--catalog-dark-red);
  }
  
  /*Format the background inside the feature area*/
  .product-bg {
    font-family: "Griffith Sans Text", sans-serif;
    background-color: #fff;
  }
  
  /*Format the full course or program description area*/
  #product-page #main,
  #home-page #main {
    background-color: var(--off-white);
    color: var(--primary-black);
    /* padding-top: 20px;*/
  }

  
  /* Modify the listing page footer background*/
  .callout-region {
    background-color: #eee;
  }
  
  /*Format the listing page footer text layout*/
  #product-page footer .h2 {
    color: #0C1147;
  }
  
  #product-page .Product__AssociatedProductsListSpan :is(a, a:hover, a:focus, a:visited) {
    color: var(--catalog-red);
  }

  #product-page .Product__AssociatedProductsListSpan :is(a:hover) {
    color: var(--catalog-dark-red);
  }





  /*STUDENT DASHBOARD PAGE*/

  .DashboardProduct__Course .DashboardProduct__CourseButtonWrapper a {
    text-decoration-color: #fff;
    font-family: "Griffith Sans Text", sans-serif;
  }

  .DashboardProduct__Course .DashboardProduct__CourseButtonWrapper a  span {
    color: #fff;
    background-color: var(--catalog-red);
    border-color: var(--catalog-red);
    font-family: "Griffith Sans Text", sans-serif;
  }
  .DashboardProduct__Course .DashboardProduct__CourseButtonWrapper a:hover  span {
    background-color: var(--catalog-dark-red);
    border-color: var(--catalog-dark-red);
  }
  .DashboardProduct__Course .DashboardProduct__CourseButtonWrapper a  :is(span){
    color: #fff;
    background-color: var(--catalog-red);
    border-color: var(--catalog-red);
    text-decoration-color: #fff;
    font-family: "Griffith Sans Text", sans-serif;
  }

  .DashboardProduct__Course .DashboardProduct__CourseButtonWrapper a:hover :is(span) {
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
  }

  .DashboardProduct__Course .DashboardProduct__CourseButtonWrapper a:hover span[class$="baseButton__content"] {
    background-color: var(--catalog-dark-red);
    border-color: var(--catalog-dark-red);
  }

  .DashboardProduct__AccountLogo {
    display: none;
  }

  #dashboard-in-progress-tab-panel .Icon__CircleWrap--info,
  #dashboard-not-completed-tab-panel .Icon__CircleWrap--info,
  #dashboard-completed-tab-panel .Icon__CircleWrap--info {
    background-color: var(--catalog-red);
  }
  
  #dashboard-in-progress-tab-panel :is(a, a:hover, a:focus, a:visited) ,
  #dashboard-not-completed-tab-panel :is(a, a:hover, a:focus, a:visited) ,
  #dashboard-completed-tab-panel :is(a, a:hover, a:focus, a:visited) {
    color: var(--catalog-red);
  }
  


  /*PURCHASES AND ENROLLMENTS PAGE*/



  /* FIREFOX FIXES FOR HAS  */
  button[data-testid*="download-csv-btn"] { 
    color: #fff;
    background-color: var(--catalog-red);
    border-color: var(--catalog-red);
    text-decoration-color: #fff;
    font-family: "Griffith Sans Text", sans-serif;
    border-radius: 0 !important;
  }

  button[data-testid*="download-csv-btn"] span { 
    color: #fff;
    background-color: #00000000;
    border-color: var(--catalog-red);
    text-decoration-color: #fff;
    font-family: "Griffith Sans Text", sans-serif;
    border-radius: 0;
  }

  button[data-testid*="download-csv-btn"]:hover,
  [class*="-view-tabs__container"] :is(#tab-self_enrollments, #self_enrollments, #tab-bulk_enrollments, #bulk_enrollments)  [class$="-view--inlineBlock-baseButton"]:hover { 
    background-color: var(--catalog-dark-red);
    border-color: var(--catalog-dark-red);
    border-radius: 0;
  }

  button[data-testid*="download-csv-btn"]:hover span,
  button[data-testid*="download-csv-btn"]:hover [class$="-baseButton__content"],
  button[data-testid*="download-csv-btn"] span:hover { 
    background-color: #00000000;
    border-color: #00000000;
    border-radius: 0;
  }

  #content [class*="-view-tabs__container"] :is(#tab-self_enrollments, #self_enrollments, #tab-bulk_enrollments, #bulk_enrollments)
  h1 {
    font-family: "Griffith Sans Text", sans-serif;
  }

  #content [class*="-view-tabs__container"] :is(#tab-self_enrollments, #self_enrollments, #tab-bulk_enrollments, #bulk_enrollments)
  button {
    color: #fff;
    background-color: var(--catalog-red);
    border-color: var(--catalog-red);
    text-decoration-color: #fff;
    font-family: "Griffith Sans Text", sans-serif;
    border-radius: 0;
  }

  #content [class*="-view-tabs__container"] :is(#tab-self_enrollments, #self_enrollments, #tab-bulk_enrollments, #bulk_enrollments)
  button :is(span, a) {
    color: #fff;
    background-color: var(--catalog-red);
    border-color: var(--catalog-red);
    text-decoration-color: #fff;
    font-family: "Griffith Sans Text", sans-serif;
  }

  #content [class*="-view-tabs__container"] :is(#tab-self_enrollments, #self_enrollments, #tab-bulk_enrollments, #bulk_enrollments)
  button:hover :is(span) {
    background-color: var(--catalog-dark-red);
    border-color: var(--catalog-dark-red);
    text-decoration: underline;
  }

  #content [class*="-view-tabs__container"] :is(#tab-self_enrollments, #self_enrollments, #tab-bulk_enrollments, #bulk_enrollments)
  button span[class$="baseButton__content"] * {
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
  }

  #content [class*="-view-tabs__container"] :is(#tab-self_enrollments, #self_enrollments, #tab-bulk_enrollments, #bulk_enrollments)
  div[data-testid="error-page"] :is(span, a, h3) {
    font-family: "Griffith Sans Text", sans-serif;
  }

  #content [class*="-view-tabs__container"] 
  div[role="tab"]:after {
    background-color: var(--catalog-red);
  }


  /* END FIREFOX FIXES FOR HAS  */   



  
  #content:has(#tab-self_enrollments, #tab-bulk_enrollments)
  h1 {
    font-family: "Griffith Sans Text", sans-serif;
  }

  #content:has(#tab-self_enrollments, #tab-bulk_enrollments)
  button {
    color: #fff;
    background-color: var(--catalog-red);
    border-color: var(--catalog-red);
    text-decoration-color: #fff;
    font-family: "Griffith Sans Text", sans-serif;
    border-radius: 0;
  }

  #content:has(#tab-self_enrollments, #tab-bulk_enrollments) 
  button :is(span, a) {
    color: #fff;
    background-color: var(--catalog-red);
    border-color: var(--catalog-red);
    text-decoration-color: #fff;
    font-family: "Griffith Sans Text", sans-serif;
  }

  #content:has(#tab-self_enrollments, #tab-bulk_enrollments) 
  button:hover :is(span) {
    background-color: var(--catalog-dark-red);
    border-color: var(--catalog-dark-red);
    text-decoration: underline;
  }

  #content:has(#tab-self_enrollments, #tab-bulk_enrollments)
  button span[class$="baseButton__content"] * {
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
  }

  #content:has(#tab-self_enrollments, #tab-bulk_enrollments) 
  div[role="tab"]:after {
    background-color: var(--catalog-red);
  }

  /*LOGGED IN ENROL PAGE*/

  #registration .RegistrationHeader__CourseList span, 
  #registration .RegistrationHeader__DateInfo span {
    font-family: "Griffith Sans Text", sans-serif;
  }

  #registration .RegistrationHeader__CourseList li div{
    font-family: "Griffith Sans Text", sans-serif;
  }

  #registration .Registration__SwitchAccountContainer {
    border-radius: 0;
  }

  #registration .Registration__SwitchAccountContainer :is(a, a:hover, a:focus, a:visited) {
    color: var(--catalog-red);
  }

  #registration .Registration__SwitchAccountContainer :is(a:hover) {
    color: var(--catalog-dark-red);
  }

  #registration .Registration__SubmitButton [class*="-baseButton__content"] {
    color: #fff;
    background-color: var(--catalog-red);
    border-color: var(--catalog-red);
    text-decoration-color: #fff;
    font-family: "Griffith Sans Text", sans-serif;
    border-radius: 0;
  }

  #registration .Registration__SubmitButton:hover [class*="-baseButton__content"]   {
    background-color: var(--catalog-dark-red);
    border-color: var(--catalog-dark-red);
    font-family: "Griffith Sans Text", sans-serif;
  }


  /*LOGGED OUT ENROL PAGE*/


  #registration .Registration__SignInButton a {
    color: #fff;
    text-decoration-color: #fff;
    font-family: "Griffith Sans Text", sans-serif;
    border-radius: 0;
  }

  #registration .Registration__SignInButton a span[class$="baseButton__content"] {
    color: #fff;
    background-color: var(--catalog-red);
    border-color: var(--catalog-red);
    text-decoration-color: #fff;
    border-radius: 0;
  }

  #registration .Registration__SignInButton a:hover :is(span) {
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
  }

  #registration .Registration__SignInButton a:hover span[class$="baseButton__content"] {
    background-color: var(--catalog-dark-red);
    border-color: var(--catalog-dark-red);
  }

  /*FOOTER*/
  
  /*Format the footer for all catalog pages*/
  #app-footer {
    background-color: #ffffff;
  }
  /*
  
  /*Format the second row of copyright information*/
  .small {
    color: #8e99a0;
  }
    


/* OVERIDES //////////////////////////////// */

.btn-link {
  color: var(--primary-black);
}



.Dropdown__Toggle--header:hover, .Dropdown__Toggle--cog:hover, .Dropdown__Toggle--header:focus, .Dropdown__Toggle--cog:focus {
  color: var(--primary-black);
}

.btn-info {
  color: white;
  background-color: var(--catalog-red);
  border: none;
}

.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
  background: var(--catalog-dark-red);
}


  /*MEDIA FORMATTING rules for responsive devices. This coding is optional but helpful for tablets and mobile devices.*/
  
  /*Media for header*/
  
  @media (max-width: 768px) {
    #app-header .header-nav {
      background: #555;
    }
  }