$tutor-tertiary-light: rgb(0, 193, 222); // light blue

$joyride-color: $tutor-tertiary-light;
// set both medium and large sizes to be 360
$joyride-tooltip-width: (290px, 360px, 360px);
@import '~react-joyride/lib/react-joyride';

.joyride-tooltip__button--secondary {
  float: left;
  &:before {
    display: 'inline';
    margin-right: 0.5rem;
    content: '<';
  }
}

// the default rules lighten the button when it's focused,
// but it's focused by default when paging; essentially causing the standard color to be ignored
.joyride-tooltip__button--primary:focus {
  background-color: $joyride-button-bg-color;
}

$tutor-tertiary-light: rgb(0, 193, 222); // light blue

$joyride-color: $tutor-tertiary-light;


// set both medium and large sizes to be 360
$joyride-tooltip-width: (290px, 360px, 360px);
$joyride-tooltip-color: #232E66;
$joyride-close: (color: $joyride-tooltip-color, size: 12px, top: 10px, right: 10px);

@import '~react-joyride/lib/react-joyride';

.joyride-tooltip__button--secondary {
  float: left;
  &:before {
    display: 'inline';
    margin-right: 0.5rem;
    font-family: FontAwesome;
    content: "\f053"; // chevron-left
  }
}

// the default rules lighten the button when it's focused,
// but it's focused by default when paging; essentially causing the standard color to be ignored
.joyride-tooltip__button--primary:focus {
  background-color: $joyride-button-bg-color;
}

Adjust colors and use font-awesome chevron for back
Adjust colors and use font-awesome chevron for back
