:root {
    --navigation-closed: url(../icons/navigation-closed.svg);
    --navigation-opened: url(../icons/navigation-opened.svg)
}

.platform-sidenav {
    border-right: 1px solid #ccc;
    margin-right: 1rem;
    padding-right: 0
}

.platform-sidenav__inner {
    height: 100vh
}

.platform-sidenav__inner li {
    list-style: none
}

.platform-sidenav__inner li a {
    font-size: 1.125rem
}

.platform-sidenav__inner nav {
    white-space: normal;
    overflow: auto;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    padding-bottom: 100px;
    padding-top: 2.5rem;
    margin-top: 0;
    margin-left: 0
}

.platform-sidenav__list {
    margin: 0;
    padding-bottom: 1rem;
    list-style-type: none
}

.platform-sidenav__list li {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}

.platform-sidenav__list li a {
    font-weight: 600;
    text-decoration: none
}

.platform-sidenav__collectionItems {
    list-style-type: none;
    margin: 0;
    padding-bottom: 1rem
}

.platform-sidenav__collectionItems li a {
    font-weight: 400
}

.platform-sidenav__collection {
    margin: 0;
    padding: 0;
    list-style: none
}

.platform-sidenav__collection.is-closed {
    background-color: transparent
}

.platform-sidenav__collection.is-closed .platform-sidenav__collectionItems {
    display: none
}

.platform-sidenav__collection.is-closed span {
    padding-left: 0
}

.platform-sidenav__collection.is-closed span::before {
    background-image: var(--navigation-closed);
    height: 1rem;
    width: 1rem;
    background-size: 1.75rem;
    background-repeat: no-repeat;
    background-position: 50%;
    margin-left: -1.5rem;
    margin-right: .5rem;
    position: relative;
    top: .1rem;
    content: ""
}

.platform-sidenav__entity {
    padding: 0;
    margin: 0
}

.platform-sidenav__entity a {
    font-weight: 600
}

.platform-sidenav__entity:hover {
    background-color: rgba(83, 83, 99, .05)
}

.platform-sidenav__collectionLabel {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 0;
    padding: .8125rem 1rem .8125rem 2.5rem;
    display: block;
    text-decoration: none;
    margin-left: 0
}

.platform-sidenav__collectionLabel:visited {
    color: #535363
}

.platform-sidenav__collectionLabel:hover {
    background-color: rgba(83, 83, 99, .05)
}

.platform-sidenav__collectionLabel:focus,
.platform-sidenav__collectionLabel:hover {
    color: #1a1a1a
}

.platform-sidenav__collectionLabel span {
    display: block;
    position: relative;
    color: #1a1a1a
}

.platform-sidenav__collectionLabel span::before {
    offset-inline-start: 0;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: var(--navigation-opened);
    background-size: 1.75rem;
    background-repeat: no-repeat;
    background-position: 50%;
    margin-left: -1.5rem;
    margin-right: .5rem;
    position: relative;
    top: .1rem;
    content: ""
}

.platform-sidenav-depth-3 .platform-sidenav__collectionLabel {
    padding-left: 4rem
}

.platform-sidenav__entityLink {
    padding: .8125rem 1rem .8125rem 1.5rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-weight: 400;
    font-size: 1.125rem
}

.platform-sidenav-depth-2 .is-current .platform-sidenav__entityLink {
    padding-left: 1.5rem
}

.platform-sidenav-depth-3 .is-current .platform-sidenav__entityLink {
    padding-left: 1.5rem
}

.platform-sidenav__collectionLabel:visited,
.platform-sidenav__entityLink:visited {
    color: #06c
}

.platform-sidenav__collectionLabel:focus,
.platform-sidenav__entityLink:focus {
    box-shadow: 0 0 0 4px #009adb inset
}

.platform-sidenav__collectionLabel:active,
.platform-sidenav__entityLink:active {
    outline-width: 0
}

.platform-sidenav__status {
    display: inline-block;
    margin-left: .25rem;
    box-sizing: border-box
}

.platform-sidenav__status-progress {
    background-image: linear-gradient(to right, #fff 0, #fff 50%, #92278f 25%, #92278f 100%);
    border: 2px solid #92278f;
    border-radius: 100%;
    width: 12px;
    height: 12px
}

.platform-sidenav__status-ready {
    background-color: #367a76;
    border-radius: 100%;
    width: 12px;
    height: 12px
}

.platform-sidenav__collectionLabel span::before {
    left: 0
}

.platform-sidenav__entityLink .platform-status {
    margin-right: .25rem
}

.platform-sidenav__collectionLabel+.platform-sidenav__collectionItems .platform-sidenav__collection {
    margin-bottom: 0
}

.platform-sidenav__collectionLabel+.platform-sidenav__collectionItems .platform-sidenav__collectionLabel {
    color: #1a1a1a;
    font-weight: 400
}

.platform-sidenav__collectionLabel+.platform-sidenav__collectionItems .platform-sidenav__collectionLabel:focus,
.platform-sidenav__collectionLabel+.platform-sidenav__collectionItems .platform-sidenav__collectionLabel:hover {
    color: #1a1a1a
}

.platform-sidenav__entity:hover {
    background-color: rgba(83, 83, 99, .05)
}

.is-current {
    border-left: .25rem solid #1a1a1a;
    background-color: rgba(83, 83, 99, .075)
}

.is-current .platform-sidenav__entityLink {
    padding-left: 2.125rem
}

.hide-from-platform-sidenav {
    display: none
}

.sidenav-heading {
    font-family: "Open Sans"
}

.sidenav-heading--h2 {
    font-size: 1.188rem;
    font-weight: 700
}

.sidenav-heading--h3 {
    font-size: 1.125rem;
    font-weight: 600;
    padding-top: 1rem;
    padding-left: 1.5rem
}

.platform-sidenav__collectionItems .platform-sidenav__collection:first-child .sidenav-heading--h3 {
    padding-top: 0
}

.platform-browser {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: static;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%
}

.platform-browser__controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: 100%;
    box-shadow: none
}

.platform-browser__tabs {
    width: 100%;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(83, 83, 99, .25)
}

@media screen and (max-width:40em) {
    .platform-browser__tabs {
        display: block
    }
}

.platform-browser__tabs::-webkit-scrollbar {
    display: none
}

.platform-browser__tabs button {
    display: block;
    cursor: pointer;
    border-bottom: 3px solid #fff;
    padding: .4rem .75rem .5rem
}

.platform-browser__panel {
    flex: 1 1 auto;
    display: none;
    overflow: auto;
    width: 100%;
    background-color: #f6f6f6;
    padding: .75rem;
    height: 300px;
    border: 1px solid rgba(83, 83, 99, .25);
    border-top: none
}

.platform-browser__panel.is-active {
    display: flex
}

.platform-browser__panel.Code {
    background-color: #f6f6f6
}

.platform-browser__panel.Code pre {
    background-color: #f6f6f6;
    padding: 0
}

.platform-browser__panel>.Meta {
    flex-basis: 100%
}

.platform-browser__isEmptyNote {
    font-style: italic;
    color: #535363;
    opacity: .6
}

.platform-browser__notes {
    background-color: #fff
}

