/* Changes the colour of the "Self-paced" */
.product-tile .product-footer .product-dates {
       color: #0c6bc5;
}

/* Changes the colour of the the arrow and the circle next to "Self-paced" */
.product-tile .product-footer .learn-more::before {
       color: #0c6bc5;
}

/* Changes the colour of the book icon */
.ProductIcon__Wrapper--gallery-index .ProductIcon__LargeCircle--course  {
        background-color: #0c6bc5;
}

/* Changes the colour and the height of hover effect */
#listings .course-tile.product-tile:hover {
       box-shadow: inset 0px -5px 0px #0c6bc5;
}

/* Changes the colour of the name when logged in the header (home page) */
.home-selector #user-nav .Dropdown__Toggle--header .Dropdown__ToggleTextWrapper {
      color: #0c6bc5;
}


/* Changes the colour of the "login" in the header */
#user-nav > a {
      color: #231f20;
}

/* Changes the colour of the "Categories" and the "Refine" text */
.search-form .search-refine-button__text {
      color: #231f20;
}

/* Changes the colour of the two arrows next to the "Categories" and "Refine" text */
.search-form .search-refine-button__icon {
      color: #231f20;
}

/* Changes the colour of the book icon on the product page */
.ProductIcon__Wrapper--gallery-show .ProductIcon__LargeCircle--course {
      background-color: #0c6bc5;
}

/* Changes the colour and opacity of the header block on the home page (start page). For a filled in look, remove the opacity */
.home-selector #app-header {
        background-color: #f5f6f8;

}

/* Changes the colour of the header block on the product page */
.product-selector #app-header  {
         background-color: #f5f6f8;

}

/* This affect the logo on the product page. You might have to play around with the height and margin to make it look good, preferably both on screen size and mobile */
.product-selector .header-branding .logo-customized a img {
      height: 60px;
      margin-top: 0px;
}

/* Changes the colour of the name when logged in the header (product page) */
.product-selector #user-nav .Dropdown__Toggle--header .Dropdown__ToggleTextWrapper {
      color: #0c6bc5;
}

/* This affect the image on the home page, try to rather adapt the image then to make changes here */
#home-page .feature-region img {
    object-fit: cover;
    object-position: center 60%;
    width: 100%;
    height: 450px;

}

/* Changes the colour of the "enrol" button on the product page */
.hero-action .btn  {
       background-color:  #0c6bc5;

}

/* Changes the colour of the "login" in the header (homepage) (yes its similar to the one earlier, found that sometimes it doesnt hit the right thing, therefore we have it in two places)*/
.home-selector #user-nav  > a  {
         color: #231f20;
}

/* This affect the logo on the home page. You might have to play around with the height and margin to make it look good, preferably both on screen size and mobile */
.home-selector .header-branding .logo-customized a img {
      height: 60px;
      margin-top: 0px;
}


/* This affect the colour block under the image, change colour */
#home-page #search-form.callout-region {
     background-color: #f5f6f8;
}

/* This just adjusts the height of the colour block under the image, will probably never need to be touched */
#home-page .feature-region {
    height: unset;
    background-image: none;
}