{{#markdown}}
```scss
$include-html-joyride-classes: $include-html-classes;
/* Controlling default Joyride styles */
$joyride-tip-bg: rgb(0,0,0);
$joyride-tip-default-width: 300px;
$joyride-tip-padding: rem-calc(18 20 24);
$joyride-tip-border: solid 1px #555;
$joyride-tip-radius: 4px;
$joyride-tip-position-offset: 22px;
/* Here, we're setting the tip font styles */
$joyride-tip-font-color: #fff;
$joyride-tip-font-size: rem-calc(14);
$joyride-tip-header-weight: bold;
/* This changes the nub size */
$joyride-tip-nub-size: 14px;
/* This adjusts the styles for the timer when its enabled */
$joyride-tip-timer-width: 50px;
$joyride-tip-timer-height: 3px;
$joyride-tip-timer-color: #666;
/* This changes up the styles for the close button */
$joyride-tip-close-color: #777;
$joyride-tip-close-size: 30px;
$joyride-tip-close-weight: normal;
/* When Joyride is filling the screen, we use this style for the bg */
$joyride-screenfill: rgba(0,0,0,0.5);
```
{{/markdown}}