.platform-browser__tab {
    display: flex;
    flex: auto;
    white-space: nowrap;
    padding: 0
}

@media screen and (max-width:40em) {
    .platform-browser__tab {
        border-top: 1px solid rgba(83, 83, 99, .25)
    }

    .platform-browser__tab:first-of-type {
        border-top: none
    }
}

.platform-browser__tab a {
    font: normal .875rem/1.71429 "Open Sans", Helvetica, Arial, sans-serif;
    width: 100%;
    padding: 0;
    text-align: center;
    border: none
}

.platform-browser__tab a:active,
.platform-browser__tab a:hover,
.platform-browser__tab a:link,
.platform-browser__tab a:visited {
    color: #535363;
    text-decoration: none
}

.platform-browser__tab a .ontario-icon {
    margin: 0
}

.platform-browser__tab.is-active a {
    border-bottom-color: #28f;
    font-weight: bolder
}

.platform-browser__tab.is-disabled a {
    opacity: .5
}

.platform-browser__tab:nth-of-type(even) {
    border-left: 1px solid rgba(83, 83, 99, .25);
    border-right: 1px solid rgba(83, 83, 99, .25)
}

@media screen and (max-width:40em) {
    .platform-browser__tab:nth-of-type(even) {
        border-left: none;
        border-right: none
    }
}

.platform-browser__tab.is-active button {
    color: #002142;
    border-bottom: 3px solid #001242
}

.platform-browser__tab button {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: .75rem;
    width: 100%;
    color: #06c;
    font-size: 1rem;
    background: #fff;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid #fff
}

.platform-browser__tab button:focus {
    color: #00478f;
    box-shadow: 0 0 0 4px #009adb inset;
    outline: 4px solid transparent;
    transition: all .1s ease-in-out
}

.platform-browser__tab button:hover {
    color: #00478f;
    border-bottom: 3px solid #eaeaeb
}

.Frame-body {
    flex-direction: row;
    overflow-y: auto
}

@media(max-width:31.24em) {
    [dir=ltr] .Frame-body {
        margin-right: -240px
    }
}

.Frame-inner {
    min-width: 0;
    width: 100%
}

.Code {
    width: 100%
}

.Code span,
.Code--lang-CSS pre,
.Code--lang-SCSS pre,
.Code--lang-html pre {
    white-space: break-spaces
}

.Code--lang-CSS pre,
.Code--lang-SCSS pre,
.Code--lang-html pre {
    max-width: 100%
}

.FileBrowser {
    width: 100%
}


.platform-iframe-code-section {
    position: relative;
    margin-bottom: 2rem;
    margin-top: 2rem
}

.platform-iframe-code-section p {
    color: #555;
    font-size: 1.25rem;
    position: absolute;
    top: 0;
    background: #fff;
    padding: 0 .5rem 0 0;
    text-transform: capitalize;
    top: -2.3rem
}

dt.platform-dt {
    font-size: 18px;
    font-weight: 700
}

.platform-preview {
    max-height: 300px
}

@media screen and (max-width:40em) {
    .platform-preview {
        border: 1px solid rgba(83, 83, 99, .25);
        max-height: 100% !important
    }
}

.platform-preview.is-header {
    min-height: 250px !important
}

.platform-preview__wrapper {
    max-width: 100%
}

@media screen and (max-width:40em) {
    .platform-preview__wrapper {
        width: 100%
    }
}

.ontario-margin-top-0-\! {
    margin-top: 0
}

.ontario-padding-top-0-\! {
    padding-top: 0
}

.ontario-image-example-container__header,
.ontario-margin-bottom-0-\! {
    margin-bottom: 0
}

.ontario-padding-bottom-0-\! {
    padding-bottom: 0
}

.ontario-margin-left-0-\! {
    margin-left: 0
}

.ontario-image-example .ontario-row .ontario-columns:first-child,
.ontario-padding-left-0-\! {
    padding-left: 0
}

.ontario-margin-right-0-\! {
    margin-right: 0
}

.ontario-image-example .ontario-row .ontario-columns:last-child,
.ontario-padding-right-0-\! {
    padding-right: 0
}

.ontario-margin-top-4-\! {
    margin-top: .25rem
}

.ontario-padding-top-4-\! {
    padding-top: .25rem
}

.ontario-margin-bottom-4-\! {
    margin-bottom: .25rem
}

.ontario-padding-bottom-4-\! {
    padding-bottom: .25rem
}

.ontario-margin-left-4-\! {
    margin-left: .25rem
}

.ontario-padding-left-4-\! {
    padding-left: .25rem
}

.ontario-margin-right-4-\! {
    margin-right: .25rem
}

.ontario-padding-right-4-\! {
    padding-right: .25rem
}

.ontario-margin-top-8-\! {
    margin-top: .5rem
}

.ontario-padding-top-8-\! {
    padding-top: .5rem
}

.ontario-margin-bottom-8-\! {
    margin-bottom: .5rem
}

.ontario-padding-bottom-8-\! {
    padding-bottom: .5rem
}

.ontario-margin-left-8-\! {
    margin-left: .5rem
}

.ontario-padding-left-8-\! {
    padding-left: .5rem
}

.ontario-margin-right-8-\! {
    margin-right: .5rem
}

.ontario-padding-right-8-\! {
    padding-right: .5rem
}

.ontario-margin-top-12-\! {
    margin-top: .75rem
}

.ontario-padding-top-12-\! {
    padding-top: .75rem
}

.ontario-margin-bottom-12-\! {
    margin-bottom: .75rem
}

.ontario-padding-bottom-12-\! {
    padding-bottom: .75rem
}

.ontario-margin-left-12-\! {
    margin-left: .75rem
}

.ontario-padding-left-12-\! {
    padding-left: .75rem
}

.ontario-margin-right-12-\! {
    margin-right: .75rem
}

.ontario-padding-right-12-\! {
    padding-right: .75rem
}

.ontario-margin-top-16-\! {
    margin-top: 1rem
}

.ontario-padding-top-16-\! {
    padding-top: 1rem
}

.ontario-margin-bottom-16-\! {
    margin-bottom: 1rem
}

.ontario-image-example-container__header,
.ontario-padding-bottom-16-\! {
    padding-bottom: 1rem
}

.ontario-margin-left-16-\! {
    margin-left: 1rem
}

.ontario-padding-left-16-\! {
    padding-left: 1rem
}

.ontario-margin-right-16-\! {
    margin-right: 1rem
}

.ontario-padding-right-16-\! {
    padding-right: 1rem
}

.ontario-margin-top-24-\! {
    margin-top: 1.5rem
}

.ontario-image-example-container__header,
.ontario-padding-top-24-\! {
    padding-top: 1.5rem
}

.ontario-margin-bottom-24-\! {
    margin-bottom: 1.5rem
}

.ontario-padding-bottom-24-\! {
    padding-bottom: 1.5rem
}

.ontario-margin-left-24-\! {
    margin-left: 1.5rem
}

.ontario-padding-left-24-\! {
    padding-left: 1.5rem
}

.ontario-margin-right-24-\! {
    margin-right: 1.5rem
}

.ontario-padding-right-24-\! {
    padding-right: 1.5rem
}

.ontario-margin-top-32-\! {
    margin-top: 2rem
}

