Compulsory CSS

/*========================================================
  Rise 360 compulsory CSS
  For use in all Digital Learning and Development Rise 360 courses.
  Version 1.0
  Last updated 04/11/2024
==========================================================*/

/*Global variables – edit these variables to suit your course design.
==========================================================*/

:root {
  --custom-theme-colour-button-hover-opacity: .9; /*This sets the opacity of buttons and checkboxes that use the theme colour, such as continue buttons.Lower value equals ligher hover colour.*/
  --custom-carousel-prev-next-hover-colour: #000; /*This sets the hover state colour of the previous and next buttons on the quote carousel and image carousel blocks.*/
}

/*Global CSS edits
==========================================================*/

/*Links > Hover state: Add a background colour and border.*/
.brand--linkColor a:hover {
  outline: solid 3px rgba(0, 0, 0, .1); /*Using transparancy prevents surrounding text, such as full stops, from vanishing.*/
  background-color: rgba(0, 0, 0, .1) !important;
}

/*Cover page
==========================================================*/

/*Cover page > Start module button: Remove all caps, increase font size, decrease font weight, adjust padding.*/
.cover__header-content-action-link-text{
  text-transform: none;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .1rem;
}
.cover__header-content-action-link {
  padding: 0.8rem 2.9rem !important;
}

/*Cover page > body text: Increase font size and change colour.*/ 
.cover__details-content-description.brand--linkColor {
  color: #000;
  font-size: 1.7rem;
}

/*Cover page > Section titles: Increase font size, remove all caps, darken border line.*/
.overview-list__section-title {
  border-bottom: .1rem solid #717376; /*Colour of the lesson icons.*/
  font-size: 1.4rem;
  text-transform: none;
}

/*Cover page > lesson list: Increase font size.*/
.overview-list-item__title {
  font-size: 1.4rem;
}

/*Navigation menu
==========================================================*/

/*Navigation menu > % progress indicator: Remove all caps, increase font size.*/
.nav-sidebar-header__progress-text {
  text-transform: none !important;
  font-size: 1.4rem !important;
}

/*Navigation menu > Section titles: Remove all caps, increase font size.*/
.nav-sidebar__outline-section-toggle-text {
  text-transform: none;
  font-size: 1.4rem;
}
.nav-sidebar__outline-section-toggle:after {
  border-bottom: 1px solid #717376 !important;
}

/*Navigation menu > Lesson titles: Increase font size.*/
.nav-sidebar__outline-section-item__link {
  font-size: 1.4rem !important;
}

/*Lesson header
==========================================================*/

/*Lesson header > Lesson counter: Increase font size, remove italics.*/
.lesson-header__counter {
  font-size: 1.4rem;
  font-style: normal;
  margin-bottom: 1.3rem !important;
}

/*Text blocks
==========================================================*/

/*Paragraph
----------------------------------------------------------*/

/*Paragraph with heading
----------------------------------------------------------*/

/*Paragraph with subheading
----------------------------------------------------------*/

/*Heading
----------------------------------------------------------*/

/*Subheading
----------------------------------------------------------*/

/*Columns
----------------------------------------------------------*/

/*Table
----------------------------------------------------------*/


/*Statement blocks
==========================================================*/

/*Statement A
----------------------------------------------------------*/

/*Statement B
----------------------------------------------------------*/

/*Statement C
----------------------------------------------------------*/

/*Statement D
----------------------------------------------------------*/

/*Note
----------------------------------------------------------*/


/*Quote blocks
==========================================================*/

/*Quote A
----------------------------------------------------------*/

/*Quote B
----------------------------------------------------------*/

/*Quote C
----------------------------------------------------------*/

/*Quote D
----------------------------------------------------------*/

/*Quote on image
----------------------------------------------------------*/

/*Quote carousel
----------------------------------------------------------*/