.ontario-padding-top-32-\! {
    padding-top: 2rem
}

.ontario-margin-bottom-32-\! {
    margin-bottom: 2rem
}

.ontario-padding-bottom-32-\! {
    padding-bottom: 2rem
}

.ontario-margin-left-32-\! {
    margin-left: 2rem
}

.ontario-padding-left-32-\! {
    padding-left: 2rem
}

.ontario-margin-right-32-\! {
    margin-right: 2rem
}

.ontario-padding-right-32-\! {
    padding-right: 2rem
}

.ontario-margin-top-40-\! {
    margin-top: 2.5rem
}

.ontario-padding-top-40-\! {
    padding-top: 2.5rem
}

.ontario-image-example-container__margin,
.ontario-margin-bottom-40-\! {
    margin-bottom: 2.5rem
}

.ontario-padding-bottom-40-\! {
    padding-bottom: 2.5rem
}

.ontario-margin-left-40-\! {
    margin-left: 2.5rem
}

.ontario-padding-left-40-\! {
    padding-left: 2.5rem
}

.ontario-margin-right-40-\! {
    margin-right: 2.5rem
}

.ontario-padding-right-40-\! {
    padding-right: 2.5rem
}

.ontario-margin-top-48-\! {
    margin-top: 3rem
}

.ontario-padding-top-48-\! {
    padding-top: 3rem
}

.ontario-margin-bottom-48-\! {
    margin-bottom: 3rem
}

.ontario-padding-bottom-48-\! {
    padding-bottom: 3rem
}

.ontario-margin-left-48-\! {
    margin-left: 3rem
}

.ontario-padding-left-48-\! {
    padding-left: 3rem
}

.ontario-margin-right-48-\! {
    margin-right: 3rem
}

.ontario-padding-right-48-\! {
    padding-right: 3rem
}

.ontario-margin-top-64-\! {
    margin-top: 4rem
}

.ontario-padding-top-64-\! {
    padding-top: 4rem
}

.ontario-margin-bottom-64-\! {
    margin-bottom: 4rem
}

.ontario-padding-bottom-64-\! {
    padding-bottom: 4rem
}

.ontario-margin-left-64-\! {
    margin-left: 4rem
}

.ontario-padding-left-64-\! {
    padding-left: 4rem
}

.ontario-margin-right-64-\! {
    margin-right: 4rem
}

.ontario-padding-right-64-\! {
    padding-right: 4rem
}

.ontario-padding-top-0-\! {
    padding-top: 0 !important
}

.ontario-padding-bottom-0-\! {
    padding-bottom: 0 !important
}

.ontario-image-example .ontario-row .ontario-columns:last-child,
.ontario-padding-right-0-\! {
    padding-right: 0 !important
}

.ontario-image-example .ontario-row .ontario-columns:first-child,
.ontario-padding-left-0-\! {
    padding-left: 0 !important
}

.ontario-padding-top-4-\! {
    padding-top: .25rem !important
}

.ontario-padding-bottom-4-\! {
    padding-bottom: .25rem !important
}

.ontario-padding-right-4-\! {
    padding-right: .25rem !important
}

.ontario-padding-left-4-\! {
    padding-left: .25rem !important
}

.ontario-padding-top-8-\! {
    padding-top: .5rem !important
}

.ontario-padding-bottom-8-\! {
    padding-bottom: .5rem !important
}

.ontario-padding-right-8-\! {
    padding-right: .5rem !important
}

.ontario-padding-left-8-\! {
    padding-left: .5rem !important
}

.ontario-padding-top-12-\! {
    padding-top: .75rem !important
}

.ontario-padding-bottom-12-\! {
    padding-bottom: .75rem !important
}

.ontario-padding-right-12-\! {
    padding-right: .75rem !important
}

.ontario-padding-left-12-\! {
    padding-left: .75rem !important
}

.ontario-padding-top-16-\! {
    padding-top: 1rem !important
}

.ontario-image-example-container__header,
.ontario-padding-bottom-16-\! {
    padding-bottom: 1rem !important
}

.ontario-padding-right-16-\! {
    padding-right: 1rem !important
}

.ontario-padding-left-16-\! {
    padding-left: 1rem !important
}

.ontario-image-example-container__header,
.ontario-padding-top-24-\! {
    padding-top: 1.5rem !important
}

.ontario-padding-bottom-24-\! {
    padding-bottom: 1.5rem !important
}

.ontario-padding-right-24-\! {
    padding-right: 1.5rem !important
}

.ontario-padding-left-24-\! {
    padding-left: 1.5rem !important
}

.ontario-padding-top-32-\! {
    padding-top: 2rem !important
}

.ontario-padding-bottom-32-\! {
    padding-bottom: 2rem !important
}

.ontario-padding-right-32-\! {
    padding-right: 2rem !important
}

.ontario-padding-left-32-\! {
    padding-left: 2rem !important
}

.ontario-padding-top-40-\! {
    padding-top: 2.5rem !important
}

.ontario-padding-bottom-40-\! {
    padding-bottom: 2.5rem !important
}

.ontario-padding-right-40-\! {
    padding-right: 2.5rem !important
}

.ontario-padding-left-40-\! {
    padding-left: 2.5rem !important
}

.ontario-padding-top-48-\! {
    padding-top: 3rem !important
}

.ontario-padding-bottom-48-\! {
    padding-bottom: 3rem !important
}

.ontario-padding-right-48-\! {
    padding-right: 3rem !important
}

.ontario-padding-left-48-\! {
    padding-left: 3rem !important
}

.ontario-padding-top-64-\! {
    padding-top: 4rem !important
}

.ontario-padding-bottom-64-\! {
    padding-bottom: 4rem !important
}

.ontario-padding-right-64-\! {
    padding-right: 4rem !important
}

.ontario-padding-left-64-\! {
    padding-left: 4rem !important
}

.ontario-padding-top-80-\! {
    padding-top: 5rem !important
}

.ontario-padding-bottom-80-\! {
    padding-bottom: 5rem !important
}

.ontario-padding-right-80-\! {
    padding-right: 5rem !important
}

.ontario-padding-left-80-\! {
    padding-left: 5rem !important
}

.ontario-margin-top-0-\! {
    margin-top: 0 !important
}

.ontario-image-example-container__header,
.ontario-margin-bottom-0-\! {
    margin-bottom: 0 !important
}

.ontario-margin-right-0-\! {
    margin-right: 0 !important
}

.ontario-margin-left-0-\! {
    margin-left: 0 !important
}

.ontario-margin-top-4-\! {
    margin-top: .25rem !important
}

.ontario-margin-bottom-4-\! {
    margin-bottom: .25rem !important
}

.ontario-margin-right-4-\! {
    margin-right: .25rem !important
}

.ontario-margin-left-4-\! {
    margin-left: .25rem !important
}

.ontario-margin-top-8-\! {
    margin-top: .5rem !important
}

.ontario-margin-bottom-8-\! {
    margin-bottom: .5rem !important
}

.ontario-margin-right-8-\! {
    margin-right: .5rem !important
}

.ontario-margin-left-8-\! {
    margin-left: .5rem !important
}

.ontario-margin-top-12-\! {
    margin-top: .75rem !important
}

.ontario-margin-bottom-12-\! {
    margin-bottom: .75rem !important
}

.ontario-margin-right-12-\! {
    margin-right: .75rem !important
}

.ontario-margin-left-12-\! {
    margin-left: .75rem !important
}

.ontario-margin-top-16-\! {
    margin-top: 1rem !important
}

.ontario-margin-bottom-16-\! {
    margin-bottom: 1rem !important
}

.ontario-margin-right-16-\! {
    margin-right: 1rem !important
}

.ontario-margin-left-16-\! {
    margin-left: 1rem !important
}

.ontario-margin-top-24-\! {
    margin-top: 1.5rem !important
}

.ontario-margin-bottom-24-\! {
    margin-bottom: 1.5rem !important
}

.ontario-margin-right-24-\! {
    margin-right: 1.5rem !important
}

.ontario-margin-left-24-\! {
    margin-left: 1.5rem !important
}

.ontario-margin-top-32-\! {
    margin-top: 2rem !important
}

.ontario-margin-bottom-32-\! {
    margin-bottom: 2rem !important
}

.ontario-margin-right-32-\! {
    margin-right: 2rem !important
}

.ontario-margin-left-32-\! {
    margin-left: 2rem !important
}

.ontario-margin-top-40-\! {
    margin-top: 2.5rem !important
}

.ontario-image-example-container__margin,
.ontario-margin-bottom-40-\! {
    margin-bottom: 2.5rem !important
}

.ontario-margin-right-40-\! {
    margin-right: 2.5rem !important
}

.ontario-margin-left-40-\! {
    margin-left: 2.5rem !important
}

.ontario-margin-top-48-\! {
    margin-top: 3rem !important
}

.ontario-margin-bottom-48-\! {
    margin-bottom: 3rem !important
}

.ontario-margin-right-48-\! {
    margin-right: 3rem !important
}

.ontario-margin-left-48-\! {
    margin-left: 3rem !important
}

.ontario-margin-top-64-\! {
    margin-top: 4rem !important
}

.ontario-margin-bottom-64-\! {
    margin-bottom: 4rem !important
}

.ontario-margin-right-64-\! {
    margin-right: 4rem !important
}

.ontario-margin-left-64-\! {
    margin-left: 4rem !important
}

.ontario-margin-top-80-\! {
    margin-top: 5rem !important
}

.ontario-margin-bottom-80-\! {
    margin-bottom: 5rem !important
}

.ontario-margin-right-80-\! {
    margin-right: 5rem !important
}

.ontario-margin-left-80-\! {
    margin-left: 5rem !important
}

.ontario-image-example-container__header--default,
.ontario-image-example-container__header--do,
.ontario-image-example-container__header--dont,
.ontario-image-example-container__header--info {
    font-style: normal;
    font-weight: 700;
    text-rendering: optimizeLegibility;
    margin-bottom: 1rem;
    font-feature-settings: normal;
    font-family: "Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}

.ontario-image-example-container__header--default {
    font-size: 1.25rem;
    letter-spacing: .03rem;
    line-height: 1.5;
    margin: 0 0 .75rem 0;
    max-width: 48rem
}

@media screen and (min-width:40em) {
    .ontario-image-example-container__header--default {
        font-size: 1.5rem;
        letter-spacing: .0313rem;
        line-height: 1.5
    }
}

.ontario-image-example-container__header--do,
.ontario-image-example-container__header--dont,
.ontario-image-example-container__header--info {
    font-size: 1.125rem;
    letter-spacing: .03rem;
    line-height: 1.56;
    margin: 0 0 .75rem 0;
    max-width: 48rem
}

@media screen and (min-width:40em) {

    .ontario-image-example-container__header--do,
    .ontario-image-example-container__header--dont,
    .ontario-image-example-container__header--info {
        font-size: 1.1875rem;
        letter-spacing: .025rem;
        line-height: 1.5
    }
}

:root {
    --red-alert-icon: url("../icons/ontario-material-alert-48px--red.svg");
    --green-alert-icon: url("../icons/ontario-material-success-48px--green.svg")
}

html {
    -webkit-font-smoothing: subpixel-antialiased
}

#platform-content {
    width: 100%;
    margin: auto;
    display: flex
}

article .ontario-row,
article.ontario-row {
    max-width: 72rem !important;
    width: 100% !important;
    margin: auto !important
}

article img {
    max-width: 100%
}

img+h2,
img+h3,
img+h4,
img+h5,
img+h6 {
    margin-top: 1rem
}

h2+img,
h3+img {
    margin-top: 2.5rem
}

.ontario-table-container+hr {
    margin-top: 4rem
}

dd {
    -webkit-margin-start: 2rem;
    margin-inline-start: 2rem
}

.Document {
    padding: 0 2rem 1.5rem 2rem
}

.Document-header {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0
}

.platform-table-scroll {
    overflow-x: auto
}

.platform-bg-link {
    background-color: #06c
}

.platform-bg-link--hover {
    background-color: #00478f
}

.platform-bg-link--active {
    background-color: #002142
}

.platform-bg-link--visited {
    background-color: #551a8b
}

.platform-bg-secondary--hover {
    background-color: #e0f0ff
}

.platform-bg-secondary--active {
    background-color: #c2e0ff
}

.platform-bg-tertiary--hover {
    background-color: #e8e8e8
}

.platform-bg-tertiary--active {
    background-color: #d1d1d1
}

.platform-bg-alert {
    background-color: #cd0000
}

.platform-bg-white {
    background-color: #fff
}

.platform-bg-alert-light {
    background-color: #fceff0
}

.platform-bg-warning {
    background-color: #ffd440
}

.platform-bg-warning-light {
    background-color: #fef6dc
}

.platform-bg-success {
    background-color: #118847
}

.platform-bg-success-light {
    background-color: #e5f0e9
}

.platform-bg-information {
    background-color: #1080a6
}

.platform-bg-information-light {
    background-color: #e2f0f4
}

.platform-bg-focus {
    background-color: #009adb
}

.platform-colour-circle {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    margin: 0;
    display: inline-block;
    vertical-align: top
}

.platform-text-center {
    text-align: center
}

.platform-text-white {
    color: #fff
}

.platform-padding-left-8 {
    padding-left: .5rem
}

.platform-padding-right-8 {
    padding-right: .5rem
}

.platform-colour-outline {
    border: 1px solid #1a1a1a
}

.platform-icon-alert,
.platform-icon-success {
    background-repeat: no-repeat;
    background-position: 0 3px;
    background-size: 1rem;
    margin-left: .25rem;
    padding: 0 .5rem
}

.platform-icon-alert {
    background-image: var(--red-alert-icon)
}

.platform-icon-success {
    background-image: var(--green-alert-icon)
}

.platform-image-row-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start
}

.platform-image-row-flex img {
    margin: .25rem .15rem .25rem 0
}

dt.platform-dt {
    font-size: 18px;
    font-weight: 700
}

.ontario-row.ontario-expanded {
    max-width: none
}

.Frame-inner {
    position: static;
    height: auto
}

.Prose img,
.platform-component img {
    max-width: 100%;
    white-space: no-wrap
}

.platform-component__notes,
.platform-component__notes-no-preview {
    margin-top: 1.5rem
}