/*Quote carousel > Progression circles and arrows: Change arrow hover colour, change progression cirle hover opacity and scale.*/
.block-quote--carousel .carousel-controls-next,
.block-quote--carousel .carousel-controls-prev {
  transition: color 0.3s;
}
.block-quote--carousel .carousel-controls-next:hover,
.block-quote--carousel .carousel-controls-prev:hover {
  color: var(--custom-carousel-prev-next-hover-colour); 
}
.carousel-controls-item-btn {
  transition: all 0.15s ease-in-out;
}
.carousel-controls-item-btn:hover {
  opacity: var(--custom-theme-colour-button-hover-opacity);
  color: var(--custom-theme-hover-bg, #202d60);
}


/*List blocks
==========================================================*/

/*Numbered list
----------------------------------------------------------*/

/*Checkbox list
----------------------------------------------------------*/

/*Checkbox list > Checkboxes: Move the checkboxes to the front and change the hover colour.*/
.block-list__checkbox {
  z-index: 2;
  transition: all .15s ease-in-out;
}
.block-list__checkbox:hover {
  background-color: var(--color-theme-decorative);
  opacity: var(--custom-theme-colour-button-hover-opacity);
}

/*Bulleted list
----------------------------------------------------------*/


/*Image blocks
==========================================================*/

/*Image blocks > Caption: Increase font size. This can be changed by manually adjusting the font size in Rise.*/
.block-image__caption, .block-gallery__caption {
  font-size: 1.4rem !important;
}

/*Image centered
----------------------------------------------------------*/

/*Image full width
----------------------------------------------------------*/

/*Image & text
----------------------------------------------------------*/

/*Text on image
----------------------------------------------------------*/


/*Gallery blocks
==========================================================*/

/*Carousel
----------------------------------------------------------*/

/*Carousel > Progression circles and arrows: Change arrow hover colour, change progression cirle hover opacity and scale.*/
.block-gallery-carousel__container .carousel-controls-next,
.block-gallery-carousel__container .carousel-controls-prev {
  transition: color 0.3s;
}
.block-gallery-carousel__container .carousel-controls-next:hover,
.block-gallery-carousel__container .carousel-controls-prev:hover {
  color: var(--custom-carousel-prev-next-hover-colour);
}
/*Note that the hover state of the progression circles is modified in the Quote carousel section.*/

/*Two column grid
----------------------------------------------------------*/

/*Three column grid
----------------------------------------------------------*/

/*Four column grid
----------------------------------------------------------*/


/*Multimedia blocks
==========================================================*/

/*Audio
----------------------------------------------------------*/

/*Audio > Play/puase button and scrub slider: Increase size and gap between. Change hover scale.*/
.audio-player__play {
  margin-right: 1.6rem;
}
.audio-player__play .svg-inline--fa {
  height: 1.7rem;
  transition: all 0.15s ease-in-out;
}
.audio-player__play .svg-inline--fa:hover {
  transform: scale(1.2);
}
.audio-player__tracker-handle{
  height: 100%;
}
.audio-player__tracker-handle-icon>svg {
  height: 1.5rem;
  width: 1.5rem;
}
.audio-player__tracker-handle-icon{
  transition: all 0.15s ease-in-out;
}
.audio-player__tracker-handle-icon:hover {
  transform: scale(1.2);
}
.audio-player__tracker-handle-icon:active {
  transform: scale(1.2);
}

/*Audio > track line: Make line thicker.*/
.audio-player__tracker-bar {
  border-top: .16rem solid var(--color-track);
}
.audio-player__tracker:after {
  border-top: .16rem solid var(--color-runner);
}

/*Audio > Timer: Increase font size.*/
.audio-player__timer {
  font-size: 1.2rem;
}

/*Audio > Caption: Increase font size. This can be changed by manually adjusting the font size in Rise.*/
.block-audio__caption {
  font-size: 1.4rem;
}

/*Video
----------------------------------------------------------*/

/*Video > Caption: Change font size to 14px.*/
.block-video__caption {
  font-size: 1.4rem;
}

/*Embed
----------------------------------------------------------*/

/*Attachement
----------------------------------------------------------*/

/*Attachement: Add hover colour.*/
.block-attachment:hover {
  background: #ebebeb;
}

/*Code snippet
----------------------------------------------------------*/

/*Code snippet > Caption: Increase font size.*/
.block-text__code-caption p {
  font-size: 1.4rem;
}

/*Interactive blocks
==========================================================*/

/*Accordion
----------------------------------------------------------*/

/*Tabs
----------------------------------------------------------*/

/*Tabs > Titles: Remove all caps, increase font size and reduce letter spacing.*/
.blocks-tabs__header-item{
  text-transform: none;
  font-size: 1.5rem;
  letter-spacing: .04rem;
}

/*Labeled graphic
----------------------------------------------------------*/

/*Labeled graphic > pop-up text: Set font size. This can be changed by manually adjusting the font size in Rise.*/
.bubble__content {
  font-size: 1.6rem;
}

/*Process
----------------------------------------------------------*/

/*Process > Navigation arrows: Change hover state opacity.*/
.process-arrow {
  transition: opacity .3s !important;
}
.process-arrow:hover {
  opacity: .8;
}

/*Process > Start button: Change focus state outline.*/
.process-card__start:focus, .process-card-mobile__start:focus {
  outline-offset: 0.4rem;
}

/*Process > Start button: Change hover state opacity.*/
.process-card__start:hover {
  opacity: var(--custom-theme-colour-button-hover-opacity);
}

/*Process > Start button: Remove all caps, increase font size and letter spacing.*/
.process-card__start-text, .process-card-mobile__start-text  {
  text-transform: none;
  font-size: 1.5rem;
  letter-spacing: .1rem;
}

.block-process-card__start-btn {
  text-transform: none;
  font-size: 1.5rem;
  letter-spacing: .1rem;}


.process-card__start-icon {
  height: 1.3rem !important;
  width: 1.3rem !important;
}

/*Process > Start again: Remove all caps, increase font size and letter spacing.*/
.process-card__restart, .process-card-mobile__restart {
  text-transform: none;
  font-size: 1.5rem;
  letter-spacing: .1rem;
  font-weight: 700;
}
  
/*Process > Start again: Add hover state.*/
.process-card__restart {
  transition: background-color 0.3s;
  border-radius: 5px;
}
.process-card__restart:hover {
  background-color: #ebebeb;
}

/*Scenario
----------------------------------------------------------*/

/*Scenario block > Continue buttons, Start over buttons: Remove all caps, increase font size and letter spacing.*/
.scenario-block__text__continue {
  line-height: 2rem;
}
.scenario-block__text__continue, .scenario-block__dialogue__button, .scenario-block__text__end span {
  text-transform: none;
  font-size: 1.5rem;
  letter-spacing: .1rem;
}

/*Scenario block > Response: Increase font size.*/
.scenario-block__response .fr-view {
    font-size: 1.6rem;
}

/*Scenario block > Response: Change hover colour.*/
.scenario-block__response__inner:hover {
  background-color: #ebebeb;
}
  
/*Scenario > Continue buttons: Change hover opacity.*/
.scenario-block__text__continue:hover {
  opacity: var(--custom-theme-colour-button-hover-opacity);
}
  
/*Scenario > Continue buttons: Change focus state outline.*/
.scenario-block__text__continue:focus {
  outline-offset: 0.4rem;
}
  
/*Scenario > Response buttons: Change hover state.*/
.scenario-block__dialogue__button {
  transition: all .3s;
}
.scenario-block__dialogue__button:hover {
  background-color: #ebebeb;
  transform: translateX(1rem);
}
  
/*Scenario > Start over: Change hover state.*/
.scenario-block__text__end {
  transition: all .3s;
  color: var(--color-theme-decorative);
  padding: 1rem;
  margin-top: 1rem;
}
.scenario-block__text__end:hover {
  background-color: #ebebeb;
  border-radius: 5px;
}


/*Sorting activity
----------------------------------------------------------*/

/*Sorting activity > Restart button: Remove all caps, change font size, colour and letter spacing.*/
.block-sorting-activity .restart-button__content {
  color: var(--color-theme-decorative);
  border-radius: 5px;
  text-transform: none;
  font-size: 1.5rem;
  letter-spacing: .1rem;
  font-weight: 700;
}

/*Sorting activity > Restart button: Add a hover state.*/
.block-sorting-activity .deck__title {
  margin-bottom: 1rem;  
  padding-bottom: .6rem;
  border-bottom: .1rem solid rgba(0, 0, 0, .2);
}
.block-sorting-activity .restart-button {
  margin-top: 0rem;
  border: none;
  padding: 1rem;
  border-radius: 5px;
  min-height: 7.45rem;
}
.block-sorting-activity .restart-button {
  transition: background-color 0.3s;
}
.block-sorting-activity .restart-button:hover {
  background-color: #ebebeb;
}


/*Timeline
----------------------------------------------------------*/

/*Flashcard grid
----------------------------------------------------------*/

/*Flashbard stack
----------------------------------------------------------*/

/*Flashcard stack > Previous and Next button: Change hover state.*/
.block-flashcards-slider__arrow--next, .block-flashcards-slider__arrow--prev {
  transition: opacity .3s;
}
.block-flashcards-slider__arrow--next:hover, .block-flashcards-slider__arrow--prev:hover {
  opacity: var(--custom-theme-colour-button-hover-opacity);
}

/*Flashcard stack > Slide counter: Remove italics.*/
.block-flashcards-slider__progress-text {
  font-style: normal;
}

/*Flashcard stack > Progress line: Increase thickness.*/
.block-flashcards-slider__progress-line {
  border-bottom: max(.2rem, 2px) solid var(--color-progress-track);
  position: relative;
}
.block-flashcards-slider__progress-runner {
  border-bottom: max(.2rem, 2px) solid var(--color-theme-decorative);
}

/*Button
----------------------------------------------------------*/

/*Button and Button stack > Button: Remove all caps, increase font size and line height.*/
.blocks-button__button {
  transition: all .3s;
  text-transform: none;
  font-size: 1.5rem;
  line-height: 3.9rem;
}

/*Button and Button stack > Button: Change hover state.*/
.blocks-button__button:hover {
  opacity: var(--custom-theme-colour-button-hover-opacity);
}

/*Button and Button stack > Button: Offset the focus state outline.*/
.blocks-button__button:focus {
  outline-offset: .4rem;
}

/*Button stack
----------------------------------------------------------*/

/*Storyline
----------------------------------------------------------*/


/*Knowledge check blocks AND Quiz lesson
==========================================================*/

/*Knowledge check/Quiz > Options: remove extra space between question options and submit button/feedback box.*/
.block-knowledge .quiz-card__interactive {
  margin-bottom: 0rem;
}

/*Knowledge check/Quiz > Submit/Next buttons: Remove all caps and increase font size.*/
.quiz-card__button{
  transition: opacity .3s;
  text-transform: none;
  font-size: 1.5rem;
}
  
/*Knowledge check/Quiz > Submit/Next buttons: Change hover state.*/
.quiz-card__button:hover {
  opacity: var(--custom-theme-colour-button-hover-opacity);
}
  
/*Knowledge check/Quiz > Submit/Next buttons: Offset the focus state outline.*/
.quiz-card__button:focus {
  outline-offset: 0.4rem;
}

/*Knowledge check/Quiz > 'Correct/Incorrect' label: Increase font size.*/
.quiz-card__feedback-label {
  font-size: 1.4rem;
}

/*Knowledge check/Quiz > Feedback body text: Increase font size, align left and ensure color is black. */
.quiz-card__feedback-text {
  font-size: 1.6rem;
  text-align: left;
  color: #000;
}

/*Knowledge check > Try again button: Remove all caps, increase font size and change to theme colour. Note that the Rise 360 label text must also be lowercase.*/
.block-knowledge__retake-text {
  text-transform: none;
  font-size: 1.4rem;
}
.block-knowledge__retake {
  color: var(--color-theme-decorative)
}

/*Knowledge check > Try again button: Change hover state.*/
.block-knowledge__retake-content {
  transition: background-color 0.3s;
  border-radius: 5px;
  padding: 1rem;
  margin: -1rem /*Negative margin pushes the margin out into the padding area to create a larger hover state without having to change the padding for the normal state.*/
}
.block-knowledge__retake-content:hover {
  background-color: #ebebeb;
}

/*Multiple choice
----------------------------------------------------------*/

/*Multiple response
----------------------------------------------------------*/

/*Fill in the blank
----------------------------------------------------------*/

/*Fill in the blank > 'Acceptable responses' label: Increase font size and remove italics.*/
.quiz-fill__options {
  font-size: 1.4rem;
  font-style:normal;
}

/*Matching
----------------------------------------------------------*/

/*Matching: Increase font size to 16px.*/
.quiz-match__item-content {
  font-size: 1.5rem;
}

/*Quiz
----------------------------------------------------------*/

/*Quiz > 'Lesson X of Y' label: Increase font size, letter spacing and remove italics.*/
.quiz-header__counter {
  font-size: 1.4rem;
  font-style: normal;
  letter-spacing: .05rem;
}

/*Quiz > 'Start assessment' label: Remove all caps, increase font size, move icon to the left.*/
.quiz-header__start-quiz {
  transition: all .3s;
  text-transform: none;
  font-size: 1.5rem;
  border-radius: 5px;
  padding: 1rem;
  margin: -1rem;
}
.quiz-header__start-quiz [class*=icon-] {
  margin-left: .6rem;
}

/*Quiz > 'Start assessment' label: Add hover state.*/
.quiz-header__start-quiz:hover {
  background-color: #ebebeb;
}

/*Quiz > 'Question' label: Remove italics and increase font size.*/
.quiz-card__step-label {
  font-size: 1.4rem;
  font-style: normal;
  letter-spacing: .05rem;
  font-weight: 400;
}
@media (max-width: 47.9375em) {
  .quiz-card__counter {
    font-size: 2.2rem;
  }
}

/*Quiz > Quiz results odemeter: Increase font size on all elements.*/
.odometer__score-label, .odometer__passlabel, .odometer__passpercent  {
  font-size: 1.4rem;
  text-transform: none;
}

/*Quiz > Quiz results 'Try again' button: Remove all caps, change font colour, size, weight and letter spacing, adjust padding.*/
.quiz-results__footer .restart-button__content {
  transition: background-color 0.3s;
  color: var(--color-theme);
  text-transform: none;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .1rem;
  padding: 1rem;
  margin: -1rem;
  border-radius: 5px;
}

/*Quiz > Quiz results 'Try again' button: Add hover state.*/
.quiz-results__footer .restart-button__content:hover {
  background-color: #ebebeb;
}


/*Draw from question bank
----------------------------------------------------------*/


/*Chart blocks
==========================================================*/

/*Bar chart
----------------------------------------------------------*/

/*Line chart
----------------------------------------------------------*/

/*Pie chart
----------------------------------------------------------*/


/*Divider blocks
==========================================================*/

/*Continue
----------------------------------------------------------*/
  
/*Continue: Change hover state.*/
.continue-btn {
  transition: opacity 0.3s;
}
.continue-btn:hover {
  opacity: var(--custom-theme-colour-button-hover-opacity);
}

/*Continue: Offset the focus state outline.*/
.continue-btn:focus {
  outline-offset: 0.4rem;
}

/*Divider
----------------------------------------------------------*/

/*Numbered divider
----------------------------------------------------------*/

/*Spacer
----------------------------------------------------------*/


/*CSS edits by Firstname Lastname on XX/XX/202X.*/

/*========================================================
  Optional CSS edits – Paste all optional CSS edits below this comment.
==========================================================*/