@media screen and (max-width:31.24em) {

    .platform-component__notes,
    .platform-component__notes-no-preview {
        margin-bottom: 2rem
    }
}

.platform-component__notes :not(table) :not(.platform-table-scroll) :not(hr) :not(img) .Prose :not(.ontario-column) :not(table) :not(.platform-table-scroll) :not(hr) :not(.ontario-row) :not(img),
.platform-component__notes-no-preview :not(table) :not(.platform-table-scroll) :not(hr) :not(img) .Prose :not(.ontario-column) :not(table) :not(.platform-table-scroll) :not(hr) :not(.ontario-row) :not(img) {
    max-width: 48rem
}

.platform-component__notes li,
.platform-component__notes p,
.platform-component__notes-no-preview li,
.platform-component__notes-no-preview p {
    max-width: 48rem
}

.platform-component__notes li.ontario-lead-statement,
.platform-component__notes p.ontario-lead-statement,
.platform-component__notes-no-preview li.ontario-lead-statement,
.platform-component__notes-no-preview p.ontario-lead-statement {
    max-width: 100%
}

.platform-component__notes li ol li a,
.platform-component__notes li ol li code,
.platform-component__notes li ul li a,
.platform-component__notes li ul li code,
.platform-component__notes-no-preview li ol li a,
.platform-component__notes-no-preview li ol li code,
.platform-component__notes-no-preview li ul li a,
.platform-component__notes-no-preview li ul li code {
    word-wrap: break-word
}

.Document code,
.code,
.platform-component__notes code,
.platform-component__notes-no-preview code,
.platform-table-scroll code {
    font-family: "Courier Prime", monospace, monospace;
    border: .5px solid #ccc;
    border-radius: 4px;
    background-color: #f2f2f2;
    color: #cd0000;
    font-size: .875em;
    font-weight: 400;
    padding: .5rem
}

.code {
    padding: .5em;
    width: 100%
}

@media screen and (min-width:55em) {
    .code {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content
    }
}

.platform-component__notes code.hljs,
.platform-component__notes-no-preview code.hljs {
    padding: .75em;
    overflow-x: hidden;
    max-width: 100%;
    white-space: pre-wrap;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

div.no-zebra-stripes table tbody tr {
    background-color: transparent !important
}

div.no-zebra-stripes table tbody tr.ontario-table-row--highlight {
    background-color: #e191003c !important
}

.platform-component__notes-no-preview {
    margin-top: 0
}

@media screen and (max-width:40em) {
    .ontario-image-example .ontario-row .ontario-columns:first-child {
        padding: inherit
    }
}

@media screen and (max-width:40em) {
    .ontario-image-example .ontario-row .ontario-columns:last-child {
        padding: inherit
    }
}

.ontario-image-example-container {
    background-color: #e7f2f6;
    padding: 0 1rem 2rem 1rem
}

@media screen and (min-width:40em) {
    .ontario-image-example-container {
        padding: 0 1.5rem 2rem 1.5rem
    }
}

.ontario-image-example-container__header--default {
    color: #1080a6
}

.ontario-image-example-container__header--do {
    color: #118847
}

.ontario-image-example-container__header--dont {
    color: #cd0000
}

.ontario-image-example-container__header--info {
    color: #1080a6
}

.ontario-image-example-container__hr {
    margin: 0 0 1.5rem 0
}

.ontario-image-example-container__hr--default {
    border-bottom: 4px solid #1080a6
}

.ontario-image-example-container__hr--do {
    border-bottom: 4px solid #118847
}

.ontario-image-example-container__hr--dont {
    border-bottom: 4px solid #cd0000
}

.ontario-image-example-container__hr--info {
    border-bottom: 4px solid #1080a6
}

.ontario-lists--two-column-list-md ul {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    display: block
}

@media screen and (min-width:40em) {
    .ontario-lists--two-column-list-md ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2
    }

    .ontario-lists--two-column-list-md ul li:last-child {
        padding: 0 0 .75rem 0
    }
}

.ontario-lists--two-column-list {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    display: block
}

@media screen and (min-width:40em) {
    .ontario-lists--two-column-list {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2
    }

    .ontario-lists--two-column-list li:last-child {
        padding: 0 0 .75rem 0
    }
}

.ontario-list--no-bullets {
    list-style-type: none
}

:root {
    --ds-supergraphic-error-page: url("../icons/system/ds-supergraphic-element-error-page.svg")
}

.platform-error {
    max-width: none !important
}

.platform-error__banner {
    width: 100%;
    max-width: 100%;
    padding: 10.5rem 0;
    color: #1a1a1a;
    display: block;
    border-bottom: none;
    margin: 0 0 3rem;
    background-color: #fff;
    background-image: var(--ds-supergraphic-error-page);
    background-position-x: 49vw;
    background-repeat: no-repeat;
    background-size: 58rem
}

.platform-error__content {
    max-width: 60%
}

:root {
    --ds-supergraphic: url("../icons/system/ds-supergraphic-element.svg")
}

.platform-homepage__banner {
    width: 100%;
    max-width: 100%;
    padding: 7.5rem 0;
    color: #fff;
    display: block;
    border-bottom: none;
    margin: 0 0 3rem;
    background-color: #367a76;
    background-image: var(--ds-supergraphic);
    background-position-x: 64vw;
    background-repeat: no-repeat;
    background-size: 58rem
}

.platform-homepage__banner::before {
    display: block;
    content: "";
    width: 100%;
    height: 64rem;
    background-image: var(--ds-supergraphic);
    position: absolute;
    background-position-x: 64vw;
    background-repeat: no-repeat;
    background-size: 58rem;
    z-index: 0;
    background-position-y: -10.5rem
}

@media screen and (min-width:73em) {
    .platform-homepage__banner {
        padding: 10.5rem 0
    }
}

@media screen and (max-width:73em) {
    .platform-homepage__banner {
        background-position-x: 65vw
    }

    .platform-homepage__banner::before {
        background-position-x: 65vw;
        background-position-y: -7.5rem
    }
}

@media screen and (max-width:40em) {
    .platform-homepage__banner {
        background-size: 500px 300px;
        background-position-x: 63vw
    }

    .platform-homepage__banner::before {
        background: unset
    }
}

.hljs {
    display: block;
    overflow-x: auto;
    padding: .5em;
    color: #333;
    background: #f8f8f8
}

.hljs-comment,
.hljs-quote {
    color: #998;
    font-style: italic
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
    color: #333;
    font-weight: 700
}

.hljs-literal,
.hljs-number,
.hljs-tag .hljs-attr,
.hljs-template-variable,
.hljs-variable {
    color: teal
}

.hljs-doctag,
.hljs-string {
    color: #d14
}

.hljs-string {
    max-width: 100%;
    overflow-wrap: break-word
}

.hljs-section,
.hljs-selector-id,
.hljs-title {
    color: #900;
    font-weight: 700
}

.hljs-subst {
    font-weight: 400
}

.hljs-class .hljs-title,
.hljs-type {
    color: #458;
    font-weight: 700
}

.hljs-attribute,
.hljs-name,
.hljs-tag {
    color: navy;
    font-weight: 400
}

.hljs-link,
.hljs-regexp {
    color: #009926
}

.hljs-bullet,
.hljs-symbol {
    color: #990073
}

.hljs-built_in,
.hljs-builtin-name {
    color: #0086b3
}

.hljs-meta {
    color: #999;
    font-weight: 700
}

.hljs-deletion {
    background: #fdd
}

.hljs-addition {
    background: #dfd
}

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: 700
}

.Meta a {
    text-decoration: none
}

.Meta-item {
    overflow: hidden;
    margin-bottom: .5rem;
    padding-bottom: 1rem
}

.Meta-item:not(:last-child) {
    border-bottom: 1px solid rgba(83, 83, 99, .15)
}

.Meta-key {
    font: normal .75rem/1.66667 "Open Sans", Helvetica, Arial, sans-serif;
    letter-spacing: .075em;
    text-transform: uppercase;
    display: block;
    padding-right: .5rem;
    padding-bottom: .25rem;
    color: rgba(83, 83, 99, .75)
}

.Meta-value {
    font: normal .875rem/1.71429 "Open Sans", Helvetica, Arial, sans-serif;
    display: block;
    min-width: 10rem;
    padding-bottom: .25rem
}

.Meta-value a {
    display: inline-flex;
    align-items: center
}

.Meta-value a svg {
    width: 1rem;
    height: 1rem;
    margin-left: 5px
}

.Meta-value a:hover span {
    text-decoration: underline
}

.Meta-value li:not(:last-child) {
    margin-bottom: .25em
}

.Meta-count {
    font-style: normal;
    font-weight: 400;
    opacity: .75
}

.platform-preview {
    position: relative
}

.platform-preview.is-disabled .platform-preview__overlay {
    display: block
}

.platform-preview.is-resizing {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.platform-preview.is-resizing * {
    cursor: -webkit-grabbing !important;
    cursor: grabbing !important
}

@media(min-width:31.24em) {
    .platform-preview {
        background-color: #f6f6f6;
        border: 1px solid rgba(83, 83, 99, .25)
    }
}

.platform-preview__wrapper {
    offset-inline-start: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    width: calc(100% + .625rem);
    min-width: 200px;
    max-width: calc(100% + .625rem);
    background-color: transparent;
    left: 0
}

@media(max-width:31.24em) {
    .platform-preview__wrapper {
        position: static
    }
}

.platform-preview__resizer {
    offset-inline-start: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    max-width: calc(100% - .625rem + 1px);
    min-width: 180px;
    background-color: #fff;
    -webkit-overflow-scrolling: touch;
    left: 0
}

.platform-preview__resizer.Error {
    margin: .75rem
}

@media(max-width:31.24em) {
    .platform-preview__resizer {
        width: 100% !important;
        min-width: 100%;
        border: 0
    }
}

.platform-preview__iframe {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%
}

.platform-preview__overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0
}

.platform-preview__handle {
    -webkit-border-start: 1px solid rgba(83, 83, 99, .25);
    border-inline-start: 1px solid rgba(83, 83, 99, .25);
    transition: all .15s ease-out;
    offset-inline-end: 0;
    position: absolute;
    top: -1px;
    bottom: -1px;
    z-index: 100;
    height: calc(100% + 2px);
    width: .625rem;
    background: transparent url(../icons/system/icon-drag--vertical.svg) no-repeat 50%;
    background-size: 3px 16px;
    cursor: ew-resize;
    right: 0;
    border-left: 1px solid rgba(83, 83, 99, .25)
}

.platform-preview__handle:hover {
    background-color: rgba(83, 83, 99, .05)
}

.platform-preview__handle:active {
    background-color: rgba(83, 83, 99, .075)
}

.platform-preview__handle.is-disabled {
    pointer-events: none;
    visibility: hidden
}

@media(max-width:31.24em) {
    .platform-preview__handle {
        display: none
    }
}

.platform-preview__handle {
    z-index: 2 !important
}

.platform-component .Status {
    margin-left: auto;
    padding-left: .5rem
}

.platform-component__title {
    font: bold .8437521094rem "Open Sans", Helvetica, Arial, sans-serif;
    font-feature-settings: "dlig" 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 2.5rem;
    letter-spacing: .04rem;
    color: #1a1a1a;
    font-style: normal;
    font-weight: 700;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    font-feature-settings: normal
}

.platform-component__previewLink:active,
.platform-component__previewLink:hover,
.platform-component__previewLink:link,
.platform-component__previewLink:visited {
    color: #444;
    text-decoration: none
}

.platform-component__previewLink svg {
    fill: #28f;
    opacity: .75
}

.platform-component__previewLink:hover svg {
    opacity: 1
}

.platform-component__previewLink:active,
.platform-component__previewLink:hover,
.platform-component__previewLink:link,
.platform-component__previewLink:visited {
    color: #1a1a1a
}

.platform-component__previewLink svg:hover {
    fill: #00478f
}

.platform-component__previewLink svg {
    margin-bottom: .25rem;
    height: 2rem;
    width: 2rem;
    fill: #06c;
    opacity: 1
}

@media(max-width:31.24em) {
    .platform-component__header .Status .platform-status-label {
        position: relative;
        height: 0;
        width: 0;
        overflow: hidden;
        background-color: #fff !important;
        border-radius: 100%;
        border-style: solid;
        border-width: .125rem;
        padding: .25rem;
        color: transparent !important
    }
}

.platform-component__preview {
    flex: 0 0 auto;
    height: 50%;
    max-height: calc(100% - 3.75rem);
    margin: 0 .625rem
}

@media(max-width:31.24em) {
    .platform-component__preview {
        flex: 1 1 auto;
        max-height: 100%;
        margin: 0
    }
}

.platform-component__handle {
    transition: all .15s ease-out;
    flex: 0 0 auto;
    height: .625rem;
    margin: 0 .625rem;
    background: transparent url(../icons/system/icon-drag--horizontal.svg) no-repeat 50% 50%;
    background-size: 16px 3px;
    cursor: ns-resize
}

.platform-component__handle:hover {
    background-color: rgba(83, 83, 99, .05)
}

.platform-component__handle:active {
    background-color: rgba(83, 83, 99, .075)
}

.platform-component__handle.is-disabled {
    pointer-events: none;
    visibility: hidden
}

@media(max-width:31.24em) {
    .platform-component__handle {
        pointer-events: none;
        visibility: hidden
    }
}

@media(max-width:31.24em) {
    .platform-component__handle {
        display: none
    }
}

.platform-component__handle--browser {
    display: block;
    pointer-events: all;
    visibility: visible
}

.platform-component__info {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    margin: .625rem;
    margin-top: 0;
    border: 1px solid rgba(83, 83, 99, .25)
}

@media(max-width:31.24em) {
    .platform-component__info {
        display: none
    }
}

.platform-component__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-top: 1rem !important
}

.platform-component__header .Status {
    -webkit-margin-start: auto;
    margin-inline-start: auto;
    -webkit-padding-start: .5rem;
    padding-inline-start: .5rem
}

.platform-component__info,
.platform-component__preview {
    margin: 0
}

.platform-component__info {
    border: none
}

@media screen and (max-width:31.24em) {
    .platform-component__info {
        display: block
    }
}

.platform-component__preview {
    max-height: 300px;
    height: 300px
}

@media screen and (max-width:40em) {
    .platform-component__preview {
        max-height: 100% !important
    }
}

@media screen and (max-width:31.24em) {
    .platform-component__preview__preview {
        height: 100% !important
    }
}

.platform-component__preview.is-header {
    max-height: 500px !important;
    height: 480px !important
}

img.ontario-image-example--drivers-license {
    margin-right: 1.5rem;
    max-width: 300px
}

@media screen and (max-width:20em) {
    img.ontario-image-example--drivers-license {
        max-width: 100%
    }
}

@media screen and (max-width:96em) {
    .ontario-image-example-container--group img {
        margin-bottom: 2.5rem
    }
}

.platform-icons-preview__catitems .platform-icons-preview__catitem {
    display: flex;
    align-items: center;
    margin: 0 0 1rem 0;
    width: 100%
}

@media screen and (min-width:40em) {
    .platform-icons-preview__catitems .platform-icons-preview__catitem {
        display: inline-flex
    }

    .platform-icons-preview__catitems {
        -moz-column-count: 3;
        -moz-column-gap: 20px;
        -webkit-column-count: 3;
        -webkit-column-gap: 20px;
        column-count: 3;
        column-gap: 20px;
        margin: 0 0 1.5rem 1.5rem !important
    }
}

.platform-icons-preview__label {
    margin: 0 0 0 10px;
    color: #1a1a1a !important;
    display: flex;
    align-items: center;
    font-size: 14px
}

.platform-icons-preview__catlabel:hover {
    cursor: default
}

.platform-icons-preview__cat {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.platform-icons-preview.platform-iframe-code-section {
    display: none
}

.platform-icons-preview.ontario-row {
    margin: 0
}

.platform-icons-preview.ontario-column {
    position: initial;
    padding-left: 0;
    padding-right: 0
}

.platform-icons-preview.ontario-icon {
    width: 32px;
    height: 32px
}

.platform-preview {
    position: relative
}

.platform-preview.is-disabled .platform-preview__overlay {
    display: block
}

.platform-preview.is-resizing {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.platform-preview.is-resizing * {
    cursor: -webkit-grabbing !important;
    cursor: grabbing !important
}

@media(min-width:31.24em) {
    .platform-preview {
        background-color: #f6f6f6;
        border: 1px solid rgba(83, 83, 99, .25)
    }
}

.platform-preview__wrapper {
    offset-inline-start: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    width: calc(100% + .625rem);
    min-width: 200px;
    max-width: calc(100% + .625rem);
    background-color: transparent;
    left: 0
}

@media(max-width:31.24em) {
    .platform-preview__wrapper {
        position: static
    }
}

.platform-preview__resizer {
    offset-inline-start: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    max-width: calc(100% - .625rem + 1px);
    min-width: 180px;
    background-color: #fff;
    -webkit-overflow-scrolling: touch;
    left: 0
}

.platform-preview__resizer.Error {
    margin: .75rem
}

@media(max-width:31.24em) {
    .platform-preview__resizer {
        width: 100% !important;
        min-width: 100%;
        border: 0
    }
}

.platform-preview__iframe {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%
}

.platform-preview__overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0
}

.platform-preview__handle {
    -webkit-border-start: 1px solid rgba(83, 83, 99, .25);
    border-inline-start: 1px solid rgba(83, 83, 99, .25);
    transition: all .15s ease-out;
    offset-inline-end: 0;
    position: absolute;
    top: -1px;
    bottom: -1px;
    z-index: 100;
    height: calc(100% + 2px);
    width: .625rem;
    background: transparent url(../icons/system/icon-drag--vertical.svg) no-repeat 50%;
    background-size: 3px 16px;
    cursor: ew-resize;
    right: 0;
    border-left: 1px solid rgba(83, 83, 99, .25)
}

.platform-preview__handle:hover {
    background-color: rgba(83, 83, 99, .05)
}

.platform-preview__handle:active {
    background-color: rgba(83, 83, 99, .075)
}

.platform-preview__handle.is-disabled {
    pointer-events: none;
    visibility: hidden
}

@media(max-width:31.24em) {
    .platform-preview__handle {
        display: none
    }
}

.platform-preview__handle {
    z-index: 2 !important
}

.platform-header {
    z-index: 1
}

.platform-header--main {
    max-width: 100%;
    height: 50px;
    background-color: #1a1a1a;
    width: 100%;
    z-index: 1
}

.platform-header--main>.ontario-columns {
    padding: 0
}

.platform-header--main .ontario-header__logo-container {
    height: auto;
    line-height: 1.375rem;
    padding-top: .5rem
}

.platform-header--main .ontario-header__logo-container img {
    width: 100px;
    height: 25px
}

.platform-header--main .ontario-header__language-toggler {
    font-family: Raleway, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.375rem;
    height: auto;
    padding: .5rem .75rem;
    margin-right: -5px
}

.platform-header--main nav .ontario-header-navigation__menu-list {
    list-style: none;
    padding: 10px 10px 0 23px
}

.platform-header--sub {
    background: #404040;
    color: #fff;
    padding: 1.25rem 0;
    width: 100%;
    min-height: 50px;
    display: flex
}

.platform-header--sub>.ontario-row {
    max-width: 100%;
    display: flex;
    align-items: center
}

.platform-header--sub .ontario-sub-header {
    -webkit-font-smoothing: antialiased
}

.platform-header--sub .ontario-sub-header a:hover {
    text-decoration: underline
}

.platform-header--sub a {
    color: #fff !important;
    text-decoration: none
}

.platform-header--sub :first-child.ontario-column {
    max-width: 100%;
    padding: 0
}

.platform-header--sub .ontario-header-button--with-outline,
.platform-header--sub .ontario-header-button--without-outline {
    background-color: #404040;
    color: #fff
}

.ontario-mobile-navigation--open {
    -ms-overflow-style: -ms-autohiding-scrollbar;
    overflow-y: hidden
}

.ontario-mobile-navigation--open .ontario-header-navigation {
    visibility: visible
}

.ontario-mobile-navigation--open .ontario-overlay {
    display: block
}

.ontario-header-navigation__menu-list {
    width: 100%
}

.ontario-header-navigation {
    position: fixed;
    top: 0;
    right: -20rem;
    width: 100%;
    height: 100vh;
    max-height: 100%;
    background-color: #fff;
    border-left: 1px solid #ccc;
    overflow-y: auto;
    z-index: 3;
    transition: all .5s ease 0s;
    visibility: hidden
}

@media screen and (min-width:40em) {
    .ontario-header-navigation {
        width: 320px
    }
}

.ontario-header-navigation--is-ready[aria-hidden=false] {
    box-shadow: -8px 0 24px 0 rgba(0, 0, 0, .4);
    right: 0;
    overflow: hidden
}

.ontario-header-navigation__banner {
    background-color: #1a1a1a;
    color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 2rem;
    padding: 1rem
}

.ontario-header-navigation__banner.stick {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1
}

@media screen and (max-width:73em) {
    .ontario-header-navigation__banner.stick .ontario-icon {
        margin-right: 2rem
    }
}

.ontario-header-navigation__close-menu-button {
    border-radius: 4px;
    min-width: 2.5rem;
    margin: 0;
    padding-left: .25rem;
    padding-right: .25rem
}

.ontario-header-navigation__close-menu-button svg {
    font-size: 2rem;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0
}

.ontario-header-navigation__close-menu-button:focus {
    outline: 0;
    box-shadow: 0 0 0 4px #009adb;
    background-color: #1a1a1a
}

.ontario-header-navigation__menu-list {
    margin: 0;
    padding: .5rem 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%
}

.ontario-header-navigation__menu-item {
    font-size: 1.125rem;
    list-style-type: none;
    padding: .25rem
}

.ontario-header-navigation__menu-item a {
    display: block;
    padding: .5rem 2rem .5rem;
    color: #1a1a1a;
    text-decoration: none
}

.ontario-header-navigation__menu-item a:hover {
    text-decoration: underline;
    background-color: #f2f2f2
}

.ontario-header-navigation__menu-item a:active,
.ontario-header-navigation__menu-item a:focus {
    background-color: #f2f2f2
}

.ontario-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .6);
    width: 100%;
    height: 100%;
    z-index: 2
}

.ontario-image-example-container__header--default,
.ontario-image-example-container__header--do,
.ontario-image-example-container__header--dont,
.ontario-image-example-container__header--info {
    font-style: normal;
    font-weight: 700;
    text-rendering: optimizeLegibility;
    margin-bottom: 1rem;
    font-feature-settings: normal;
    font-family: "Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}

.ontario-image-example-container__header--default {
    font-size: 1.25rem;
    letter-spacing: .03rem;
    line-height: 1.5;
    margin: 0 0 .75rem 0;
    max-width: 48rem
}

@media screen and (min-width:40em) {
    .ontario-image-example-container__header--default {
        font-size: 1.5rem;
        letter-spacing: .0313rem;
        line-height: 1.5
    }
}

.ontario-image-example-container__header--do,
.ontario-image-example-container__header--dont,
.ontario-image-example-container__header--info {
    font-size: 1.125rem;
    letter-spacing: .03rem;
    line-height: 1.56;
    margin: 0 0 .75rem 0;
    max-width: 48rem
}

@media screen and (min-width:40em) {

    .ontario-image-example-container__header--do,
    .ontario-image-example-container__header--dont,
    .ontario-image-example-container__header--info {
        font-size: 1.1875rem;
        letter-spacing: .025rem;
        line-height: 1.5
    }
}

.platform-banner {
    background-color: #e2f0f4;
    font-weight: 400;
    margin: 0;
    padding: 1rem 0;
    position: relative;
    border-bottom: .0625rem solid #ccc
}

.platform-banner__body {
    display: flex;
    flex-wrap: nowrap;
    align-items: center
}

@media screen and (max-width:73em) {
    .platform-banner__body {
        align-items: start
    }
}

.platform-banner__icon svg {
    margin: 0 .85rem 0 0
}

.platform-banner__text {
    margin: 0 0 0 1rem;
    padding: 0;
    line-height: 1.8
}

.platform-banner a {
    color: #1a1a1a;
    font-weight: 700
}

.platform-banner a:focus,
.platform-banner a:hover {
    text-decoration: none
}

.platform-banner a:visited {
    color: #1a1a1a
}

.ontario-image-example-container__header--default,
.ontario-image-example-container__header--do,
.ontario-image-example-container__header--dont,
.ontario-image-example-container__header--info {
    font-style: normal;
    font-weight: 700;
    text-rendering: optimizeLegibility;
    margin-bottom: 1rem;
    font-feature-settings: normal;
    font-family: "Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}

.ontario-image-example-container__header--default {
    font-size: 1.25rem;
    letter-spacing: .03rem;
    line-height: 1.5;
    margin: 0 0 .75rem 0;
    max-width: 48rem
}

@media screen and (min-width:40em) {
    .ontario-image-example-container__header--default {
        font-size: 1.5rem;
        letter-spacing: .0313rem;
        line-height: 1.5
    }
}

.ontario-image-example-container__header--do,
.ontario-image-example-container__header--dont,
.ontario-image-example-container__header--info {
    font-size: 1.125rem;
    letter-spacing: .03rem;
    line-height: 1.56;
    margin: 0 0 .75rem 0;
    max-width: 48rem
}

@media screen and (min-width:40em) {

    .ontario-image-example-container__header--do,
    .ontario-image-example-container__header--dont,
    .ontario-image-example-container__header--info {
        font-size: 1.1875rem;
        letter-spacing: .025rem;
        line-height: 1.5
    }
}

.fractal-inline-code .ontario-textarea {
    margin-bottom: 8px;
    min-height: 75px;
    max-height: 144px
}

.ontario-card__markdown-style {
    margin-top: 2.5rem
}

.ontario-card__markdown-style .ontario-columns {
    padding-left: 0
}

.ontario-card__markdown-style .ontario-image-example-container {
    text-align: center;
    padding-top: 2rem
}

.ontario-card__standard-card-list {
    list-style-type: upper-alpha
}

.ontario-image-example--center-image {
    text-align: center
}

.ontario-card__markdown-style--horizontal img,
.ontario-card__markdown-style--standard img {
    width: 66%
}

.ontario-card__markdown-style--horizontal .ontario-image-example--half-width img,
.ontario-card__markdown-style--standard .ontario-image-example--half-width img {
    width: 33%
}

.ontario-task-status--not-started {
    background-color: #e2f0f4
}

.ontario-task-status--in-progress {
    background-color: #1080a6;
    color: #fff
}

.ontario-task-status--error {
    background-color: #cd0000;
    color: #fff
}

.ontario-task-status--complete {
    background-color: #fff;
    border: .0625rem solid #4d4d4d
}

.ontario-task-status--optional {
    background-color: #f2f2f2
}

.ontario-task-status--cannot-start-yet {
    background-color: #ccc
}

.platform-status--tag {
    height: 25px;
    margin-bottom: 1.5rem;
    margin-top: -.75rem
}

.platform-status--tag a {
    height: inherit
}

.platform-status,
.platform-status-dots {
    display: flex;
    align-items: center;
    margin-left: .25rem
}

.platform-status-dot+.platform-status-dot {
    -webkit-margin-start: 3px;
    margin-inline-start: 3px
}

[dir=ltr] .platform-status-dot+.platform-status-dot {
    margin-left: 3px
}

[dir=rtl] .platform-status-dot+.platform-status-dot {
    margin-right: 3px
}

.platform-status-label {
    font-family: Raleway, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: .075em;
    display: inline-block;
    border-radius: 2rem;
    padding: .125rem .75rem;
    color: #fff;
    white-space: nowrap;
    margin-bottom: 1.5rem
}

.platform-status-label+.platform-status-label {
    -webkit-margin-start: .25rem;
    margin-inline-start: .25rem
}

[dir=ltr] .platform-status-label+.platform-status-label {
    margin-right: .25rem
}

[dir=rtl] .platform-status-label+.platform-status-label {
    margin-left: .25rem
}

.platform-status--labelled .platform-status-label {
    -webkit-margin-end: .75rem;
    margin-inline-end: .75rem
}

[dir=ltr] .platform-status--labelled .platform-status-label {
    margin-right: .75rem
}

[dir=rtl] .platform-status--labelled .platform-status-label {
    margin-left: .75rem
}