@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,600,700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400);

@font-face {
    font-family: "Adelle Sage";
    src: url("Font/adellesage-webfont.woff2") format("woff2"),url("Font/adellesage-webfont.woff") format("woff");
    font-style: normal;
    font-weight: 200
}

@font-face {
    font-family: "Adelle Sage";
    src: url("Font/adellesage-webfont.woff2") format("woff2"),url("Font/adellesage-webfont.woff") format("woff");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: "Adelle Sage";
    src: url("Font/adellesage-webfont.woff2") format("woff2"),url("Font/adellesage-webfont.woff") format("woff");
    font-style: normal;
    font-weight: 600
}

@font-face {
    font-family: "Adelle Sage";
    src: url("Font/adellesage-webfont.woff2") format("woff2"),url("Font/adellesage-webfont.woff") format("woff");
    font-style: normal;
    font-weight: 700
}

@font-face {
    font-family: "Adelle Sans Sage";
    src: url("Font/adellesanssage.woff2") format("woff2"),url("Font/adellesanssage.woff") format("woff");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: "Adelle Sans Sage";
    src: url("Font/adellesanssage-bold.woff2") format("woff2"),url("Font/adellesanssage-bold.woff") format("woff");
    font-style: normal;
    font-weight: 600
}

@font-face {
    font-family: "Adelle Sans Sage";
    src: url("Font/adellesanssage-bold.woff2") format("woff2"),url("Font/adellesanssage-bold.woff") format("woff");
    font-style: normal;
    font-weight: 700
}

@font-face {
    font-family: 'CarbonIcons';
    src: url("Font/carbon-icons-webfont.woff") format("woff");
    src: url("Font/carbon-icons-webfont.ttf") format('truetype');
    font-style: normal;
    font-weight: normal
}

@font-face {
    font-family: 'sagearmonyeicons';
    /*src: url("Font/.woff") format("woff");*/
    src: url("Font/sagearmonyeicons.ttf") format('truetype');
    font-style: normal;
    font-weight: normal
}

@font-face {
    font-family: "Open Sans", sans-serif;
    src: url('https://fonts.googleapis.com/css?family=Open+Sans') format('truetype');
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input {
    border: 0;
    box-sizing: border-box;
    font: inherit;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none
    }

table {
    border-collapse: collapse;
    border-spacing: 0
}

input {
    border-radius: 0
}

a {
    color: #008200;
    text-decoration: none
}

    a:hover {
        color: #006800;
    }

    a:link {
        text-decoration: none
    }

    a.dls-button.business-small:hover {
        color: white;
    }

h1, h2, h3 {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    font-size: 40px;
    font-weight: 600;
    line-height: 46px;
    margin-bottom: 52px
}

h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    margin-bottom: 21px
}

h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 10px
}

h4 {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 16px
}

label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    /*line-height: 21px;*/
    line-height: normal;
}

p {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    margin-bottom: 24px;
    max-width: 600px
}

    p.summary {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 48px
    }

    p.small-header-capitals {
        color: rgba(0,0,0,0.55);
        font-size: 12px;
        font-weight: 700;
        line-height: 16px;
        margin: 0px;
        text-transform: uppercase
    }

    p.highlight {
        font-weight: 700
    }

span.highlight {
    font-weight: 700
}

.font-open-sans {
    font-family: 'Open Sans';
    font-weight: 400
}

.font-roboto {
    font-family: 'Roboto';
    font-weight: 400
}

.hide {
    display: none;
}

body, html {
    font-family: 'Open Sans', Arial, sans-serif;
    background-color: #f2f5f6;
    color: rgba(0,0,0,0.9);
    /*height: 100%*/
    width: 100vw;
    display: inline-flex;
}

.all-content {
    background-color: #f2f5f6;
    display: flex;
    transition: opacity 0.2s ease
}

.main-body {
    flex: none;
    height: 100%
}

.container {
    min-height: 100%;
    margin-bottom: 80px
}

    .container.limited-width {
        max-width: 840px
    }

    .container.container-flex {
        display: flex
    }

        .container.container-flex.flex-2 {
            flex-wrap: wrap
        }

            .container.container-flex.flex-2 .pod {
                margin: 24px;
                width: calc(50% - 48px)
            }

        .container.container-flex.flex-3 {
            flex-wrap: wrap
        }

            .container.container-flex.flex-3 .pod {
                margin: 24px;
                width: calc(33% - 48px)
            }

.dls-code {
    background-color: black;
    margin-bottom: 16px;
    padding: 16px
}

    .dls-code p {
        color: #f92672;
        font-family: monospace
    }

    .dls-code .content {
        color: white
    }

    .dls-code .value {
        color: #a6e22e
    }

.main-content-container {
    background: white;
    box-shadow: 0 3px 3px 0 rgba(0,20,29,0.2),0 2px 4px 0 rgba(0,20,29,0.15);
    display: inline-block;
    margin: 90px 40px 90px 300px;
    max-width: 1000px;
    min-width: 660px;
    width: 100%
}

    .main-content-container.full-width {
        max-width: none
    }

    .main-content-container .header-segment {
        border-bottom: 1px solid #d9e0e4;
        display: flex;
        justify-content: space-between;
        margin: 32px 40px 24px 40px
    }

        .main-content-container .header-segment h1 {
            margin-bottom: 16px
        }

        .main-content-container .header-segment .primary-nav-area {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.5px;
            padding-bottom: 2px;
            text-transform: capitalize
        }

        .main-content-container .header-segment .download-file {
            position: relative;
            top: 24px
        }

            .main-content-container .header-segment .download-file a {
                margin: 0
            }

    .main-content-container .main-content {
        padding: 0px 40px 56px 40px
    }

        .main-content-container .main-content img {
            max-width: 100%
        }

.emphasis-term {
    font-weight: 700
}

.example-img {
    max-width: 50%
}

.field-label {
    font-weight: 600
}

.fixed-height {
    height: 600px
}

.footer {
    background: green;
    display: inline-block;
    height: 0px;
    width: 100vw
}

.headline {
    border-bottom: 1px solid #CCD6DB;
    padding: 0px 0px 8px 0px;
    margin: 0px 0px 32px 0px
}

.logo-example {
    margin-bottom: 64px
}

.new {
    background-color: #090;
    color: white;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-right: 4px;
    padding: 2px 6px;
    text-transform: uppercase
}

.pod.full-width, .pod-dark.full-width, .pod-light-slate.full-width {
    max-width: 100%
}

.pod img, .pod-dark img, .pod-light-slate img {
    max-width: 100%;
    max-height: 100%;
    margin-bottom: 56px
}

.rainbow {
    background-image: url("/visuals/rainbow.png");
    background-size: cover;
    max-width: 100%
}

.pod-dark {
    background-color: #001a25
}

.pod-light-slate {
    background-color: #f2f5f6
}

.small-illustration {
    max-width: 50% !important
}

.spot-icon-example {
    height: 48px
}

.summary-tile {
    width: 320px;
    height: 128px;
    padding: 32px;
    background-color: #FFFFFF
}

.summary-tile-title {
    font-size: 14px;
    line-height: 21px
}

.tile-container, .fonts-container {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    margin-bottom: 85px
}

    .tile-container .tile, .fonts-container .tile {
        width: 400px
    }

    .tile-container .font, .fonts-container .font {
        width: 250px
    }

.copy-to-clipboard {
    cursor: copy;
    position: relative
}

    .copy-to-clipboard:before {
        background: #001a25;
        bottom: -20px;
        color: white;
        content: 'Click to copy';
        box-sizing: border-box;
        display: block;
        font-size: 12px;
        left: 50%;
        line-height: 16px;
        margin-left: -50px;
        opacity: 0;
        padding: 8px;
        position: absolute;
        text-align: center;
        transition: all 0.2s ease;
        visibility: hidden;
        width: 100px;
        z-index: 9
    }

    .copy-to-clipboard:hover:before {
        opacity: 1;
        visibility: visible
    }

.system-message.system-toast.success-message.copied-to-clipboard {
    opacity: 0;
    visibility: hidden
}

.system-message.system-toast.copied-to-clipboard {
    left: 50%;
    margin-left: -96px;
    opacity: 0;
    position: fixed;
    top: 60px;
    visibility: hidden;
    z-index: 9999
}

.standard-list, .ordered-list {
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 32px;
    max-width: 560px
}

    .standard-list .bold, .ordered-list .bold {
        font-weight: 700
    }

    .standard-list li, .ordered-list li {
        margin: 0px 0px 16px 18px
    }

        .standard-list li > ul, .ordered-list li > ul {
            color: rgba(0,0,0,0.9);
            margin-top: 24px;
            margin-left: 18px
        }

.standard-list {
    list-style: square
}

.ordered-list {
    list-style-type: decimal
}

.version-number {
    bottom: 32px;
    position: fixed;
    right: 32px
}

    .version-number .version-link {
        color: rgba(255,255,255,0.8);
        font-weight: 700;
        text-decoration: none
    }

.website-h1-super {
    font-family: 'Open Sans', sans-serif;
    font-size: 64px;
    line-height: 74px;
    font-weight: 600
}

.website-h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 56px;
    line-height: 66px;
    font-weight: 600
}

.website-h2 {
    font-family: 'Open Sans', sans-serif;
    font-size: 48px;
    line-height: 58px;
    font-weight: 600
}

.website-h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 40px;
    line-height: 48px;
    font-weight: 600
}

.website-h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 32px;
    line-height: 42px;
    font-weight: 600
}

.website-h5 {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    line-height: 34px;
    font-weight: 600
}

.website-h6 {
    font-family: 'Open Sans', sans-serif;
    font-size: 24px;
    line-height: 34px;
    font-weight: 200
}

.website-h7 {
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600
}

.website-body-large {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400
}

.website-body-standard {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400
}

.header-example {
    background-color: white;
    height: 48px
}

    .header-example .logo-container {
        margin-left: 40px
    }

.logo-container {
    display: flex;
    padding-top: 5px;
    text-decoration: none
}

    .logo-container:hover {
        text-decoration: none
    }

    .logo-container .text-access {
        height: 23px;
        position: relative;
        top: 4px;
        width: 58px;
    }

    .logo-container .text-logo {
        border-left: 1px solid rgba(0,0,0,0.3);
        color: rgba(0,0,0,0.55);
        font-family: 'Open Sans';
        font-size: 16px;
        font-weight: 400;
        height: 28px;
        line-height: 27px;
        margin-left: 16px;
        padding: 2px 16px;
        white-space: nowrap
    }

.homepage-wrapper .sage-logo {
    height: 26px;
    position: relative;
    top: 8px
}

.homepage-wrapper .text-logo {
    border-color: white;
    color: white;
    font-size: 24px;
    font-weight: 400;
    height: 38px;
    padding: 7px 16px;
    margin-left: 16px
}

.header-example > .logo-container > .text-logo {
    color: rgba(0,0,0,0.55);
    border-left: 1px solid rgba(0,0,0,0.3);
    font-weight: 700
}

[class^="icon-"]:before, [class*=" icon-"]:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: sagearmonyeicons;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: 16px;
    vertical-align: middle
}


.icon-feedback:before {
    content: ""
}

.icon-info:before {
    content: "\0049";
    color: #0077C8;
    font-size: 14px;
}

.icon-help:before {
    content: "\66"
}

.icon-settings:before {
    content: "\2217"
}

.icon-profile:before {
    content: "\0064"
}

.icon-mfa:before {
    content: "\EA56"
}

.icon-unlock:before {
    content: "\EA09"
}

.icon-logout:before {
    content: "\0048"
}

.icon-login:before {
    content: "\005B";
}

.icon-pdf:before {
    -webkit-font-smoothing: none;
    content: ""
}

.icon-csv:before {
    -webkit-font-smoothing: none;
    content: ""
}

.icon-copy:before {
    -webkit-font-smoothing: none;
    content: "\E91B";
    font-family: CarbonIcons;
}

.icon-error:before {
    content: ""
}

.icon-calendar:before {
    -webkit-font-smoothing: none;
    content: ""
}

.icon-analysis:before {
    content: ""
}

.icon-people:before {
    content: ""
}

.icon-dropdown:before {
    content: ""
}

.icon-alert:before {
    content: ""
}

.icon-person:before {
    content: ""
}

.icon-search:before {
    content: "\0043"
}

.icon-cross:before {
    content: "\0078"
}

.icon-close:before {
    content: ""
}

.icon-delete:before {
    content: ""
}

.icon-message:before {
    content: ""
}

.icon-messages:before {
    content: ""
}

.icon-email:before {
    content: ""
}

.icon-edit:before {
    content: ""
}

.icon-print:before {
    -webkit-font-smoothing: none;
    content: ""
}

.icon-clock:before {
    content: ""
}

.icon-euro:before {
    content: "t"
}

.icon-home:before {
    content: ""
}

.icon-cart:before {
    content: ""
}

.icon-bulk_destroy:before {
    content: ""
}

.icon-hide:before {
    content: "w"
}

.icon-warning:before {
    content: ""
}

.icon-question:before {
    content: "\0066"
}

.icon-tick:before {
    content: "v"
}

.icon-none:before {
    content: " "
}

.icon-add:before {
    content: ""
}

.icon-services:before {
    content: "+"
}

.icon-collaborate:before {
    content: ""
}

.icon-graph:before {
    content: ""
}

.icon-plus:before {
    content: ""
}

.icon-plus-sign:before {
    content: "\002B"
}

.icon-true_tick:before {
    content: ""
}

.icon-arrow:before {
    content: ""
}

.icon-old_warning:before {
    content: ""
}

.icon-settings_old:before {
    content: ""
}

.icon-go:before {
    content: ""
}

.icon-question_mark:before {
    content: ""
}

.icon-admin:before {
    content: ""
}

.icon-contacts:before {
    content: ""
}

.icon-create:before {
    content: ""
}

.icon-piggy_bank:before {
    content: ""
}

.icon-entry:before {
    content: ""
}

.icon-edited:before {
    content: ""
}

.icon-refresh:before {
    content: ""
}

.icon-sync:before {
    content: ""
}

.icon-fax:before {
    -webkit-font-smoothing: none;
    content: ""
}

.icon-shop:before {
    content: "\004F"
}

.icon-attach:before {
    content: ""
}

.icon-filter:before {
    content: ""
}

.icon-chat:before {
    content: ""
}

.icon-duplicate:before {
    -webkit-font-smoothing: none;
    content: ""
}

.icon-call:before {
    content: ""
}

.icon-favourite:before {
    content: ""
}

.icon-favourite_lined:before {
    content: ""
}
.icon-address-book:before {
    content: "\E0B1"
}

.icon-pause:before {
    content: "\E0B5"
}

.icon-resend:before {
    content: "\E0C0"
}

.icon-pencil-edit:before {
    content: "V"
}

.master-provider {
    position: relative;
    display: inline-block;
    height: 29px;
    top: 3px;
}

    .master-provider i:before {
        content: "\E94E";
        font-family: CarbonIcons;
    }

    .master-provider .not-master-provider i:before {
        color: rgba(0, 0, 0, 0.65)
    }

    .master-provider .provider-disabled {
        cursor: default;
        pointer-events: none;
        color: rgba(0, 0, 0, 0.3);
    }

    .master-provider .is-master-provider i:before {
        content: "\E94F";
        font-family: CarbonIcons;
        color: rgba(233, 100, 0, 1)
    }

.sync-status-icon {
    position: relative;
    display: inline-block;
    height: 29px;
    top: 3px;
}

.icon-sync_complete:after {
    color: #00b000;
    content: "\E950";
    font-family: CarbonIcons;
}

.icon-sync_not_complete:after {
    color: orange;
    content: "\E924";
    font-family: CarbonIcons;
}

.icon-sync_not_supported:after {
    color: rgba(0, 0, 0, 0);
    content: "\E924";
    font-family: CarbonIcons;
}

.icon-details:after {
    font-family: sagearmonyeicons;
    content: '\0076';
    color: black;
}

.icon-provisioning_complete:after {
    font-family: sagearmonyeicons;
    content: '\03BD';
    color: green;
}

.icon-provisioning_processing:after {
    font-family: sagearmonyeicons;
    content: '\0034';
    color: orange;
}

.icon-provisioning_notstarted:after {
    font-family: sagearmonyeicons;
    content: '\0078';
    color: red;
}

.icon-mail:after {
    font-family: sagearmonyeicons;
    content: '\0042';
    color: black;
}

.icon-sort_up:before {
    content: ""
}

.icon-sort_down:before {
    content: ""
}

.icon-link:before {
    content: ""
}

.icon-locked:before {
    content: ""
}

.icon-unlocked:before {
    content: ""
}

.icon-caret_down:before {
    content: ""
}

.icon-draft:before {
    content: ""
}

.icon-chart_line:before {
    content: ""
}

.icon-chart_bar:before {
    content: ""
}

.icon-chart_pie:before {
    content: ""
}

.icon-in_progress:before {
    content: ""
}

.icon-progressed:before {
    content: ""
}

.icon-save:before {
    content: "\E035"
}

.icon-image:before {
    content: ""
}

.icon-camera:before {
    content: ""
}

.icon-arrow_up:before {
    content: ""
}

.icon-arrow_down:before {
    content: ""
}

.icon-arrow_left:before {
    content: ""
}

.icon-arrow_right:before {
    content: ""
}

.icon-chevron_up:before {
    content: ""
}

.icon-chevron_down:before {
    content: ""
}

.icon-chevron_left:before {
    content: "\00AB"
}

.icon-chevron_right:before {
    content: "\00BB"
}

.icon-download:before {
    content: ""
}

.icon-upload:before {
    content: ""
}

.icon-uploaded:before {
    content: ""
}

.icon-folder:before {
    content: ""
}

.icon-share:before {
    content: ""
}

.icon-gift:before {
    content: ""
}

.icon-mobile:before {
    content: ""
}

.icon-fit_height:before {
    content: ""
}

.icon-fit_width:before {
    content: ""
}

.icon-blocked:before {
    content: ""
}

.icon-blocked_square:before {
    content: ""
}

.icon-drag:before {
    content: ""
}

.icon-drag_vertical:before {
    content: ""
}

.icon-list_view:before {
    content: ""
}

.icon-card_view:before {
    content: ""
}

.icon-minus:before {
    content: ""
}

.icon-business:before {
    content: ""
}

.icon-key:before {
    content: ""
}

.icon-credit_card:before {
    content: ""
}

.icon-marker:before {
    content: ""
}

.icon-delivery:before {
    content: ""
}

.icon-filter_new:before {
    content: "\E027"
}

.icon-view:before {
    -webkit-font-smoothing: none;
    content: "\E957";
    font-family: CarbonIcons;
}

.icon-disputed:before {
    content: ""
}

.icon-connect:before {
    content: ""
}

.icon-chat_notes:before {
    content: ""
}

.icon-talk:before {
    content: ""
}

.icon-split:before {
    content: "\EA5E";
}

.icon-disconnect:before {
    content: ""
}

.icon-accounts:before {
    content: "1"
}

.icon-accounts_extra:before {
    content: "1"
}

.icon-cashbook:before {
    content: "1"
}

.icon-payroll:before {
    content: "2"
}

.icon-insert_row:before {
    content: "A"
}

.icon-book:before {
    content: "D"
}

.icon-bank:before {
    content: "G"
}

.icon-new:before {
    content: "k"
}

.header {
    background: white;
    border-bottom: 1px solid #ccd6db;
    box-shadow: none;
    display: flex;
    flex-flow: row nowrap;
    height: 48px;
    position: fixed;
    transition: all 0.2s ease;
    justify-content: space-between;
    width: 100vw;
    z-index: 1;
    order: 1;
}

.sticky-navigation .header {
    box-shadow: 0 5px 5px 0 rgba(0,20,29,0.2),0 10px 10px 0 rgba(0,20,29,0.1)
}

.header .logo-container {
    order: 1;
    margin-left: 40px;
}

.header .action-global-search {
    cursor: pointer;
    height: 16px;
    margin: auto 40px auto 0px;
    order: 2;
    padding: 8px;
    position: relative;
    width: 16px;
}

    .header .action-global-search .icon {
        left: -8px;
        position: relative;
        top: -9px
    }

        .header .action-global-search .icon:before {
            color: rgba(0,0,0,0.55)
        }

.navigation-container {
    font-size: 16px;
    font-weight: 700;
    padding-top: 80px
}

    .navigation-container a {
        text-decoration: none;
        display: block;
        width: 100%
    }

        .navigation-container a:focus {
            outline: 3px solid #FFB500;
            outline-offset: 0
        }

    .navigation-container .primary-menu {
        background: transparent;
        box-shadow: none;
        display: flex;
        flex-wrap: wrap;
        left: 40px;
        position: absolute;
        width: 219px
    }

        .navigation-container .primary-menu li {
            color: rgba(0,0,0,0.9);
            cursor: pointer;
            display: none;
            font-weight: 600;
            order: 1;
            margin: 4px 0px;
            padding: 16px 0px 16px 32px;
            width: 100%
        }

            .navigation-container .primary-menu li.selected {
                display: block;
                font-weight: bold;
                order: 0;
                padding: 18px 0px 24px 16px;
                width: 100%;
                font-size: 22px
            }

                .navigation-container .primary-menu li.selected:hover {
                    background: #e6ebed
                }

                .navigation-container .primary-menu li.selected:after {
                    border-left: 6px solid transparent;
                    border-right: 6px solid transparent;
                    border-top: 6px solid rgba(0,0,0,0.9);
                    content: " ";
                    height: 0;
                    left: 14px;
                    position: relative;
                    top: 22px;
                    width: 0
                }

        .navigation-container .primary-menu.visible {
            background: white;
            box-shadow: 0 10px 20px 0 rgba(0,20,29,0.3),0 20px 40px 0 rgba(0,20,29,0.2),inset 0 0 1px 0 rgba(0,20,29,0.3)
        }

            .navigation-container .primary-menu.visible li {
                color: rgba(0,0,0,0.9);
                display: block;
                font-size: 16px
            }

                .navigation-container .primary-menu.visible li:hover {
                    background: #e6ebed;
                    color: rgba(0,0,0,0.9)
                }

                .navigation-container .primary-menu.visible li.selected {
                    font-size: 22px
                }

                    .navigation-container .primary-menu.visible li.selected:hover {
                        background-color: white;
                        color: rgba(0,0,0,0.9)
                    }

                    .navigation-container .primary-menu.visible li.selected:after {
                        border-top: 6px solid black
                    }

    .navigation-container .secondary-menu {
        display: none;
        margin-top: 72px;
        padding: 0 0 56px 40px
    }

        .navigation-container .secondary-menu .current-page {
            background-color: white;
            border-right: 6px solid #004e00;
            color: rgba(0,0,0,0.85)
        }

        .navigation-container .secondary-menu li a {
            color: rgba(0,0,0,0.65);
            font-size: 14px;
            font-weight: 900;
            list-style: none;
            max-width: 212px;
            padding: 16px 0px 16px 16px
        }

            .navigation-container .secondary-menu li a:hover {
                background: #e6ebed;
                color: rgba(0,0,0,0.9);
                outline: none
            }

        .navigation-container .secondary-menu.visible {
            display: block
        }

[data-secondary-menu="foundations-summary"] .navigation-container .secondary-menu .menu-foundations-summary a, [data-secondary-menu="principles"] .navigation-container .secondary-menu .menu-principles a, [data-secondary-menu="accessibility"] .navigation-container .secondary-menu .menu-accessibility a, [data-secondary-menu="colour"] .navigation-container .secondary-menu .menu-colour a, [data-secondary-menu="cursor"] .navigation-container .secondary-menu .menu-cursor a, [data-secondary-menu="grid"] .navigation-container .secondary-menu .menu-grid a, [data-secondary-menu="icons"] .navigation-container .secondary-menu .menu-icons a, [data-secondary-menu="illustration"] .navigation-container .secondary-menu .menu-illustration a, [data-secondary-menu="logo"] .navigation-container .secondary-menu .menu-logo a, [data-secondary-menu="shadows"] .navigation-container .secondary-menu .menu-shadows a, [data-secondary-menu="spatial"] .navigation-container .secondary-menu .menu-spatial a, [data-secondary-menu="text-font"] .navigation-container .secondary-menu .menu-text-font a, [data-secondary-menu="components-summary"] .navigation-container .secondary-menu .menu-components-summary a, [data-secondary-menu="accordions"] .navigation-container .secondary-menu .menu-accordions a, [data-secondary-menu="action-popovers"] .navigation-container .secondary-menu .menu-action-popovers a, [data-secondary-menu="button-bar"] .navigation-container .secondary-menu .menu-button-bar a, [data-secondary-menu="button-toggle"] .navigation-container .secondary-menu .menu-button-toggle a, [data-secondary-menu="buttons"] .navigation-container .secondary-menu .menu-buttons a, [data-secondary-menu="cards-tiles"] .navigation-container .secondary-menu .menu-cards-tiles a, [data-secondary-menu="carousel"] .navigation-container .secondary-menu .menu-carousel a, [data-secondary-menu="checkboxes"] .navigation-container .secondary-menu .menu-checkboxes a, [data-secondary-menu="datepicker"] .navigation-container .secondary-menu .menu-datepicker a, [data-secondary-menu="date-range"] .navigation-container .secondary-menu .menu-date-range a, [data-secondary-menu="decimal-inputs"] .navigation-container .secondary-menu .menu-decimal-inputs a, [data-secondary-menu="dialogs"] .navigation-container .secondary-menu .menu-dialogs a, [data-secondary-menu="dropdowns"] .navigation-container .secondary-menu .menu-dropdowns a, [data-secondary-menu="fieldsets"] .navigation-container .secondary-menu .menu-fieldsets a, [data-secondary-menu="flashes"] .navigation-container .secondary-menu .menu-flashes a, [data-secondary-menu="full-screen-dialogs"] .navigation-container .secondary-menu .menu-full-screen-dialogs a, [data-secondary-menu="header"] .navigation-container .secondary-menu .menu-header a, [data-secondary-menu="links"] .navigation-container .secondary-menu .menu-links a, [data-secondary-menu="messages"] .navigation-container .secondary-menu .menu-messages a, [data-secondary-menu="multi-action-buttons"] .navigation-container .secondary-menu .menu-multi-action-buttons a, [data-secondary-menu="navigation"] .navigation-container .secondary-menu .menu-navigation a, [data-secondary-menu="number-inputs"] .navigation-container .secondary-menu .menu-number-inputs a, [data-secondary-menu="pills-badges"] .navigation-container .secondary-menu .menu-pills-badges a, [data-secondary-menu="punctuated-inputs"] .navigation-container .secondary-menu .menu-punctuated-inputs a, [data-secondary-menu="global-search-bar"] .navigation-container .secondary-menu .menu-global-search-bar a, [data-secondary-menu="radios"] .navigation-container .secondary-menu .menu-radios a, [data-secondary-menu="spinners"] .navigation-container .secondary-menu .menu-spinners a, [data-secondary-menu="sidebar"] .navigation-container .secondary-menu .menu-sidebar a, [data-secondary-menu="split-buttons"] .navigation-container .secondary-menu .menu-split-buttons a, [data-secondary-menu="switches"] .navigation-container .secondary-menu .menu-switches a, [data-secondary-menu="tables"] .navigation-container .secondary-menu .menu-tables a, [data-secondary-menu="tabs"] .navigation-container .secondary-menu .menu-tabs a, [data-secondary-menu="text-inputs"] .navigation-container .secondary-menu .menu-text-inputs a, [data-secondary-menu="textareas"] .navigation-container .secondary-menu .menu-textareas a, [data-secondary-menu="step-flows"] .navigation-container .secondary-menu .menu-step-flows a, [data-secondary-menu="patterns-summary"] .navigation-container .secondary-menu .menu-patterns-summary a, [data-secondary-menu="empty-states"] .navigation-container .secondary-menu .menu-empty-states a, [data-secondary-menu="errors-validation"] .navigation-container .secondary-menu .menu-errors-validation a, [data-secondary-menu="forms"] .navigation-container .secondary-menu .menu-forms a, [data-secondary-menu="help-tooltips"] .navigation-container .secondary-menu .menu-help-tooltips a, [data-secondary-menu="hero-banners"] .navigation-container .secondary-menu .menu-hero-banners a, [data-secondary-menu="ipd-tooltips"] .navigation-container .secondary-menu .menu-ipd-tooltips a, [data-secondary-menu="ipd-notifications"] .navigation-container .secondary-menu .menu-ipd-notifications a, [data-secondary-menu="product-compare"] .navigation-container .secondary-menu .menu-product-compare a, [data-secondary-menu="live-chat"] .navigation-container .secondary-menu .menu-live-chat a, [data-secondary-menu="timeline"] .navigation-container .secondary-menu .menu-timeline a, [data-secondary-menu="ftu"] .navigation-container .secondary-menu .menu-ftu a, [data-secondary-menu="heroes-summary"] .navigation-container .secondary-menu .menu-heroes-summary a, [data-secondary-menu="connect-bank"] .navigation-container .secondary-menu .menu-connect-bank a, [data-secondary-menu="create-invoice"] .navigation-container .secondary-menu .menu-create-invoice a, [data-secondary-menu="dashboards"] .navigation-container .secondary-menu .menu-dashboards a, [data-secondary-menu="payment"] .navigation-container .secondary-menu .menu-payment a, [data-secondary-menu="salesforce-summary"] .navigation-container .secondary-menu .menu-salesforce-summary a, [data-secondary-menu="content-summary"] .navigation-container .secondary-menu .menu-content-summary a, [data-secondary-menu="content-principles"] .navigation-container .secondary-menu .menu-content-principles a, [data-secondary-menu="content-voice"] .navigation-container .secondary-menu .menu-content-voice-and-tone a, [data-secondary-menu="content-words"] .navigation-container .secondary-menu .menu-content-words a, [data-secondary-menu="content-advice"] .navigation-container .secondary-menu .menu-content-advice-for-writing a, [data-secondary-menu="content-types"] .navigation-container .secondary-menu .menu-content-writing-content-types a, [data-secondary-menu="content-structure"] .navigation-container .secondary-menu .menu-content-structuring-content a, [data-secondary-menu="content-style"] .navigation-container .secondary-menu .menu-content-style a, [data-secondary-menu="mobile-summary"] .navigation-container .secondary-menu .menu-mobile-summary a, [data-secondary-menu="components"] .navigation-container .secondary-menu .menu-components a, [data-secondary-menu="create"] .navigation-container .secondary-menu .menu-create a, [data-secondary-menu="errors"] .navigation-container .secondary-menu .menu-errors a, [data-secondary-menu="mobile-header-bar"] .navigation-container .secondary-menu .menu-mobile-header-bar a, [data-secondary-menu="actions"] .navigation-container .secondary-menu .menu-actions a, [data-secondary-menu="typography"] .navigation-container .secondary-menu .menu-typography a, [data-secondary-menu="windows-summary"] .navigation-container .secondary-menu .menu-windows-summary a, [data-secondary-menu="windows-appbar"] .navigation-container .secondary-menu .menu-windows-appbar a, [data-secondary-menu="windows-icons"] .navigation-container .secondary-menu .menu-windows-app-icons a, [data-secondary-menu="windows-foundations"] .navigation-container .secondary-menu .menu-windows-foundations a, [data-secondary-menu="windows-interface"] .navigation-container .secondary-menu .menu-windows-interface a, [data-secondary-menu="windows-navigation"] .navigation-container .secondary-menu .menu-windows-navigation a, [data-secondary-menu="windows-splash-screens"] .navigation-container .secondary-menu .menu-windows-splash-screens a, [data-secondary-menu="windows-wizards"] .navigation-container .secondary-menu .menu-windows-wizards a, [data-secondary-menu="community-backlog"] .navigation-container .secondary-menu .menu-community-backlog a, [data-secondary-menu="community-propose-component"] .navigation-container .secondary-menu .menu-community-propose-component a {
    background: #d9e0e4;
    border-left: solid 4px #090;
    color: rgba(0,0,0,0.9)
}

@keyframes animate-segment {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0px)
    }
}

body.homepage {
    align-items: center;
    background: linear-gradient(-45deg, #00A376 0%, #0077C8 50%, #582C83 100%);
    display: flex
}

    body.homepage #gradient {
        height: 100vh;
        left: 0;
        position: fixed;
        top: 0;
        width: 100vw;
        z-index: 1
    }

    body.homepage .homepage-wrapper {
        margin: auto;
        max-width: 900px;
        position: relative;
        transition: opacity 0.2s ease;
        z-index: 2
    }

        body.homepage .homepage-wrapper .logo-container {
            justify-content: center;
            margin-bottom: 40px
        }

        body.homepage .homepage-wrapper .sub-title {
            color: white;
            font-size: 18px;
            font-weight: 400;
            line-height: 27px;
            margin: 0px auto 56px;
            text-align: center
        }

    body.homepage .segments {
        display: flex;
        height: 50vh;
        margin: auto;
        max-width: 1000px;
        padding: 0px 32px;
        width: 100%
    }

        body.homepage .segments .segment {
            animation: animate-segment 0.5s 1 ease forwards;
            margin-right: 32px;
            opacity: 0;
            position: relative;
            width: 30%
        }

            body.homepage .segments .segment:last-child {
                margin-right: 0
            }

            body.homepage .segments .segment h3 {
                margin-bottom: 24px;
                text-align: center
            }

            body.homepage .segments .segment .segment-link {
                background: white;
                box-shadow: 0 3px 3px 0 rgba(0,20,29,0.2),0 2px 4px 0 rgba(0,20,29,0.15);
                color: rgba(0,0,0,0.9);
                display: block;
                font-weight: 400;
                padding-top: 24px;
                text-decoration: none;
                transition: all 0.2s cubic-bezier(0.25, 0.25, 0, 1.5)
            }

                body.homepage .segments .segment .segment-link:hover {
                    box-shadow: 0 10px 20px 0 rgba(0,20,29,0.2),0 20px 40px 0 rgba(0,20,29,0.1);
                    transform: scale(1.02)
                }

                body.homepage .segments .segment .segment-link p {
                    background: #f2f5f6;
                    padding: 24px
                }

            body.homepage .segments .segment .segment-icon {
                height: 60px;
                margin: 0px auto 16px;
                width: 70px
            }

            body.homepage .segments .segment.foundations-segment {
                animation-delay: 0.3s
            }

                body.homepage .segments .segment.foundations-segment .segment-icon {
                    background: url("../visuals/icon-foundations.svg")
                }

            body.homepage .segments .segment.components-segment {
                animation-delay: 0.5s
            }

                body.homepage .segments .segment.components-segment .segment-icon {
                    background: url("../visuals/icon-components.svg")
                }

            body.homepage .segments .segment.hero-flows-segment {
                animation-delay: 0.7s
            }

                body.homepage .segments .segment.hero-flows-segment .segment-icon {
                    background: url("../visuals/icon-heroes.svg")
                }

            body.homepage .segments .segment.content-segment {
                animation-delay: 0.9s
            }

                body.homepage .segments .segment.content-segment .segment-icon {
                    background: url("../visuals/icon-content.svg")
                }

.dls-table {
    background-color: white;
    border: 1px solid #ccd6db;
    margin-bottom: 32px;
    width: 100%
}

    .dls-table .width-150 {
        width: 150px
    }

    .dls-table th {
        background-color: #f2f5f6;
        font-size: 12px;
        font-weight: 700;
        height: 56px
    }

    .dls-table tr {
        height: 40px
    }

    .dls-table th, .dls-table td {
        border: 1px solid #CCD6DB;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        line-height: 21px;
        margin-left: 8px;
        padding: 16px;
        text-align: left;
        vertical-align: middle
    }

    .dls-table .right-align {
        text-align: right
    }

.pod-table {
    width: 100%
}

    .pod-table th {
        background-color: #FFF;
        font-weight: 700;
        height: 56px
    }

    .pod-table th, .pod-table td {
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        line-height: 21px;
        margin-left: 8px;
        padding: 10px 10px 10px 16px;
        text-align: left;
        vertical-align: middle
    }

    .pod-table td {
        vertical-align: middle
    }

    .pod-table .right {
        float: right;
        text-align: right
    }

td p, td h1, td h2, td h3, td h4, td h5, td h6, td h7 {
    margin: 0px;
    padding: 0px
}

.dls-product-compare {
    font-family: 'Open Sans';
    font-size: 18px
}

    .dls-product-compare tr {
        border-bottom: 1px solid #CCCCCC;
        border-spacing: 20px
    }

        .dls-product-compare tr:first-of-type {
            border-bottom: 4px solid #090;
            font-weight: 700
        }

        .dls-product-compare tr th, .dls-product-compare tr td {
            padding: 18px
        }

            .dls-product-compare tr th.dls-product-compare-spacer, .dls-product-compare tr td.dls-product-compare-spacer {
                padding: 0px;
                width: 8px
            }

            .dls-product-compare tr th:nth-of-type(even), .dls-product-compare tr td:nth-of-type(even) {
                background-color: rgba(255,255,255,0.05);
                text-align: center;
                vertical-align: middle;
                width: 190px
            }

            .dls-product-compare tr th:first-of-type, .dls-product-compare tr td:first-of-type {
                width: 330px
            }

            .dls-product-compare tr th .dls-product-compare-title, .dls-product-compare tr td .dls-product-compare-title {
                font-size: 18px
            }

            .dls-product-compare tr th .dls-product-compare-detail, .dls-product-compare tr td .dls-product-compare-detail {
                color: rgba(0,0,0,0.55);
                font-size: 14px
            }

            .dls-product-compare tr th .icon-tick, .dls-product-compare tr td .icon-tick {
                color: #003349
            }

                .dls-product-compare tr th .icon-tick::before, .dls-product-compare tr td .icon-tick::before {
                    font-size: 26px
                }

.dls-do-dont-wrapper {
    margin-top: 59px;
    max-width: 1000px
}

    .dls-do-dont-wrapper .dls-do, .dls-do-dont-wrapper .dls-dont, .dls-do-dont-wrapper .dls-neutral {
        display: inline-block;
        margin: 0px 28px 35px 0px;
        vertical-align: top
    }

        .dls-do-dont-wrapper .dls-do .dls-img, .dls-do-dont-wrapper .dls-dont .dls-img, .dls-do-dont-wrapper .dls-neutral .dls-img {
            align-items: center;
            background-color: white;
            border: 1px solid #ccd6db;
            display: flex;
            height: 360px;
            padding: 0px 32px;
            width: 360px
        }

            .dls-do-dont-wrapper .dls-do .dls-img img, .dls-do-dont-wrapper .dls-dont .dls-img img, .dls-do-dont-wrapper .dls-neutral .dls-img img {
                margin: auto;
                max-height: 90%;
                max-width: 90%
            }

                .dls-do-dont-wrapper .dls-do .dls-img img + img, .dls-do-dont-wrapper .dls-dont .dls-img img + img, .dls-do-dont-wrapper .dls-neutral .dls-img img + img {
                    margin-left: 32px
                }

            .dls-do-dont-wrapper .dls-do .dls-img.small, .dls-do-dont-wrapper .dls-dont .dls-img.small, .dls-do-dont-wrapper .dls-neutral .dls-img.small {
                height: 290px;
                width: 290px
            }

            .dls-do-dont-wrapper .dls-do .dls-img.large, .dls-do-dont-wrapper .dls-dont .dls-img.large, .dls-do-dont-wrapper .dls-neutral .dls-img.large {
                height: 450px;
                width: 100%
            }

        .dls-do-dont-wrapper .dls-do figcaption, .dls-do-dont-wrapper .dls-dont figcaption, .dls-do-dont-wrapper .dls-neutral figcaption {
            margin-top: 26px;
            width: 360px
        }

            .dls-do-dont-wrapper .dls-do figcaption.caption-left, .dls-do-dont-wrapper .dls-dont figcaption.caption-left, .dls-do-dont-wrapper .dls-neutral figcaption.caption-left {
                display: inline-block;
                float: left;
                width: 50%
            }

            .dls-do-dont-wrapper .dls-do figcaption.caption-right, .dls-do-dont-wrapper .dls-dont figcaption.caption-right, .dls-do-dont-wrapper .dls-neutral figcaption.caption-right {
                display: inline-block;
                float: right;
                width: 50%
            }

            .dls-do-dont-wrapper .dls-do figcaption.caption-fullwidth, .dls-do-dont-wrapper .dls-dont figcaption.caption-fullwidth, .dls-do-dont-wrapper .dls-neutral figcaption.caption-fullwidth {
                width: 100%
            }

                .dls-do-dont-wrapper .dls-do figcaption.caption-fullwidth figcaption, .dls-do-dont-wrapper .dls-do figcaption.caption-fullwidth p, .dls-do-dont-wrapper .dls-dont figcaption.caption-fullwidth figcaption, .dls-do-dont-wrapper .dls-dont figcaption.caption-fullwidth p, .dls-do-dont-wrapper .dls-neutral figcaption.caption-fullwidth figcaption, .dls-do-dont-wrapper .dls-neutral figcaption.caption-fullwidth p {
                    max-width: 100%;
                    width: 100%
                }

            .dls-do-dont-wrapper .dls-do figcaption .span-do, .dls-do-dont-wrapper .dls-dont figcaption .span-do, .dls-do-dont-wrapper .dls-neutral figcaption .span-do {
                color: #00b000;
                font-weight: 700
            }

            .dls-do-dont-wrapper .dls-do figcaption .span-dont, .dls-do-dont-wrapper .dls-dont figcaption .span-dont, .dls-do-dont-wrapper .dls-neutral figcaption .span-dont {
                color: #C7384F;
                font-weight: 700
            }

        .dls-do-dont-wrapper .dls-do .small + figcaption, .dls-do-dont-wrapper .dls-dont .small + figcaption, .dls-do-dont-wrapper .dls-neutral .small + figcaption {
            width: 290px
        }

        .dls-do-dont-wrapper .dls-do > .dls-img {
            border-left: 8px solid #00b000
        }

            .dls-do-dont-wrapper .dls-do > .dls-img::after, .dls-do-dont-wrapper .dls-dont > .dls-img::after {
                bottom: -42%;
                font-family: CarbonIcons;
                font-size: 24px;
                font-style: normal;
                font-weight: normal;
                line-height: 16px;
                position: relative;
                right: 5%
            }

            .dls-do-dont-wrapper .dls-do > .dls-img::after {
                color: #00b000;
                content: "\e950"
            }

        .dls-do-dont-wrapper .dls-dont > .dls-img::after {
            color: #C7384F;
            content: "\e91d"
        }

        .dls-do-dont-wrapper .dls-dont > .dls-img {
            border-left: 8px solid #C7384F
        }

.content-tab ul {
    border-bottom: 2px solid #d9e0e4;
    margin: 16px 0px 16px 0px;
    width: 100%;
    padding: 8px 0px
}

.content-tab li:first-of-type {
    margin-left: 0px
}

.content-tab li {
    color: rgba(0,0,0,0.55);
    cursor: pointer;
    display: inline;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    margin: 8px;
    padding: 8px 0px
}

    .content-tab li.selected {
        border-bottom: 2px solid #008200;
        color: rgba(0,0,0,0.9)
    }

        .content-tab li.selected:hover {
            border-bottom: 2px solid #008200;
            color: rgba(0,0,0,0.9)
        }

    .content-tab li:hover {
        border-bottom: 2px solid #80c180;
        color: rgba(0,0,0,0.9)
    }

.secondary-tab {
    display: none;
    padding-top: 32px
}

    .secondary-tab.visible {
        display: block
    }

button, .dls-button {
    background-color: #008200;
    border: 0px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-family: 'Open Sans';
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    margin-right: 16px;
    padding-left: 20px;
    padding-right: 20px;
}

    button:focus, .dls-button:focus {
        outline-offset: 0
    }

    button:disabled, .dls-button:disabled {
        background-color: #e6ebed !important;
        color: rgba(0,0,0,0.3) !important;
        pointer-events: none !important
    }

    button:last-of-type, .dls-button:last-of-type {
        margin-right: 0px
    }

    button .icon + span, button span + .icon, .dls-button .icon + span, .dls-button span + .icon {
        margin-left: 8px
    }

    button .icon, .dls-button .icon {
        position: relative;
        top: -2px
    }

    button.size-small, .dls-button.size-small {
        height: 32px;
        line-height: 32px;
        padding: 0px 16px
    }

    button.size-large, .dls-button.size-large {
        font-size: 16px;
        height: 48px;
        padding: 0px 32px
    }

    button.secondary, button.tertiary, .dls-button.secondary, .dls-button.tertiary {
        background-color: transparent;
        color: #008200;
        line-height: 36px
    }

        button.secondary:hover, button.tertiary:hover, .dls-button.secondary:hover, .dls-button.tertiary:hover {
            color: #006800
        }

        button.secondary.size-small, button.tertiary.size-small, .dls-button.secondary.size-small, .dls-button.tertiary.size-small {
            line-height: 28px
        }

    button.secondary, .dls-button.secondary {
        border: 2px solid #008200
    }

        button.secondary:hover, .dls-button.secondary:hover {
            background-color: #006800;
            border-color: #006800;
            color: white
        }

    button.tertiary, .dls-button.tertiary {
        margin-left: 0px;
        margin-right: 0px
    }

    button.business-small, .dls-button.business-small {
        background-color: #00815d
    }

        button.business-small:active, .dls-button.business-small:active {
            background-color: #004d38
        }

        button.business-small.dark-background, .dls-button.business-small.dark-background {
            background: white;
            color: #00815d
        }

            button.business-small.dark-background:hover, .dls-button.business-small.dark-background:hover {
                color: white
            }

        button.business-small:hover, .dls-button.business-small:hover {
            background-color: #00674a
        }

        button.business-small.secondary, button.business-small.tertiary, .dls-button.business-small.secondary, .dls-button.business-small.tertiary {
            background-color: transparent;
            color: #00815d
        }

            button.business-small.secondary:hover, button.business-small.tertiary:hover, .dls-button.business-small.secondary:hover, .dls-button.business-small.tertiary:hover {
                color: #00674a
            }

        button.business-small.secondary, .dls-button.business-small.secondary {
            border: 2px solid #00815d
        }

            button.business-small.secondary:hover, .dls-button.business-small.secondary:hover {
                background-color: #00674a;
                border-color: #00674a;
                color: white
            }

    /*button.business-small.secondary:focus, .dls-button.business-small.secondary:focus {
                background-color: #00674a;
                color: white
            }*/

    button.business-medium, .dls-button.business-medium {
        background-color: #0073c2
    }

        button.business-medium:active, .dls-button.business-medium:active {
            background-color: #004574
        }

        button.business-medium.dark-background, .dls-button.business-medium.dark-background {
            background: white;
            color: #0073c2
        }

            button.business-medium.dark-background:hover, .dls-button.business-medium.dark-background:hover {
                color: white
            }

        button.business-medium:hover, button.business-medium :focus, .dls-button.business-medium:hover, .dls-button.business-medium :focus {
            background-color: #005c9b
        }

        button.business-medium.secondary, button.business-medium.tertiary, .dls-button.business-medium.secondary, .dls-button.business-medium.tertiary {
            background-color: transparent;
            color: #0073c2
        }

            button.business-medium.secondary:hover, button.business-medium.tertiary:hover, .dls-button.business-medium.secondary:hover, .dls-button.business-medium.tertiary:hover {
                color: #005c9b
            }

        button.business-medium.secondary, .dls-button.business-medium.secondary {
            border: 2px solid #0073c2
        }

            button.business-medium.secondary:hover, .dls-button.business-medium.secondary:hover {
                background-color: #005c9b;
                border-color: #005c9b;
                color: white
            }

            button.business-medium.secondary:focus, .dls-button.business-medium.secondary:focus {
                background-color: #005c9b;
                color: white
            }

    button.business-large, .dls-button.business-large {
        background-color: #69418f
    }

        button.business-large:active, .dls-button.business-large:active {
            background-color: #4a2e64
        }

        button.business-large.dark-background, .dls-button.business-large.dark-background {
            background: white;
            color: #69418f
        }

            button.business-large.dark-background:hover, .dls-button.business-large.dark-background:hover {
                color: white
            }

        button.business-large:hover, button.business-large :focus, .dls-button.business-large:hover, .dls-button.business-large :focus {
            background-color: #5f3b81
        }

        button.business-large.secondary, button.business-large.tertiary, .dls-button.business-large.secondary, .dls-button.business-large.tertiary {
            background-color: transparent;
            color: #69418f
        }

            button.business-large.secondary:hover, button.business-large.tertiary:hover, .dls-button.business-large.secondary:hover, .dls-button.business-large.tertiary:hover {
                color: #5f3b81
            }

        button.business-large.secondary, .dls-button.business-large.secondary {
            border: 2px solid #69418f
        }

            button.business-large.secondary:hover, .dls-button.business-large.secondary:hover {
                background-color: #5f3b81;
                border-color: #5f3b81;
                color: white
            }

            button.business-large.secondary:focus, .dls-button.business-large.secondary:focus {
                background-color: #5f3b81;
                color: white
            }

    button.disabled, .dls-button.disabled {
        background-color: #e6ebed;
        color: rgba(0,0,0,0.3)
    }

        button.disabled:hover, .dls-button.disabled:hover {
            background-color: #e6ebed;
            color: rgba(0,0,0,0.3);
            cursor: not-allowed
        }

        button.disabled.secondary, .dls-button.disabled.secondary {
            background-color: transparent;
            border-color: #e6ebed
        }

            button.disabled.secondary:hover, button.disabled.secondary:focus, .dls-button.disabled.secondary:hover, .dls-button.disabled.secondary:focus {
                background-color: transparent;
                color: rgba(0,0,0,0.2)
            }

        button.disabled.tertiary, .dls-button.disabled.tertiary {
            background-color: transparent
        }

            button.disabled.tertiary:hover, .dls-button.disabled.tertiary:hover {
                background-color: transparent;
                text-decoration: none
            }

    button.destructive, .dls-button.destructive {
        background-color: #C7384F;
        color: white
    }

        button.destructive:hover, .dls-button.destructive:hover {
            background-color: #9f2d3f;
            color: white
        }

        button.destructive.secondary, .dls-button.destructive.secondary {
            background-color: transparent;
            border-color: #C7384F;
            color: #C7384F
        }

            button.destructive.secondary:hover, .dls-button.destructive.secondary:hover {
                background-color: #9f2d3f;
                border-color: #9f2d3f;
                color: white
            }

            button.destructive.secondary:focus, .dls-button.destructive.secondary:focus {
                background-color: #9f2d3f;
                color: white
            }

        button.destructive.tertiary, .dls-button.destructive.tertiary {
            background-color: transparent;
            color: #C7384F
        }

            button.destructive.tertiary:hover, .dls-button.destructive.tertiary:hover {
                background-color: transparent;
                color: #9f2d3f
            }

    button.marketing, .dls-button.marketing {
        background: #090;
        border-width: 1px;
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        font-weight: 400
    }

        button.marketing:hover, .dls-button.marketing:hover {
            background-color: #007a00
        }

        button.marketing.secondary, button.marketing.tertiary, .dls-button.marketing.secondary, .dls-button.marketing.tertiary {
            background-color: transparent;
            color: #090
        }

            button.marketing.secondary:hover, button.marketing.tertiary:hover, .dls-button.marketing.secondary:hover, .dls-button.marketing.tertiary:hover {
                color: #007a00
            }

        button.marketing.secondary, .dls-button.marketing.secondary {
            border: 2px solid #090
        }

            button.marketing.secondary:hover, .dls-button.marketing.secondary:hover {
                background-color: #007a00;
                border-color: #007a00;
                color: white
            }

        button.marketing.size-small, .dls-button.marketing.size-small {
            width: 128px
        }

        button.marketing.size-large, .dls-button.marketing.size-large {
            width: 256px
        }

        button.marketing.business-small, .dls-button.marketing.business-small {
            background: #00A376
        }

            button.marketing.business-small:hover, .dls-button.marketing.business-small:hover {
                background: #00825e
            }

            button.marketing.business-small.secondary, button.marketing.business-small.tertiary, .dls-button.marketing.business-small.secondary, .dls-button.marketing.business-small.tertiary {
                background-color: transparent;
                color: #00A376
            }

                button.marketing.business-small.secondary:hover, button.marketing.business-small.tertiary:hover, .dls-button.marketing.business-small.secondary:hover, .dls-button.marketing.business-small.tertiary:hover {
                    color: #00825e
                }

            button.marketing.business-small.secondary, .dls-button.marketing.business-small.secondary {
                border: 2px solid #00A376
            }

                button.marketing.business-small.secondary:hover, .dls-button.marketing.business-small.secondary:hover {
                    background-color: #00825e;
                    border-color: #00825e;
                    color: white
                }

        button.marketing.business-medium, .dls-button.marketing.business-medium {
            background: #0077C8
        }

            button.marketing.business-medium:hover, .dls-button.marketing.business-medium:hover {
                background: #005fa0
            }

            button.marketing.business-medium.secondary, button.marketing.business-medium.tertiary, .dls-button.marketing.business-medium.secondary, .dls-button.marketing.business-medium.tertiary {
                background-color: transparent;
                color: #0077C8
            }

                button.marketing.business-medium.secondary:hover, button.marketing.business-medium.tertiary:hover, .dls-button.marketing.business-medium.secondary:hover, .dls-button.marketing.business-medium.tertiary:hover {
                    color: #005fa0
                }

            button.marketing.business-medium.secondary, .dls-button.marketing.business-medium.secondary {
                border: 2px solid #0077C8
            }

                button.marketing.business-medium.secondary:hover, .dls-button.marketing.business-medium.secondary:hover {
                    background-color: #005fa0;
                    border-color: #005fa0;
                    color: white
                }

        button.marketing.business-large, .dls-button.marketing.business-large {
            background: #582C83
        }

            button.marketing.business-large:hover, .dls-button.marketing.business-large:hover {
                background: #462369
            }

            button.marketing.business-large.secondary, button.marketing.business-large.tertiary, .dls-button.marketing.business-large.secondary, .dls-button.marketing.business-large.tertiary {
                background-color: transparent;
                color: #582C83
            }

                button.marketing.business-large.secondary:hover, button.marketing.business-large.tertiary:hover, .dls-button.marketing.business-large.secondary:hover, .dls-button.marketing.business-large.tertiary:hover {
                    color: #462369
                }

            button.marketing.business-large.secondary, .dls-button.marketing.business-large.secondary {
                border: 2px solid #582C83
            }

                button.marketing.business-large.secondary:hover, .dls-button.marketing.business-large.secondary:hover {
                    background-color: #462369;
                    border-color: #462369;
                    color: white
                }

        button.marketing.dark-background, .dls-button.marketing.dark-background {
            background: white;
            color: rgba(0,0,0,0.9)
        }

            button.marketing.dark-background:hover, .dls-button.marketing.dark-background:hover {
                background: white;
                color: rgba(0,0,0,0.9)
            }

            button.marketing.dark-background.secondary, .dls-button.marketing.dark-background.secondary {
                background-color: transparent;
                border: 2px solid white;
                color: white
            }

                button.marketing.dark-background.secondary:hover, .dls-button.marketing.dark-background.secondary:hover {
                    background-color: transparent;
                    border: 2px solid white;
                    color: white
                }

    button.split-button, .dls-button.split-button {
        left: -2px;
        margin-right: 16px;
        padding: 0 8px;
        position: relative
    }

        button.split-button ul, .dls-button.split-button ul {
            position: absolute;
            right: -2px;
            top: 36px;
            visibility: hidden
        }

        button.split-button li, .dls-button.split-button li {
            height: 40px;
            line-height: 40px;
            padding: 0 24px;
            white-space: nowrap
        }

        button.split-button:hover ul, .dls-button.split-button:hover ul {
            visibility: visible
        }

            button.split-button:hover ul li, .dls-button.split-button:hover ul li {
                background-color: #006800
            }

                button.split-button:hover ul li:hover, .dls-button.split-button:hover ul li:hover {
                    background-color: #004e00
                }

        button.split-button.business-small ul li, .dls-button.split-button.business-small ul li {
            background-color: #00674a
        }

            button.split-button.business-small ul li:hover, .dls-button.split-button.business-small ul li:hover {
                background-color: #004d38
            }

        button.split-button.business-medium ul li, .dls-button.split-button.business-medium ul li {
            background-color: #005c9b
        }

            button.split-button.business-medium ul li:hover, .dls-button.split-button.business-medium ul li:hover {
                background-color: #004574
            }

        button.split-button.business-large ul li, .dls-button.split-button.business-large ul li {
            background-color: #5f3b81
        }

            button.split-button.business-large ul li:hover, .dls-button.split-button.business-large ul li:hover {
                background-color: #4a2e64
            }

    button.split-button-main, .dls-button.split-button-main {
        margin-right: 0px !important
    }

    button.multi-button, .dls-button.multi-button {
        position: relative
    }

        button.multi-button ul, .dls-button.multi-button ul {
            left: -2px;
            position: absolute;
            top: 36px;
            visibility: hidden
        }

        button.multi-button li, .dls-button.multi-button li {
            height: 40px;
            line-height: 40px;
            padding: 0 24px;
            white-space: nowrap
        }

        button.multi-button:hover ul, .dls-button.multi-button:hover ul {
            visibility: visible
        }

            button.multi-button:hover ul li, .dls-button.multi-button:hover ul li {
                background-color: #006800
            }

                button.multi-button:hover ul li:hover, .dls-button.multi-button:hover ul li:hover {
                    background-color: #004e00
                }

        button.multi-button.business-small ul li, .dls-button.multi-button.business-small ul li {
            background-color: #00674a
        }

            button.multi-button.business-small ul li:hover, .dls-button.multi-button.business-small ul li:hover {
                background-color: #004d38
            }

        button.multi-button.business-medium ul li, .dls-button.multi-button.business-medium ul li {
            background-color: #005c9b
        }

            button.multi-button.business-medium ul li:hover, .dls-button.multi-button.business-medium ul li:hover {
                background-color: #004574
            }

        button.multi-button.business-large ul li, .dls-button.multi-button.business-large ul li {
            background-color: #5f3b81
        }

            button.multi-button.business-large ul li:hover, .dls-button.multi-button.business-large ul li:hover {
                background-color: #4a2e64
            }

    button.button-bar, .dls-button.button-bar {
        margin-right: 0px !important
    }

        button.button-bar:nth-child(2), .dls-button.button-bar:nth-child(2) {
            left: -2px;
            position: relative
        }

        button.button-bar:nth-child(3), .dls-button.button-bar:nth-child(3) {
            left: -4px;
            position: relative
        }

        button.button-bar:nth-child(4), .dls-button.button-bar:nth-child(4) {
            left: -6px;
            position: relative
        }

        button.button-bar:nth-child(5), .dls-button.button-bar:nth-child(5) {
            left: -8px;
            position: relative
        }

        button.button-bar:nth-child(6), .dls-button.button-bar:nth-child(6) {
            left: -10px;
            position: relative
        }

        button.button-bar:nth-child(7), .dls-button.button-bar:nth-child(7) {
            left: -12px;
            position: relative
        }

        button.button-bar:nth-child(8), .dls-button.button-bar:nth-child(8) {
            left: -14px;
            position: relative
        }

        button.button-bar:nth-child(9), .dls-button.button-bar:nth-child(9) {
            left: -16px;
            position: relative
        }

        button.button-bar:nth-child(10), .dls-button.button-bar:nth-child(10) {
            left: -18px;
            position: relative
        }

.wizard-content .tab-pane {
    display: none
}

.wizard-content .tab-pane-active {
    display: block
}

.button-dark-background {
    background-color: #003349
}

.screenshots {
    margin: 78px 0px;
    position: relative;
    max-width: 1000px
}

    .screenshots .screenshot-device {
        background: white;
        overflow: hidden
    }

        .screenshots .screenshot-device.device-desktop {
            box-shadow: 0 3px 3px 0 rgba(0,20,29,0.2),0 2px 4px 0 rgba(0,20,29,0.15);
            border-radius: 4px;
            max-width: 660px
        }

            .screenshots .screenshot-device.device-desktop .device-header {
                background: #e6ebed;
                display: flex;
                height: 40px
            }

                .screenshots .screenshot-device.device-desktop .device-header .device-actions {
                    display: flex;
                    justify-content: space-between;
                    padding: 13px 0 0 16px
                }

                    .screenshots .screenshot-device.device-desktop .device-header .device-actions .action {
                        background: #bfccd2;
                        border-radius: 50%;
                        height: 12px;
                        margin-right: 10px;
                        width: 12px
                    }

                .screenshots .screenshot-device.device-desktop .device-header .search-bar {
                    background: white;
                    border: 1px solid #d9e0e4;
                    height: 25px;
                    margin: 7px 0 0 10px;
                    width: 85%
                }

            .screenshots .screenshot-device.device-desktop .device-screen {
                background: url("../visuals/screenshots/app.png") top left no-repeat;
                background-size: cover;
                height: 445px
            }

        .screenshots .screenshot-device.device-tablet {
            box-shadow: 0 10px 20px 0 rgba(0,20,29,0.2),0 20px 40px 0 rgba(0,20,29,0.1);
            border-radius: 16px;
            border: 10px solid white;
            width: 600px;
            position: absolute;
            right: 80px;
            bottom: 50px
        }

            .screenshots .screenshot-device.device-tablet .device-header {
                background: white;
                display: flex;
                height: 30px
            }

                .screenshots .screenshot-device.device-tablet .device-header .device-actions {
                    display: flex;
                    justify-content: space-between;
                    padding: 13px 0 0 16px
                }

                    .screenshots .screenshot-device.device-tablet .device-header .device-actions .action {
                        background: #bfccd2;
                        border-radius: 50%;
                        height: 12px;
                        margin-right: 10px;
                        width: 12px
                    }

            .screenshots .screenshot-device.device-tablet .device-screen {
                background: url("../visuals/screenshots/app-tablet.png") top left no-repeat;
                background-size: cover;
                height: 325px
            }

        .screenshots .screenshot-device.device-mobile {
            box-shadow: 0 10px 40px 0 rgba(0,20,29,0.04),0 50px 80px 0 rgba(0,20,29,0.1);
            border-radius: 12px;
            border: 3px solid white;
            width: 200px;
            position: absolute;
            right: 24%;
            bottom: -30px;
            z-index: 3
        }

            .screenshots .screenshot-device.device-mobile .device-header {
                background: white;
                display: flex;
                height: 30px
            }

                .screenshots .screenshot-device.device-mobile .device-header .device-actions {
                    display: flex;
                    justify-content: space-between;
                    padding: 13px 0 0 16px
                }

                    .screenshots .screenshot-device.device-mobile .device-header .device-actions .action {
                        background: #bfccd2;
                        border-radius: 50%;
                        height: 8px;
                        margin-right: 10px;
                        width: 8px
                    }

            .screenshots .screenshot-device.device-mobile .device-screen {
                background: url("../visuals/screenshots/app-mobile.png") top left no-repeat;
                background-size: cover;
                height: 350px
            }

.dls-timeline .sub-heading {
    margin-left: 0;
    text-align: left
}

.dls-timeline .updates-timeline {
    list-style-type: none;
    margin-left: 30px;
    margin-top: 20px;
    position: relative
}

    .dls-timeline .updates-timeline:before {
        background: linear-gradient(180deg, #003349 86%, rgba(0,51,73,0) 100%);
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        width: 2px
    }

    .dls-timeline .updates-timeline:after {
        content: '';
        display: block;
        height: 200px;
        position: absolute;
        bottom: 0;
        width: 2px
    }

    .dls-timeline .updates-timeline li {
        padding: 0;
        position: relative
    }

        .dls-timeline .updates-timeline li:first-child {
            padding: 0
        }

    .dls-timeline .updates-timeline .timeline-year-break {
        background: #003349;
        color: white;
        display: inline-block;
        font-size: 16px;
        font-weight: 700;
        left: -30px;
        padding: 5px 10px;
        position: relative;
        text-align: center;
        z-index: 1
    }

    .dls-timeline .updates-timeline .timeline-date {
        margin-bottom: 24px
    }

        .dls-timeline .updates-timeline .timeline-date .timeline-date-container {
            background: linear-gradient(180deg, #fff 0%, #f7f9fa 100%);
            box-shadow: 0 5px 5px 0 rgba(0,20,29,0.2),0 10px 10px 0 rgba(0,20,29,0.1);
            display: inline-block;
            height: 56px;
            margin: 0 0 0 64px;
            padding: 10px 15px 7px 15px;
            position: relative;
            width: 64px
        }

            .dls-timeline .updates-timeline .timeline-date .timeline-date-container:before {
                background-color: #ccd6db;
                content: '';
                display: block;
                position: absolute;
                height: 1px;
                left: -60px;
                top: 31px;
                width: 60px
            }

            .dls-timeline .updates-timeline .timeline-date .timeline-date-container:after {
                background-color: #003349;
                border: 3px solid #f2f5f6;
                content: '';
                display: block;
                height: 16px;
                left: -74px;
                position: absolute;
                top: 21px;
                width: 16px
            }

            .dls-timeline .updates-timeline .timeline-date .timeline-date-container .day {
                font-size: 22px;
                font-weight: bold;
                line-height: 22px;
                text-align: center
            }

                .dls-timeline .updates-timeline .timeline-date .timeline-date-container .day:before {
                    background-color: #0077C8;
                    content: '';
                    display: block;
                    height: 5px;
                    left: 0px;
                    position: absolute;
                    top: 0px;
                    width: 100%
                }

            .dls-timeline .updates-timeline .timeline-date .timeline-date-container .month {
                color: rgba(0,0,0,0.55);
                font-size: 14px;
                font-weight: bold;
                line-height: 16px;
                margin-top: 2px;
                text-align: center;
                text-transform: uppercase
            }

            .dls-timeline .updates-timeline .timeline-date .timeline-date-container .date-extra-info {
                background: linear-gradient(90deg, #e6ebed 0%, rgba(230,235,237,0) 100%);
                color: rgba(0,0,0,0.65);
                font-size: 12px;
                left: 64px;
                opacity: 0;
                padding: 8px 16px;
                position: absolute;
                top: 7px;
                transition: all 0.3s ease;
                z-index: 1
            }

                .dls-timeline .updates-timeline .timeline-date .timeline-date-container .date-extra-info .week-day {
                    line-height: 13px
                }

                .dls-timeline .updates-timeline .timeline-date .timeline-date-container .date-extra-info .year {
                    font-size: 16px;
                    font-weight: bold;
                    line-height: 18px
                }

            .dls-timeline .updates-timeline .timeline-date .timeline-date-container:hover {
                cursor: default
            }

                .dls-timeline .updates-timeline .timeline-date .timeline-date-container:hover .date-extra-info {
                    left: 68px;
                    opacity: 1
                }

    .dls-timeline .updates-timeline .timeline-feature-container {
        padding: 0 0 64px 64px;
        position: relative
    }

.browser {
    background: #f2f5f6;
    box-shadow: 0 10px 30px 0 rgba(0,20,29,0.1),0 30px 60px 0 rgba(0,20,29,0.1);
    margin-bottom: 80px;
    max-width: 100%
}

    .browser .browser-navigation {
        align-items: center;
        display: flex;
        padding: 16px 24px;
        width: 100%
    }

        .browser .browser-navigation .browser-control {
            background: #ccd6db;
            border-radius: 50%;
            height: 12px;
            margin-right: 12px;
            width: 12px
        }

        .browser .browser-navigation .browser-url {
            background: white;
            height: 32px;
            margin-left: 8px;
            width: 800px
        }

    .browser .browser-content {
        background: white;
        height: 600px;
        overflow-y: hidden;
        position: relative
    }

        .browser .browser-content .website-h1-super {
            color: white;
            font-size: 32px;
            font-weight: 600;
            line-height: 37px;
            margin-bottom: 12px
        }

        .browser .browser-content .website-h1 {
            color: white;
            font-size: 28px;
            font-weight: 600;
            line-height: 33px;
            margin-bottom: 12px
        }

        .browser .browser-content .website-h2 {
            color: white;
            font-size: 24px;
            font-weight: 600;
            line-height: 29px;
            margin-bottom: 12px
        }

        .browser .browser-content .website-h4 {
            font-size: 16px;
            font-weight: 600;
            line-height: 21px;
            margin-bottom: 12px
        }

        .browser .browser-content .website-h5 {
            font-size: 12px;
            font-weight: 600;
            line-height: 17px;
            margin-bottom: 12px
        }

        .browser .browser-content .website-h6 {
            color: white;
            font-size: 12px;
            font-weight: 200;
            line-height: 17px;
            margin-bottom: 12px
        }

        .browser .browser-content .website-h7 {
            font-size: 10px;
            font-weight: 600;
            line-height: 15px;
            margin-bottom: 12px
        }

        .browser .browser-content .website-body-large {
            color: white;
            font-size: 9px;
            line-height: 14px;
            margin-bottom: 20px
        }

        .browser .browser-content .website-body-standard {
            font-size: 8px;
            font-weight: 400;
            line-height: 12px;
            margin-bottom: 12px
        }

        .browser .browser-content .browser-button {
            font-size: 9px;
            height: 24px;
            line-height: 9px;
            margin-right: 0px;
            padding: 0px 16px;
            width: auto
        }

            .browser .browser-content .browser-button.secondary {
                border-width: 1px
            }

                .browser .browser-content .browser-button.secondary:hover {
                    border-width: 1px
                }

.iconscontainer {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px
}

    .iconscontainer .iconcontainer {
        height: 150px;
        margin-top: 16px;
        padding: 16px;
        text-align: center;
        width: 150px
    }

        .iconscontainer .iconcontainer .icon-title {
            font-size: 13px;
            font-weight: 600
        }

        .iconscontainer .iconcontainer .icon-text {
            font-size: 13px;
            line-height: 18px;
            padding-top: 10px
        }

    .iconscontainer .icon {
        display: block;
        margin-bottom: 30px
    }

        .iconscontainer .icon:before {
            font-size: 32px
        }

.font-table .icon {
    display: block;
    margin-bottom: 30px
}

    .font-table .icon:before {
        font-size: 32px
    }

.icon:hover {
    text-decoration: none
}

.input-error-icon {
    color: #c7384f
}

.icon-error:before {
    content: "\00A1"
}

.input-error-icon {
    position: absolute;
    right: 57px;
    top: 8px;
    display: inline-block;
    pointer-events: none;
}

.icon-error {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: sagearmonyeicons;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    vertical-align: middle
}

.input-warning-icon {
    color: #E96400
}

.input-info-icon {
    color: #0073c2
}

.input-standard-icon {
    color: rgba(0,0,0,0.65)
}

    .input-standard-icon:hover, .input-standard-icon-hover {
        color: rgba(0,0,0,0.9)
    }

.input-light-background-icon {
    color: #668592
}

    .input-light-background-icon:hover, .input-light-background-icon-hover {
        color: #335c6d
    }

.input-small-biz-icon {
    color: #00815d
}

    .input-small-biz-icon:hover, .input-small-biz-icon-hover {
        color: #00674a
    }

.input-medium-biz-icon {
    color: #0073c2
}

    .input-medium-biz-icon:hover, .input-medium-biz-icon-hover {
        color: #005c9b
    }

.input-large-biz-icon {
    color: #69418f
}

    .input-large-biz-icon:hover, .input-large-biz-icon-hover {
        color: #5f3b81
    }

.input-generic-biz-icon {
    color: #008200
}

    .input-generic-biz-icon:hover, .input-generic-biz-icon-hover {
        color: #006800
    }

.input-text-color-icon {
    color: #0077c8;
}

    .input-text-color-icon:hover, .input-text-color-icon-hover {
        color: #0077c8;
    }

.input-standard-icon:hover > .dls-input {
    color: #668592
}

.input-standard-icon:hover + .dls-input {
    color: rgba(0,0,0,0.9)
}

.input-disabled-icon {
    color: rgba(0,0,0,0.3)
}

.tooltip-icon {
    position: relative;
    display: inline-block;
    cursor: pointer
}

.foundations-colour .colors-container, .components-text-inputs .colors-container {
    display: flex;
    flex-wrap: wrap
}

    .foundations-colour .colors-container .color-container, .components-text-inputs .colors-container .color-container {
        margin-bottom: 56px;
        margin-right: 40px;
        text-align: center;
        width: 20%
    }

        .foundations-colour .colors-container .color-container .color-title-segment, .components-text-inputs .colors-container .color-container .color-title-segment {
            font-weight: 700
        }

            .foundations-colour .colors-container .color-container .color-title-segment + .color-usage-segment, .components-text-inputs .colors-container .color-container .color-title-segment + .color-usage-segment {
                font-size: 13px;
                margin-top: 8px
            }

.foundations-colour .colour-block, .components-text-inputs .colour-block {
    border: 1px solid transparent;
    color: white;
    font-weight: 600;
    height: 48px;
    line-height: 46px;
    margin: 16px auto;
    text-align: center;
    width: 130px
}

.foundations-colour .color-small-marketing, .components-text-inputs .color-small-marketing {
    background-color: #00A376
}

.foundations-colour .color-medium-marketing, .components-text-inputs .color-medium-marketing {
    background-color: #0077C8
}

.foundations-colour .color-large-marketing, .components-text-inputs .color-large-marketing {
    background-color: #582C83
}

.foundations-colour .color-generic-marketing, .components-text-inputs .color-generic-marketing {
    background-color: #090
}

.foundations-colour .color-small-app, .components-text-inputs .color-small-app {
    background-color: #00815d
}

.foundations-colour .color-medium-app, .components-text-inputs .color-medium-app {
    background-color: #0073c2
}

.foundations-colour .color-large-app, .components-text-inputs .color-large-app {
    background-color: #69418f
}

.foundations-colour .color-generic-app, .components-text-inputs .color-generic-app {
    background-color: #008200
}

.foundations-colour .color-small-app-shade-20, .components-text-inputs .color-small-app-shade-20 {
    background-color: #00674a
}

.foundations-colour .color-medium-app-shade-20, .components-text-inputs .color-medium-app-shade-20 {
    background-color: #005c9b
}

.foundations-colour .color-large-app-shade-20, .components-text-inputs .color-large-app-shade-20 {
    background-color: #5f3b81
}

.foundations-colour .color-generic-app-shade-20, .components-text-inputs .color-generic-app-shade-20 {
    background-color: #006800
}

.foundations-colour .color-small-app-shade-40, .components-text-inputs .color-small-app-shade-40 {
    background-color: #004d38
}

.foundations-colour .color-medium-app-shade-40, .components-text-inputs .color-medium-app-shade-40 {
    background-color: #004574
}

.foundations-colour .color-large-app-shade-40, .components-text-inputs .color-large-app-shade-40 {
    background-color: #4a2e64
}

.foundations-colour .color-generic-app-shade-40, .components-text-inputs .color-generic-app-shade-40 {
    background-color: #004e00
}

.foundations-colour .color-brilliant-green, .components-text-inputs .color-brilliant-green {
    background-color: #00DC00;
    color: rgba(0,0,0,0.9)
}

.foundations-colour .color-focus-hover, .components-text-inputs .color-focus-hover {
    background-color: #FFB500;
    color: rgba(0,0,0,0.9)
}

.foundations-colour .color-positive, .components-text-inputs .color-positive {
    background-color: #00b000;
    color: rgba(0,0,0,0.9)
}

.foundations-colour .color-negative, .components-text-inputs .color-negative {
    background-color: #C7384F
}

.foundations-colour .color-negative-shade-20, .components-text-inputs .color-negative-shade-20 {
    background-color: #9f2d3f
}

.foundations-colour .color-warning, .components-text-inputs .color-warning {
    background-color: #E96400;
    color: #fff
}

.foundations-colour .color-info, .components-text-inputs .color-info {
    background-color: #0073c2
}

.foundations-colour .color-white, .components-text-inputs .color-white {
    background-color: white;
    color: rgba(0,0,0,0.9);
    border: 1px solid #ccd6db
}

.foundations-colour .color-slate-95, .components-text-inputs .color-slate-95 {
    background-color: #f2f5f6;
    color: rgba(0,0,0,0.9);
    border: 1px solid #ccd6db
}

.foundations-colour .color-slate-90, .components-text-inputs .color-slate-90 {
    background-color: #e6ebed;
    color: rgba(0,0,0,0.9);
    border: 1px solid #ccd6db
}

.foundations-colour .color-slate-80, .components-text-inputs .color-slate-80 {
    background-color: #ccd6db;
    color: rgba(0,0,0,0.9)
}

.foundations-colour .color-slate-60, .components-text-inputs .color-slate-60 {
    background-color: #99adb6;
    color: rgba(0,0,0,0.9)
}

.foundations-colour .color-slate-40, .components-text-inputs .color-slate-40 {
    background-color: #668592;
    color: rgba(0,0,0,0.9)
}

.foundations-colour .color-slate-20, .components-text-inputs .color-slate-20 {
    background-color: #335c6d;
    color: rgba(0,0,0,0.9)
}

.foundations-colour .color-slate, .components-text-inputs .color-slate {
    background-color: #003349
}

.foundations-colour .color-black-100, .components-text-inputs .color-black-100 {
    background-color: #000
}

.foundations-colour .color-black-90, .components-text-inputs .color-black-90 {
    background-color: rgba(0,0,0,0.9)
}

.foundations-colour .color-black-65, .components-text-inputs .color-black-65 {
    background-color: rgba(0,0,0,0.65)
}

.foundations-colour .color-black-55, .components-text-inputs .color-black-55 {
    background-color: rgba(0,0,0,0.55)
}

.foundations-colour .color-black-30, .components-text-inputs .color-black-30 {
    background-color: rgba(0,0,0,0.3);
    color: rgba(0,0,0,0.9)
}

.foundations-colour .color-black-20, .components-text-inputs .color-black-20 {
    background-color: rgba(0,0,0,0.2);
    color: rgba(0,0,0,0.9)
}

.illustration-spectrum, .illustration-extended {
    margin: 0px 32px 32px 0px;
    width: calc(33% - 48px)
}

.illustration-colour {
    height: 160px
}

    .illustration-colour .illustration-caption {
        background-color: #e6ebed;
        bottom: 0px;
        height: 80px;
        padding: 16px;
        position: absolute;
        width: 100%
    }

        .illustration-colour .illustration-caption p {
            margin: 0px
        }

        .illustration-colour .illustration-caption .illustration-caption:first-child {
            font-weight: 700
        }

.illustration-extended .illustration-extended-colour {
    height: 60px;
    padding: 24px
}

    .illustration-extended .illustration-extended-colour p {
        margin: 0px
    }

.page-shadows .shadows-container {
    display: flex
}

.page-shadows .shadow-container {
    font-size: 14px;
    font-weight: 600;
    padding: 24px;
    margin-bottom: 72px;
    margin-right: 48px
}

    .page-shadows .shadow-container.shadow-depth-1 {
        box-shadow: 0 5px 5px 0 rgba(0,20,29,0.2),0 10px 10px 0 rgba(0,20,29,0.1)
    }

    .page-shadows .shadow-container.shadow-depth-2 {
        box-shadow: 0 10px 20px 0 rgba(0,20,29,0.2),0 20px 40px 0 rgba(0,20,29,0.1)
    }

    .page-shadows .shadow-container.shadow-depth-3 {
        box-shadow: 0 10px 30px 0 rgba(0,20,29,0.1),0 30px 60px 0 rgba(0,20,29,0.1)
    }

    .page-shadows .shadow-container.shadow-depth-4 {
        box-shadow: 0 10px 40px 0 rgba(0,20,29,0.04),0 50px 80px 0 rgba(0,20,29,0.1)
    }

    .page-shadows .shadow-container.shadow-depth-card {
        box-shadow: 0 3px 3px 0 rgba(0,20,29,0.2),0 2px 4px 0 rgba(0,20,29,0.15)
    }

.accordion .accordion-tab {
    background: white;
    border-top: 1px solid #ccd6db
}

    .accordion .accordion-tab:last-child {
        border-bottom: 1px solid #ccd6db
    }

    .accordion .accordion-tab .money-value {
        color: #C7384F;
        float: right;
        text-align: right
    }

.accordion .accordion-header {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    padding: 16px 16px 16px 0
}

    .accordion .accordion-header .chevron {
        display: inline-block;
        margin-right: 8px;
        position: relative;
        top: -1px;
        transform: rotate(-90deg);
        transition: all 0.1s ease
    }

.accordion .accordion-content {
    font-size: 14px;
    opacity: 1;
    max-height: 0;
    transition: all 0.3s;
    visibility: hidden
}

    .accordion .accordion-content p {
        margin-bottom: 0
    }

.accordion .accordion-tab.open .accordion-header .chevron {
    animation: animate-chevron 0.2s 1 ease forwards
}

.accordion .accordion-tab.open .accordion-content {
    animation: accordion-animate 0.5s 1 ease forwards
}

@keyframes accordion-animate {
    0% {
        max-height: 0px;
        opacity: 0;
        padding: 0px 16px 16px 24px;
        visibility: hidden
    }

    100% {
        max-height: 1000px;
        opacity: 1;
        padding: 0px 16px 16px 24px;
        visibility: visible
    }
}

@keyframes animate-chevron {
    0% {
        transform: rotate(-90deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

.due-chart {
    padding-top: 5px
}

    .due-chart .due-row {
        display: flex;
        justify-content: space-between;
        padding: 5px 0px
    }

        .due-chart .due-row:last-child {
            padding-bottom: 0px
        }

        .due-chart .due-row .value {
            color: #C7384F
        }

.ap {
    position: relative
}

    .ap .ap-icon {
        display: inline-block;
        padding: 5px
    }

        .ap .ap-icon i {
            color: rgba(0,0,0,0.55)
        }

        .ap .ap-icon:hover, .ap .ap-icon.ap-active {
            background: #ccd6db
        }

        .ap .ap-icon:hover {
            cursor: pointer
        }

    .ap .ap-container {
        background: white;
        box-shadow: 0 5px 5px 0 rgba(0,20,29,0.2),0 10px 10px 0 rgba(0,20,29,0.1);
        left: 0;
        min-width: 160px;
        opacity: 0;
        position: absolute;
        padding: 20px 24px 24px;
        top: 22px;
        transition: all 0.1s ease-out;
        visibility: hidden;
        z-index: 10
    }

        .ap .ap-container .ap-head {
            margin-bottom: 16px
        }

        .ap .ap-container label {
            color: rgba(0,0,0,0.9)
        }

    .ap .ap-visible {
        opacity: 1;
        top: 32px;
        transition: all 0.1s ease-out;
        visibility: visible
    }

.table .row-header-ap {
    background: #f2f5f6
}

    .table .row-header-ap:hover {
        background: #f2f5f6
    }

    .table .row-header-ap.selected {
        background: #f2f5f6
    }

        .table .row-header-ap.selected:hover {
            background: #f2f5f6
        }

    .table .row-header-ap .ap-heading {
        padding: 0 !important
    }

        .table .row-header-ap .ap-heading .ap {
            margin-left: 8px;
            margin-top: -6px
        }

.table .row-ap {
    grid-template-columns: 48px 120px 120px 120px 120px 100px
}

.button-toggle input[type="radio"] {
    display: none
}

    .button-toggle input[type="radio"]:checked + label {
        background-color: #f2f9f2;
        border: 1px solid #008200;
        outline: 1px solid #008200
    }

        .button-toggle input[type="radio"]:checked + label:hover {
            background-color: #f2f9f2;
            border: 1px solid #008200;
            outline: 1px solid #008200
        }

.button-toggle label.dls-button {
    margin-right: 8px
}

    .button-toggle label.dls-button.bt-tg {
        border: 1px solid #99adb6;
        color: rgba(0,0,0,0.9);
        outline: 1px solid white
    }

        .button-toggle label.dls-button.bt-tg:hover {
            background-color: white
        }

        .button-toggle label.dls-button.bt-tg.largeicon {
            height: auto;
            padding: 16px 24px 8px
        }

            .button-toggle label.dls-button.bt-tg.largeicon .large-icon-tg {
                margin-bottom: 8px;
                text-align: center
            }

                .button-toggle label.dls-button.bt-tg.largeicon .large-icon-tg i {
                    top: 0px
                }

                    .button-toggle label.dls-button.bt-tg.largeicon .large-icon-tg i:before {
                        font-size: 48px;
                        line-height: 48px;
                        top: 0
                    }

            .button-toggle label.dls-button.bt-tg.largeicon span {
                display: block;
                line-height: 1.5;
                text-align: center
            }

.app-header {
    background: white;
    box-shadow: inset 0px -1px 0px #ccd6db;
    height: 48px;
    margin-bottom: 40px;
    width: 840px;
    order: 1;
}

    .app-header a {
        color: #00815d
    }

    .app-header ul.nav {
        display: flex;
        justify-content: flex-end;
        padding-right: 24px
    }

        .app-header ul.nav > li {
            cursor: default;
            display: flex;
            line-height: 37px;
            margin-right: 8px;
            padding: 5px 16px;
            position: relative
        }

            .app-header ul.nav > li:last-child {
                margin-right: 0;
                /*padding-top: 0px;*/
            }

            .app-header ul.nav > li i {
                color: #668592;
                margin: auto
            }

            .app-header ul.nav > li .profile-pic {
                background: url("../Content/Images/AccessGroup.png");
                background-size: cover;
                border: 1px solid #e6ebed;
                height: 24px;
                margin: auto;
                width: 24px
            }

            .app-header ul.nav > li:hover {
                /*background: #e6ebed*/
            }

                .app-header ul.nav > li:hover i {
                    color: rgba(0,0,0,0.9)
                }

                .app-header ul.nav > li:hover .app-header-nav-wrapper {
                    opacity: 1;
                    transform: translate(0px, 0px);
                    visibility: visible
                }

    .app-header .app-header-nav-wrapper {
        left: 0;
        margin-top: 48px;
        opacity: 0;
        position: absolute;
        transform: translate(0px, 10px);
        transition: all 0.2s ease;
        visibility: hidden;
        width: 350px
    }

        .app-header .app-header-nav-wrapper.right-aligned {
            left: auto;
            right: 0
        }

        .app-header .app-header-nav-wrapper.app-header-nav-create {
            width: 200px
        }

        .app-header .app-header-nav-wrapper.nav-help-container .help-label {
            color: rgba(0,0,0,0.55);
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
            margin-bottom: 8px;
            text-transform: uppercase
        }

        .app-header .app-header-nav-wrapper.nav-help-container .help-link {
            margin-bottom: 8px;
            position: relative
        }

            .app-header .app-header-nav-wrapper.nav-help-container .help-link .icon {
                color: #99adb6;
                margin-left: 8px;
                position: relative;
                top: -2px
            }

            .app-header .app-header-nav-wrapper.nav-help-container .help-link + .help-label {
                margin-top: 32px
            }

        .app-header .app-header-nav-wrapper.nav-help-container a {
            font-weight: 600;
        }

        .app-header .app-header-nav-wrapper.nav-help-container .horizontal-list {
            display: flex
        }

            .app-header .app-header-nav-wrapper.nav-help-container .horizontal-list li {
                background: #f2f5f6;
                box-shadow: inset -1px 0px 0px #e6ebed;
                color: rgba(0,0,0,0.55);
                font-size: 13px;
                font-weight: 600;
                line-height: 16px;
                padding: 16px;
                text-align: center;
                width: 25%
            }

                .app-header .app-header-nav-wrapper.nav-help-container .horizontal-list li i {
                    display: block;
                    margin-bottom: 10px
                }

                .app-header .app-header-nav-wrapper.nav-help-container .horizontal-list li:hover {
                    background: #00815d;
                    color: white;
                    cursor: pointer
                }

                    .app-header .app-header-nav-wrapper.nav-help-container .horizontal-list li:hover i {
                        color: white
                    }

        .app-header .app-header-nav-wrapper.search-box-container .results-list li {
            display: flex;
            justify-content: space-between
        }

            .app-header .app-header-nav-wrapper.search-box-container .results-list li .date-value {
                color: rgba(0,0,0,0.74);
                font-weight: 400
            }

            .app-header .app-header-nav-wrapper.search-box-container .results-list li.segment-separator {
                color: rgba(0,0,0,0.55);
                font-size: 12px;
                font-weight: 600;
                padding: 16px 0px 0px 24px;
                text-transform: uppercase
            }

                .app-header .app-header-nav-wrapper.search-box-container .results-list li.segment-separator:hover {
                    background: white;
                    cursor: default
                }

        .app-header .app-header-nav-wrapper.profile-container .profile-actions {
            margin: auto 0
        }

            .app-header .app-header-nav-wrapper.profile-container .profile-actions a {
                font-size: 14px;
                font-weight: 600
            }

            .app-header .app-header-nav-wrapper.profile-container .profile-actions .logout {
                float: right
            }

        .app-header .app-header-nav-wrapper.profile-container .app-header-nav-content {
            display: flex;
            justify-content: space-between
        }

            .app-header .app-header-nav-wrapper.profile-container .app-header-nav-content .profile-label {
                color: rgba(0,0,0,0.55);
                font-size: 12px;
                font-weight: 600;
                line-height: 16px;
                text-transform: uppercase
            }

            .app-header .app-header-nav-wrapper.profile-container .app-header-nav-content .profile-business-name {
                font-weight: 700
            }

        .app-header .app-header-nav-wrapper.profile-container .app-header-nav-header {
            display: flex
        }

            .app-header .app-header-nav-wrapper.profile-container .app-header-nav-header .profile-actions {
                width: 198px
            }

            .app-header .app-header-nav-wrapper.profile-container .app-header-nav-header .profile-pic-avatar-medium {
                background: url("../Content/Images/AccessGroup.png");
                border: 1px solid #b3c2c8;
                cursor: pointer;
                height: 40px;
                margin-right: 24px;
                position: relative;
                width: 40px
            }

                .app-header .app-header-nav-wrapper.profile-container .app-header-nav-header .profile-pic-avatar-medium:after {
                    background: rgba(0,0,0,0.6);
                    bottom: 0;
                    color: white;
                    content: "Edit";
                    font-size: 12px;
                    height: 40px;
                    left: 0;
                    position: absolute;
                    text-align: center;
                    width: 40px
                }

            .app-header .app-header-nav-wrapper.profile-container .app-header-nav-header .profile-pic-avatar-large {
                background: url("../Content/Images/AccessGroup.png");
                border: 1px solid #b3c2c8;
                cursor: pointer;
                height: 80px;
                margin-right: 24px;
                position: relative;
                width: 80px
            }

                .app-header .app-header-nav-wrapper.profile-container .app-header-nav-header .profile-pic-avatar-large:after {
                    background: rgba(0,0,0,0.6);
                    bottom: 0;
                    color: white;
                    content: "Edit";
                    font-size: 12px;
                    height: 20px;
                    left: 0;
                    position: absolute;
                    text-align: center;
                    width: 100%
                }

    .app-header .app-header-nav-container {
        background: white;
        box-shadow: 0 10px 20px 0 rgba(0,20,29,0.2),0 20px 40px 0 rgba(0,20,29,0.1)
    }

        .app-header .app-header-nav-container .app-header-nav-header {
            background: #e6ebed;
            box-shadow: inset 0px -1px 0px #d9e0e4;
            line-height: 21px;
            padding: 16px 24px
        }

            .app-header .app-header-nav-container .app-header-nav-header .app-header-nav-title {
                font-size: 16px;
                font-weight: 700;
                line-height: 24px
            }

            .app-header .app-header-nav-container .app-header-nav-header .app-header-nav-email {
                color: rgba(0,0,0,0.55);
                font-size: 13px;
                font-weight: 400;
                margin-bottom: 8px
            }

            .app-header .app-header-nav-container .app-header-nav-header .dls-input-container {
                margin-bottom: 0
            }

        .app-header .app-header-nav-container .app-header-nav-content {
            font-size: 14px;
            line-height: 21px
        }

            .app-header .app-header-nav-container .app-header-nav-content.with-padding {
                padding: 16px 24px
            }

            .app-header .app-header-nav-container .app-header-nav-content ul li {
                cursor: pointer;
                font-weight: 600;
                padding: 16px 24px
            }

                .app-header .app-header-nav-container .app-header-nav-content ul li:hover {
                    background: #00815d;
                    color: white
                }

                    .app-header .app-header-nav-container .app-header-nav-content ul li:hover .date-value {
                        color: white
                    }

            .app-header .app-header-nav-container .app-header-nav-content .notification-container {
                display: flex;
                justify-content: space-between
            }

                .app-header .app-header-nav-container .app-header-nav-content .notification-container .notification-avatar {
                    border: 2px solid rgba(0,0,0,0.9);
                    border-radius: 50%;
                    font-size: 19px;
                    font-weight: 700;
                    height: 40px;
                    line-height: 37px;
                    text-align: center;
                    width: 40px
                }

                .app-header .app-header-nav-container .app-header-nav-content .notification-container .notification-summary {
                    margin-bottom: 8px
                }

                    .app-header .app-header-nav-container .app-header-nav-content .notification-container .notification-summary span {
                        font-weight: 700
                    }

                .app-header .app-header-nav-container .app-header-nav-content .notification-container .notification-message {
                    color: rgba(0,0,0,0.55);
                    margin-bottom: 8px
                }

                .app-header .app-header-nav-container .app-header-nav-content .notification-container .notification-date {
                    font-size: 12px;
                    font-weight: 700
                }

                .app-header .app-header-nav-container .app-header-nav-content .notification-container .notification-content {
                    width: 240px
                }

                .app-header .app-header-nav-container .app-header-nav-content .notification-container + .notification-container {
                    margin-top: 32px
                }

.tile-subtle-container {
    margin-bottom: 72px
}

.tile {
    background: white;
    border: 1px solid #ccd6db;
    padding: 24px
}

    .tile.demo-tile {
        display: inline-flex
    }

        .tile.demo-tile .large-label {
            font-size: 24px;
            font-weight: 700
        }

        .tile.demo-tile .small-label {
            font-size: 14px
        }

        .tile.demo-tile .date-label {
            font-size: 14px;
            font-weight: 700;
            margin-left: 16px
        }

        .tile.demo-tile .demo-tile-content {
            border-right: 1px solid #e6ebed;
            margin-right: 32px;
            padding-right: 32px
        }

            .tile.demo-tile .demo-tile-content label {
                color: rgba(0,0,0,0.6);
                font-size: 12px;
                text-transform: uppercase
            }

                .tile.demo-tile .demo-tile-content label.inline {
                    display: inline-block
                }

            .tile.demo-tile .demo-tile-content:last-child {
                border-right: none
            }

.card, .dls-ia-card {
    background: white;
    box-shadow: 0 3px 3px 0 rgba(0,20,29,0.2),0 2px 4px 0 rgba(0,20,29,0.15);
    margin-bottom: 32px;
    position: relative;
    transition: all 0.3s ease-in-out;
    width: 490px
}

    .card img, .dls-ia-card img {
        max-width: 100%
    }

    .card:hover, .dls-ia-card:hover {
        box-shadow: 0 5px 5px 0 rgba(0,20,29,0.2),0 10px 10px 0 rgba(0,20,29,0.1)
    }

    .card .card-header, .dls-ia-card .card-header {
        padding: 32px 32px 0px
    }

        .card .card-header .card-title, .dls-ia-card .card-header .card-title {
            font-size: 22px;
            font-weight: 700;
            line-height: 26px;
            margin-bottom: 4px
        }

        .card .card-header i, .dls-ia-card .card-header i {
            position: absolute;
            right: 32px;
            top: 32px
        }

    .card .card-content, .dls-ia-card .card-content {
        margin-bottom: 32px
    }

        .card .card-content .card-balance-title, .dls-ia-card .card-content .card-balance-title {
            color: rgba(0,0,0,0.74);
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 8px;
            text-align: center
        }

        .card .card-content .card-balance-amount, .dls-ia-card .card-content .card-balance-amount {
            font-size: 24px;
            font-weight: 700;
            letter-spacing: 0.48px;
            margin-bottom: 10px;
            text-align: center
        }

        .card .card-content .card-balance-date, .dls-ia-card .card-content .card-balance-date {
            color: rgba(0,0,0,0.55);
            font-size: 12px;
            text-align: center
        }

    .card .card-footer, .dls-ia-card .card-footer {
        background-color: #f2f5f6;
        border-top: 1px solid #e6ebed;
        height: 56px;
        line-height: 56px;
        padding: 0;
        text-align: center
    }

        .card .card-footer i, .dls-ia-card .card-footer i {
            margin-right: 8px
        }

.dls-ia-card-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 64px
}

    .dls-ia-card-container .dls-ia-card {
        height: 200px;
        margin: 0px 32px 32px 0px;
        width: 220px
    }

        .dls-ia-card-container .dls-ia-card .card-content {
            align-items: center;
            display: flex;
            height: 144px;
            padding: 16px;
            width: 220px
        }

            .dls-ia-card-container .dls-ia-card .card-content img {
                margin: auto;
                max-height: 95%;
                max-width: 95%
            }

        .dls-ia-card-container .dls-ia-card .card-footer {
            bottom: 0px;
            position: absolute;
            width: 100%
        }

            .dls-ia-card-container .dls-ia-card .card-footer p {
                margin-top: 16px
            }

.carousel-demo {
    overflow: hidden
}

    .carousel-demo .carousel-demo-title {
        left: 60px;
        position: absolute;
        top: 30px
    }

    .carousel-demo.carousel-dialog {
        background: #f2f5f6;
        box-shadow: 0 10px 30px 0 rgba(0,20,29,0.1),0 30px 60px 0 rgba(0,20,29,0.1);
        height: 558px;
        position: relative;
        width: 800px
    }

        .carousel-demo.carousel-dialog .carousel-dialog-close {
            position: absolute;
            right: 30px;
            top: 30px
        }

            .carousel-demo.carousel-dialog .carousel-dialog-close .icon {
                color: #668592
            }

    .carousel-demo .carousel-navigate {
        background: #0073c2;
        box-shadow: 0 10px 30px 0 rgba(0,20,29,0.1),0 30px 60px 0 rgba(0,20,29,0.1);
        color: white;
        display: flex;
        height: 64px;
        margin-top: -32px;
        position: absolute;
        top: 50%;
        transition: all 0.3s ease;
        width: 40px;
        z-index: 1
    }

        .carousel-demo .carousel-navigate.disable {
            opacity: 0.05;
            pointer-events: none
        }

        .carousel-demo .carousel-navigate:hover {
            background: #005c9b;
            cursor: pointer
        }

        .carousel-demo .carousel-navigate .icon {
            margin: auto
        }

        .carousel-demo .carousel-navigate.nav-prev {
            left: 0
        }

        .carousel-demo .carousel-navigate.nav-next {
            right: 0
        }

    .carousel-demo .carousel-card {
        background: white;
        box-shadow: 0 3px 3px 0 rgba(0,20,29,0.2),0 2px 4px 0 rgba(0,20,29,0.15);
        height: 400px;
        margin: 80px auto;
        opacity: 0.3;
        position: absolute;
        transform: scale(0.9);
        transition: all 0.4s ease;
        width: 680px
    }

        .carousel-demo .carousel-card.card-1 {
            display: flex
        }

            .carousel-demo .carousel-card.card-1 .box-1 {
                padding: 64px 40px 40px 40px;
                width: 50%
            }

            .carousel-demo .carousel-card.card-1 .box-2 {
                background: #0073c2;
                overflow: hidden;
                padding: 32px;
                position: relative;
                width: 50%
            }

                .carousel-demo .carousel-card.card-1 .box-2:after {
                    background: #0d7ecb;
                    border-radius: 60%;
                    content: '';
                    height: 510px;
                    position: absolute;
                    width: 700px;
                    left: -430px;
                    top: 60px
                }

            .carousel-demo .carousel-card.card-1 .card-actions {
                bottom: 40px;
                position: absolute
            }

                .carousel-demo .carousel-card.card-1 .card-actions .dls-icon-link:first-child {
                    border-right: 1px solid #ccd6db;
                    margin-right: 24px;
                    padding-right: 24px
                }

        .carousel-demo .carousel-card.card-2 {
            display: flex
        }

            .carousel-demo .carousel-card.card-2 .card-title {
                margin: auto
            }

        .carousel-demo .carousel-card.card-3 {
            background: #69418f;
            display: flex
        }

            .carousel-demo .carousel-card.card-3 .card-title {
                color: white;
                margin: auto
            }

    .carousel-demo .carousel-pips {
        bottom: 30px;
        display: flex;
        justify-content: center;
        position: absolute;
        width: 100%
    }

        .carousel-demo .carousel-pips .carousel-pip {
            background: #b3c2c8;
            cursor: pointer;
            height: 10px;
            margin-right: 8px;
            width: 10px
        }

            .carousel-demo .carousel-pips .carousel-pip:last-child {
                margin-right: 0px
            }

    .carousel-demo[active-card="1"] .card-1 {
        box-shadow: 0 10px 20px 0 rgba(0,20,29,0.2),0 20px 40px 0 rgba(0,20,29,0.1);
        left: 60px;
        opacity: 1;
        transform: scale(1)
    }

    .carousel-demo[active-card="1"] .card-2 {
        left: 750px
    }

    .carousel-demo[active-card="1"] .card-3 {
        left: 1500px
    }

    .carousel-demo[active-card="1"] .carousel-pip.pip-card-1 {
        background: #668592
    }

    .carousel-demo[active-card="2"] .card-1 {
        left: -630px
    }

    .carousel-demo[active-card="2"] .card-3 {
        left: 750px
    }

    .carousel-demo[active-card="2"] .carousel-pip.pip-card-2 {
        background: #668592
    }

    .carousel-demo[active-card="2"] .card-2 {
        box-shadow: 0 10px 30px 0 rgba(0,20,29,0.1),0 30px 60px 0 rgba(0,20,29,0.1);
        left: 60px;
        opacity: 1;
        text-align: center;
        transform: scale(1)
    }

        .carousel-demo[active-card="2"] .card-2:hover {
            transition: all 0.2s ease-in;
            transform: scale(1.02);
            cursor: pointer
        }

    .carousel-demo[active-card="3"] .card-1 {
        left: -1260px
    }

    .carousel-demo[active-card="3"] .card-2 {
        left: -630px
    }

    .carousel-demo[active-card="3"] .carousel-pip.pip-card-3 {
        background: #668592
    }

    .carousel-demo[active-card="3"] .card-3 {
        box-shadow: 0 10px 20px 0 rgba(0,20,29,0.2),0 20px 40px 0 rgba(0,20,29,0.1);
        left: 60px;
        opacity: 1;
        transform: scale(1)
    }

.cb-product-instances {
    margin-bottom: 20px
}

    .cb-product-instances:last-of-type {
        margin-bottom: 0px
    }

.input-error-icon {
    display: inline-block
}

    .input-error-icon > i:hover + .tooltip-container {
        opacity: 1;
        transition: opacity 0.2s linear;
        visibility: visible !important
    }

.inline-error-text {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    margin-bottom: 24px;
    max-width: 600px
}

.checkbox-error {
    margin-bottom: 72px
}

input[type="checkbox"].custom-checkbox {
    opacity: 0;
    position: absolute
}

    input[type="checkbox"].custom-checkbox + label {
        position: relative;
        cursor: pointer;
        padding: 0;
        font-size: 14px;
        font-weight: 600
    }

        input[type="checkbox"].custom-checkbox + label:hover:before, input[type="checkbox"].custom-checkbox + label:focus:before {
            outline: 3px solid #FFB500;
            outline-offset: 0
        }

        input[type="checkbox"].custom-checkbox + label:before {
            background: white;
            border: 1px solid #668592;
            content: '';
            display: inline-block;
            height: 16px;
            margin-right: 10px;
            vertical-align: text-top;
            width: 16px
        }

        input[type="checkbox"].custom-checkbox + label.disabled {
            color: rgba(0,0,0,0.55)
        }

            input[type="checkbox"].custom-checkbox + label.disabled:before {
                background: #f2f5f6;
                border-color: #ccd6db;
                outline: none
            }

            input[type="checkbox"].custom-checkbox + label.disabled:hover {
                cursor: not-allowed
            }

                input[type="checkbox"].custom-checkbox + label.disabled:hover:after {
                    background: #99adb6;
                    box-shadow: 2px 0 0 #99adb6,4px 0 0 #99adb6,4px -2px 0 #99adb6,4px -4px 0 #99adb6,4px -6px 0 #99adb6,4px -8px 0 #99adb6;
                    opacity: 0
                }

        input[type="checkbox"].custom-checkbox + label.error:before {
            border: 1px solid #C7384F
        }

        input[type="checkbox"].custom-checkbox + label:after {
            content: '';
            height: 2px;
            left: 4px;
            opacity: 0;
            position: absolute;
            top: 9px;
            transform: rotate(45deg);
            width: 2px
        }

        input[type="checkbox"].custom-checkbox + label.cb-generic-app:after {
            background: #008200;
            box-shadow: 2px 0 0 #008200,4px 0 0 #008200,4px -2px 0 #008200,4px -4px 0 #008200,4px -6px 0 #008200,4px -8px 0 #008200;
            color: #008200
        }

        input[type="checkbox"].custom-checkbox + label.cb-small-app:after {
            background: #00815d;
            box-shadow: 2px 0 0 #00815d,4px 0 0 #00815d,4px -2px 0 #00815d,4px -4px 0 #00815d,4px -6px 0 #00815d,4px -8px 0 #00815d;
            color: #00815d
        }

        input[type="checkbox"].custom-checkbox + label.cb-medium-app:after {
            background: #0073c2;
            box-shadow: 2px 0 0 #0073c2,4px 0 0 #0073c2,4px -2px 0 #0073c2,4px -4px 0 #0073c2,4px -6px 0 #0073c2,4px -8px 0 #0073c2;
            color: #0073c2
        }

        input[type="checkbox"].custom-checkbox + label.cb-large-app:after {
            background: #69418f;
            box-shadow: 2px 0 0 #69418f,4px 0 0 #69418f,4px -2px 0 #69418f,4px -4px 0 #69418f,4px -6px 0 #69418f,4px -8px 0 #69418f;
            color: #69418f
        }

        input[type="checkbox"].custom-checkbox + label.disabled:after {
            background: #ccd6db;
            box-shadow: 2px 0 0 #ccd6db,4px 0 0 #ccd6db,4px -2px 0 #ccd6db,4px -4px 0 #ccd6db,4px -6px 0 #ccd6db,4px -8px 0 #ccd6db;
            color: #ccd6db
        }

    input[type="checkbox"].custom-checkbox:checked + label:before {
        background: white
    }

    input[type="checkbox"].custom-checkbox:checked + label:after {
        opacity: 1
    }

    input[type="checkbox"].custom-checkbox:checked + label.disabled:before {
        background: #f2f5f6;
        border-color: #ccd6db
    }

    input[type="checkbox"].custom-checkbox:checked + label.disabled {
        color: rgba(0,0,0,0.55)
    }

        input[type="checkbox"].custom-checkbox:checked + label.disabled:before {
            background: #f2f5f6;
            border-color: #ccd6db;
            outline: none
        }

        input[type="checkbox"].custom-checkbox:checked + label.disabled:after {
            background: #ccd6db;
            box-shadow: 2px 0 0 #ccd6db,4px 0 0 #ccd6db,4px -2px 0 #ccd6db,4px -4px 0 #ccd6db,4px -6px 0 #ccd6db,4px -8px 0 #ccd6db;
            opacity: 1
        }

.datepicker-icon {
    color: rgba(0,0,0,0.9);
    font-size: 16px;
    position: absolute;
    right: 8px;
    top: 10px
}

.datepicker-icon {
    color: rgba(0,0,0,0.65) !important
}

input:focus + .datepicker-icon {
    color: rgba(0,0,0,0.9) !important
}

.ui-datepicker {
    background: white;
    box-shadow: 0 5px 5px 0 rgba(0,20,29,0.2),0 10px 10px 0 rgba(0,20,29,0.1);
    font-family: 'Open Sans', Arial, sans-serif;
    height: auto;
    margin: 8px auto 0;
    z-index: 9 !important
}

    .ui-datepicker a {
        text-decoration: none
    }

    .ui-datepicker table {
        margin: 0px 32px 32px 32px
    }

.ui-datepicker-header {
    background: white;
    color: rgba(0,0,0,0.9);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    padding: 28px 40px 20px 40px
}

.ui-datepicker-title {
    text-align: center
}

.ui-datepicker-prev, .ui-datepicker-next {
    color: rgba(0,0,0,0.9);
    cursor: pointer;
    display: inline-block;
    height: 24px;
    line-height: 600%;
    overflow: hidden;
    text-align: center;
    width: 24px
}

.ui-datepicker-prev {
    float: left
}

.ui-datepicker-next {
    float: right
}

    .ui-datepicker-prev span, .ui-datepicker-next span {
        background-image: none !important
    }

        .ui-datepicker-prev span.ui-icon {
            background-repeat: no-repeat;
            display: block;
            height: 16px;
            overflow: hidden;
            text-indent: 0;
            width: 6px
        }

        .ui-datepicker-prev span:before {
            color: rgba(0,0,0,0.9);
            content: "\E916";
            font-family: CarbonIcons;
            left: 43px;
            position: absolute;
            top: -8px
        }

        .ui-datepicker-next span.ui-icon {
            background-repeat: no-repeat;
            display: block;
            height: 16px;
            overflow: hidden;
            text-indent: 0;
            width: 6px
        }

        .ui-datepicker-next span:before {
            color: rgba(0,0,0,0.9);
            content: "\E917";
            font-family: CarbonIcons;
            position: absolute;
            right: 44px;
            top: -8px
        }

.ui-datepicker th {
    color: #668592;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 0;
    text-transform: uppercase
}

.ui-datepicker tbody td {
    padding: 0;
    text-align: center;
    vertical-align: middle;
    width: 47px
}

    .ui-datepicker tbody td:hover {
        background: #e6ebed;
        cursor: pointer
    }

    .ui-datepicker tbody td.ui-datepicker-current-day {
        background: #00815d
    }

        .ui-datepicker tbody td.ui-datepicker-current-day .ui-state-active {
            color: white
        }

    .ui-datepicker tbody td:last-child {
        border-right: 0px
    }

.ui-datepicker tbody tr {
    height: 40px
}

    .ui-datepicker tbody tr:last-child {
        border-bottom: 0px
    }

.ui-datepicker td span, .ui-datepicker td a {
    color: rgba(0,0,0,0.9);
    font-size: 14px;
    font-weight: 700
}

    .ui-datepicker td span.ui-datepicker-other-month, .ui-datepicker td a.ui-datepicker-other-month {
        color: rgba(0,0,0,0.55)
    }

.ui-datepicker-other-month a {
    color: rgba(0,0,0,0.55) !important
}

.datepicker-icon {
    pointer-events: none
}

.ui-datepicker-multi {
    display: flex
}

#dialog-transition {
    position: relative;
    transition: all 0.5s ease;
    z-index: 1
}

    #dialog-transition .dialog {
        transition: all 0.2s ease
    }

.dialog-component {
    opacity: 0;
    visibility: hidden
}

.fs-dialog-component {
    opacity: 0;
    visibility: hidden
}

.showdialog {
    opacity: 1;
    visibility: visible
}

    .showdialog .dialog {
        transform: translateY(-50px)
    }

.fs-dialog-component.showdialog .dialog {
    transform: translateY(0px)
}

.stop-scroll {
    overflow: hidden
}

.dialog, .example-dialog {
    background: #f2f5f6;
    box-shadow: 0 10px 30px 0 rgba(0,20,29,0.1),0 30px 60px 0 rgba(0,20,29,0.1);
    width: 600px
}

    .dialog .header-section, .example-dialog .header-section {
        border-bottom: 1px solid #ccd6db;
        height: 64px
    }

    .dialog .closebox, .example-dialog .closebox {
        color: #668592;
        cursor: pointer;
        position: absolute;
        right: 32px;
        top: 23px
    }

        .dialog .closebox:hover, .example-dialog .closebox:hover {
            color: #335c6d
        }

    .dialog h3, .example-dialog h3 {
        padding: 19px 0 0 32px
    }

    .dialog .dialog-content, .example-dialog .dialog-content {
        padding: 27px 32px 32px 32px
    }

.fs-dialog h3 {
    padding: 0px
}

.fs-dialog .closebox {
    top: 32px
}

.dialog-background {
    background-color: rgba(0,20,29,0.6);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0
}

    .dialog-background.minimised-bg {
        display: none
    }

.mask-example {
    position: relative
}

.mask-example-background {
    background-color: rgba(0,20,29,0.6);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.dialog {
    left: 50%;
    margin: auto auto auto -300px;
    position: fixed;
    top: 128px
}

.example-dialog {
    margin: 64px 0px;
    position: relative
}

.fs-dialog {
    height: 97vh;
    left: 2.5vw;
    margin: 0px;
    padding: 0px;
    position: fixed;
    top: 3vh;
    transition: all 0.5s ease;
    width: 95vw
}

    .fs-dialog.expanded {
        height: 100vh;
        left: 0;
        top: 0;
        width: 100vw
    }

    .fs-dialog.minimised {
        background-color: white;
        bottom: 0;
        box-shadow: 0 -2px 2px 0 rgba(0,20,29,0.1);
        height: 50px;
        left: calc(100vw - 460px);
        right: 100px;
        top: calc(100vh - 50px);
        width: 360px
    }

    .fs-dialog .minimise {
        color: #668592;
        cursor: pointer;
        position: absolute;
        right: 96px;
        top: 36px
    }

        .fs-dialog .minimise:hover {
            color: #335c6d
        }

    .fs-dialog .expand {
        color: #668592;
        cursor: pointer;
        position: absolute;
        right: 64px;
        top: 32px
    }

        .fs-dialog .expand:hover {
            color: #335c6d
        }

    .fs-dialog .maximise {
        color: #668592;
        cursor: pointer;
        position: absolute;
        right: 64px;
        top: 32px;
        visibility: hidden
    }

        .fs-dialog .maximise:hover {
            color: #335c6d
        }

    .fs-dialog h3 {
        margin-bottom: 60px
    }

.dls-fs-dialog-footer {
    background-color: white;
    bottom: 0;
    height: 60px;
    left: 0;
    position: absolute;
    transition: all 0.2s ease;
    width: 100%
}

.dls-fs-dialog-buttons {
    bottom: 10px;
    position: absolute;
    right: 32px
}

.dls-fs-dialog-header {
    box-shadow: inset 0 -1px 0 0 #ccd6db;
    height: 80px;
    left: 0;
    padding: 27px 32px 32px 32px;
    top: 0;
    transition: all 0.2s ease;
    width: 100%
}

.dls-fs-dialog-content {
    padding: 27px 32px 32px 32px
}

.expanded .dls-fs-dialog-header {
    width: 100vw
}

.expanded .dls-fs-dialog-footer {
    width: 100vw
}

.minimised h3 {
    font-size: 16px
}

.minimised .dls-fs-dialog-header {
    padding-top: 15px
}

.minimised .dls-fs-dialog-footer {
    position: relative
}

.minimised .expand {
    top: 16px;
    visibility: hidden
}

.minimised .minimise {
    top: 20px;
    visibility: hidden
}

.minimised .maximise {
    top: 16px;
    visibility: visible
}

.minimised .closebox {
    top: 16px
}

.dls-form-button-container-split.dls-fs-dialog-buttons {
    bottom: 0;
    position: relative;
    right: 0
}

    .dls-form-button-container-split.dls-fs-dialog-buttons .secondary {
        left: 32px;
        position: absolute;
        top: 10px
    }

    .dls-form-button-container-split.dls-fs-dialog-buttons .primary {
        position: absolute;
        right: 32px;
        top: 10px
    }

.dropdown_list_content {
    background: white;
    box-shadow: 0 5px 5px 0 rgba(0,20,29,0.2),0 10px 10px 0 rgba(0,20,29,0.1);
    height: 220px;
    left: -10px;
    opacity: 0;
    position: relative;
    top: 3px;
    visibility: hidden;
    width: calc(100% + 20px);
    z-index: 99
}

    .dropdown_list_content.visible {
        opacity: 1;
        visibility: visible
    }

.field-icon.cheveron-label i {
    position: relative;
    top: -3px
}

    .field-icon.cheveron-label i.medium-cheveron-position {
        top: 1px
    }

    .field-icon.cheveron-label i.large-cheveron-position {
        top: 4px
    }

.dropdown_list {
    cursor: pointer;
    height: 175px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0px 10px 0px
}

    .dropdown_list.dropdown_height {
        height: 220px
    }

.dropdown_list_item {
    height: 40px;
    padding: 10px 20px 5px 20px;
    width: 276px
}

    .dropdown_list_item:hover {
        background-color: #f2f5f6
    }

.add_new {
    border-top: 1px solid #f2f5f6;
    height: 44px;
    margin-left: 8px;
    padding: 12px 10px 10px 12px;
    width: 260px
}

    .add_new a {
        color: rgba(0,0,0,0.9);
        font-family: OpenSans-Bold;
        font-size: 14px;
        text-decoration: none !important
    }

    .add_new .icon {
        color: rgba(0,0,0,0.9)
    }

.form-right-aligned > .label-input-wrapper > label {
    display: inline-block;
    margin-right: 8px;
    text-align: right;
    width: 150px
}

.form-right-aligned > .dls-form-button-container-left, .form-right-aligned > .label-input-wrapper > .dls-icon-link {
    margin-left: 162px
}

.dls-form {
    display: inline-block;
    width: 100%
}

    .dls-form .optional {
        font-weight: 400
    }

.fieldset > .label-input-wrapper > .dls-input-container {
    margin-bottom: -1px !important
}

    .fieldset > .label-input-wrapper > .dls-input-container > .dls-input:hover {
        z-index: 9 !important
    }

    .fieldset > .label-input-wrapper > .dls-input-container > .dls-input:focus {
        z-index: 9 !important
    }

.form-right-aligned > .label-input-wrapper > .dls-input-container {
    display: inline-block;
    margin-bottom: 32px
}

.form-right-aligned > .label-input-wrapper > .input-inline {
    margin-bottom: 6px
}

.form-right-aligned > .dls-form-button-container-left {
    margin-top: 16px
}

.dls-input-container {
    /*margin-bottom: 24px;*/
    position: relative
}

    .dls-input-container .error-qualifier {
        color: #C7384F;
        margin-top: 3px
    }

    .dls-input-container.input-height-s {
        font-size: 14px;
        height: 32px
    }

    .dls-input-container.input-height-m {
        font-size: 14px;
        line-height: 21px;
        height: 40px
    }

    .dls-input-container.input-height-l {
        font-size: 16px;
        height: 48px
    }

    .dls-input-container.input-width-xs {
        width: 48px
    }

    .dls-input-container.input-width-s {
        width: 80px
    }

    .dls-input-container.input-width-m {
        width: 128px
    }

    .dls-input-container.input-width-l {
        width: 256px
    }

    .dls-input-container.input-width-xl {
        width: 384px
    }

.input-height-s > input {
    padding: 0px 8px
}

.input-height-m > input {
    padding: 0px 11px
}

.input-height-l > input {
    padding: 0px 13px
}

.dls-input {
    border: 1px solid #668592;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: relative
}

    .dls-input.input-number {
        text-align: right
    }

    .dls-input:focus {
        outline: 3px solid #FFB500;
        outline-offset: 0;
    }

    .dls-input.force-focus {
        outline: 3px solid #FFB500;
        outline-offset: 0
    }

    .dls-input::selection {
        background-color: #ccd6db
    }

    .dls-input.input-disabled {
        background-color: #f2f5f6;
        color: rgba(0,0,0,0.55);
        border-color: #ccd6db;
        cursor: not-allowed
    }

    .dls-input.input-read-only {
        border: 0px;
        padding: 0px;
        height: 21px
    }

        .dls-input.input-read-only.input-large-biz {
            border-bottom: 1px solid #ccd6db !important;
            height: 40px
        }

    .dls-input.input-error {
        border: 2px solid #C7384F
    }

    .dls-input::placeholder {
        color: rgba(0,0,0,0.3)
    }

.pod > input {
    margin-bottom: 32px
}

.field-icon {
    z-index: 9;
    width: 16px
}

.input-text-align-right + .field-icon {
    position: absolute;
    top: 8px;
    left: 11px;
    cursor: pointer
}

.input-height-s > .field-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer
}

.input-height-m > .field-icon {
    position: absolute;
    top: 8px;
    right: 11px;
    cursor: pointer
}

.input-height-l > .field-icon {
    position: absolute;
    top: 8px;
    right: 13px;
    cursor: pointer
}

.label-icon {
    position: relative;
    right: -8px;
    top: -2px;
    cursor: pointer
}

.label-disabled {
    color: rgba(0,0,0,0.55)
}

.dls-textarea {
    padding: 8px;
    font-family: Open Sans;
    font-size: 14px;
    height: 128px;
    color: rgba(0,0,0,0.9);
    margin-bottom: 8px;
    width: 368px
}

.dls-textarea-count {
    font-size: 12px;
    text-align: right;
    color: rgba(0,0,0,0.55);
    margin: 0px
}

.dls-form-button-container-right {
    text-align: right;
    margin-top: 48px
}

.dls-form-button-container-left {
    margin-top: 48px
}

    .dls-form-button-container-left .tertiary {
        position: relative;
        right: 16px
    }

.input-inline {
    display: inline-block;
    margin-left: 8px;
    margin-bottom: 6px
}

.input-inline-wrapper {
    margin-bottom: 24px
}

label + .input-inline {
    margin-left: 0px
}

label + p {
    margin-bottom: 8px
}

.label-inline {
    display: inline-block
}

    .label-inline + .dls-input-container {
        margin: 0px 16px 0px 0px
    }

.input-text-align-right {
    text-align: right
}

.input-position-right {
    float: right
}

.input-position-left {
    width: 256px
}

.dls-input-container:hover > .tooltip-container {
    visibility: visible !important;
    opacity: 1;
    transition: opacity 0.2s linear
}

.dls-input-container:focus > .tooltip-container {
    visibility: visible !important;
    opacity: 1;
    transition: opacity 0.2s linear
}

.tooltip-icon > i:hover + .tooltip-container {
    visibility: visible !important;
    opacity: 1;
    transition: opacity 0.2s linear
}

.tooltip-icon i:focus {
    outline: 2px solid #FFB500;
}

input:focus + .field-icon + .tooltip-container {
    visibility: visible !important;
    opacity: 1;
    transition: opacity 0.2s linear
}

label > .tooltip-icon {
    position: relative;
    top: -2px;
    left: 2px
}

.input-inline-wrapper > .dls-icon-link {
    display: block;
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 22px
}

    .input-inline-wrapper > .dls-icon-link i {
        position: relative;
        top: -1px
    }

.tooltip-icon i {
    padding: 0px 2px 2px 2px;
}

.icon:hover {
    text-decoration: none;
}

.input-text-color-icon:hover, .input-text-color-icon-hover {
    color: rgba(0, 0, 0, 0.9);
}

.tooltip-icon i:focus {
    outline: 2px solid #FFB500;
}

.tooltip-container {
    left: calc(100% + 4px);
    min-width: 230px;
    max-width: 256px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.2s linear;
    visibility: hidden;
    z-index: 99
}

    .tooltip-container .tooltip-body {
        background-color: rgba(0, 0, 0, 0.9);
        color: #fff;
        display: inline-block;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        margin-left: 8px;
        padding: 16px;
    }

    .tooltip-container .tooltip-pointer {
        position: absolute;
        top: calc(-8px + 50%);
        width: 0px;
        height: 0px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid;
    }

.error-tooltip > .tooltip-body {
    background-color: #C7384F;
    color: white
}

.general-tooltip > .tooltip-body {
    background-color: black;
    color: white;
}

.error-tooltip > .tooltip-pointer {
    border-right-color: #C7384F
}

.general-tooltip > .tooltip-pointer {
    border-right-color: black;
}

a i:hover {
    text-decoration: none
}

.dialog-content > .system-message {
    left: 185px;
    opacity: 0;
    position: absolute;
    top: 12px;
    visibility: hidden
}

.dialog-content > .dls-form > .label-input-wrapper > label {
    width: 75px
}

.form-right-aligned > .dls-form-button-container-right {
    margin-top: 16px
}

a, .link {
    color: #008200;
    font-size: 14px;
    text-decoration: underline
}

    a.small-biz, .link.small-biz {
        color: #00815d
    }

        a.small-biz:hover, .link.small-biz:hover {
            color: #00674a
        }

    a.medium-biz, .link.medium-biz {
        color: #0073c2
    }

        a.medium-biz:hover, .link.medium-biz:hover {
            color: #005c9b
        }

    a.large-biz, .link.large-biz {
        color: #69418f
    }

        a.large-biz:hover, .link.large-biz:hover {
            color: #5f3b81
        }

    a.disabled, .link.disabled {
        color: rgba(0,0,0,0.3)
    }

        a.disabled:hover, .link.disabled:hover {
            cursor: not-allowed;
            text-decoration: underline
        }

.dls-icon-link {
    display: inline-block
}

    .dls-icon-link > a {
        text-decoration: none
    }

        .dls-icon-link > a:hover > span {
            text-decoration: underline
        }

        .dls-icon-link > a span {
            text-decoration: underline
        }

        .dls-icon-link > a i + span {
            margin-left: 4px;
            margin-right: 4px
        }

        .dls-icon-link > a span + i {
            margin-left: 4px;
            margin-right: 4px
        }

        .dls-icon-link > a.disabled:hover {
            text-decoration: none
        }

        .dls-icon-link > a.disabled > span {
            text-decoration: underline
        }

.download-file > a {
    text-decoration: none
}

@keyframes flash-animate {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.5);
        visibility: hidden
    }

    10% {
        opacity: 1;
        transform: translateY(0px) scale(1);
        visibility: visible
    }

    80% {
        opacity: 1;
        transform: translateY(0px) scale(1);
        visibility: visible
    }

    100% {
        opacity: 0;
        transform: translateY(-20px) scale(1);
        visibility: hidden
    }
}

.system-message {
    background: white;
    border: 1px solid #003349;
    font-size: 14px;
    line-height: 21px;
    max-width: 840px;
    padding: 16px 16px 14px 48px;
    position: relative;
    font-family: 'Open Sans';
}

    .system-message:before {
        background: #003349;
        content: '';
        display: block;
        left: 0;
        position: absolute;
        height: 100%;
        top: 0;
        width: 32px
    }

    .system-message:after {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: white;
        content: "\e923";
        display: block;
        font-family: CarbonIcons;
        font-size: 16px;
        left: 8px;
        margin-top: -10px;
        position: absolute;
        top: 50%
    }

    .system-message .system-message-title {
        font-weight: 700
    }

    .system-message.success-message {
        border-color: #00b000
    }

        .system-message.success-message:before {
            background-color: #00b000
        }

        .system-message.success-message:after {
            content: "\e923"
        }

    .system-message.warning-message {
        border-color: #E96400
    }

        .system-message.warning-message:before {
            background-color: #E96400
        }

        .system-message.warning-message:after {
            content: "\e923"
        }

    .system-message.error-message {
        border-color: #C7384F
    }

        .system-message.error-message:before {
            background-color: #C7384F
        }

        .system-message.error-message:after {
            content: "\e923"
        }

    .system-message.info-message {
        border-color: #0077C8
    }

        .system-message.info-message:before {
            background-color: #0077C8
        }

        .system-message.info-message:after {
            content: "\e92a"
        }

    .system-message.system-toast {
        box-shadow: 0 10px 30px 0 rgba(0,20,29,0.1),0 30px 60px 0 rgba(0,20,29,0.1);
        display: inline-block;
        margin: 0;
        padding: 8px 16px 8px 48px
    }

        .system-message.system-toast.animate-in {
            animation: flash-animate 3s 1 cubic-bezier(0.25, 0.25, 0, 1.5) forwards
        }

.messages-notifications-page .system-message.system-toast {
    margin-bottom: 56px
}

    .messages-notifications-page .system-message.system-toast:last-child {
        margin-bottom: 16px
    }

.dls-marketing-table {
    font-family: 'Open Sans';
    font-size: 18px;
    width: 100%
}

    .dls-marketing-table tr {
        border-bottom: 1px solid #CCCCCC
    }

        .dls-marketing-table tr.compare-header {
            border-bottom: 4px solid #090;
            font-weight: 700
        }

        .dls-marketing-table tr th, .dls-marketing-table tr td {
            padding: 21px 18px
        }

            .dls-marketing-table tr th.dls-product-compare-spacer, .dls-marketing-table tr td.dls-product-compare-spacer {
                padding: 0px;
                width: 8px
            }

        .dls-marketing-table tr th {
            font-weight: bold
        }

    .dls-marketing-table i {
        color: #00A376
    }

.pod .dls-product-compare th:nth-of-type(even), .pod .dls-product-compare td:nth-of-type(even) {
    background-color: rgba(0,0,0,0.05);
    text-align: center;
    vertical-align: middle
}

.pod .dls-product-compare th :first-of-type, .pod .dls-product-compare td :first-of-type {
    width: 330px
}

.pod .dls-product-compare th .dls-product-compare-title, .pod .dls-product-compare td .dls-product-compare-title {
    font-size: 18px
}

.pod .dls-product-compare th .dls-product-compare-detail, .pod .dls-product-compare td .dls-product-compare-detail {
    color: rgba(0,0,0,0.55);
    font-size: 14px
}

.pod .dls-product-compare th .icon-tick, .pod .dls-product-compare td .icon-tick {
    color: #003349
}

    .pod .dls-product-compare th .icon-tick::before, .pod .dls-product-compare td .icon-tick::before {
        font-size: 26px
    }

.pod-dark {
    color: #fff
}

    .pod-dark i {
        color: #00DC00
    }

    .pod-dark .dls-product-compare {
        color: #fff
    }

        .pod-dark .dls-product-compare th:nth-of-type(even), .pod-dark .dls-product-compare td:nth-of-type(even) {
            background-color: rgba(255,255,255,0.1);
            text-align: center;
            vertical-align: middle
        }

        .pod-dark .dls-product-compare th .dls-product-compare-detail, .pod-dark .dls-product-compare td .dls-product-compare-detail {
            color: #fff
        }

        .pod-dark .dls-product-compare th .dls-product-compare-title, .pod-dark .dls-product-compare td .dls-product-compare-title {
            font-size: 18px
        }

        .pod-dark .dls-product-compare th .dls-product-compare-detail, .pod-dark .dls-product-compare td .dls-product-compare-detail {
            color: #fff;
            font-size: 14px
        }

        .pod-dark .dls-product-compare th .icon-tick, .pod-dark .dls-product-compare td .icon-tick {
            color: #00DC00
        }

            .pod-dark .dls-product-compare th .icon-tick::before, .pod-dark .dls-product-compare td .icon-tick::before {
                font-size: 26px
            }

.dls-compare-container {
    display: flex;
    margin-bottom: 70px
}

.dls-product-card {
    background-color: white;
    box-shadow: 0 3px 3px 0 rgba(0,20,29,0.2),0 2px 4px 0 rgba(0,20,29,0.15);
    display: inline-block;
    margin: 8px;
    max-width: 500px;
    position: relative;
    width: 33%
}

@media only screen and (max-width: 1900px) {
    .dls-product-card {
        min-width: 344px
    }
}

.dls-product-card .dls-product-card-header {
    background-color: #f2f5f6;
    font-family: 'Open Sans';
    height: 248px;
    padding: 80px;
    text-align: center;
    width: 100%
}

@media only screen and (max-width: 1900px) {
    .dls-product-card .dls-product-card-header {
        height: 185px;
        padding: 56px 40px
    }
}

@media only screen and (max-width: 600px) {
    .dls-product-card .dls-product-card-header {
        padding: 56px 24px
    }
}

.dls-product-card .dls-product-card-header.fullcolour {
    background-color: #00A376;
    color: white;
    text-align: left
}

.dls-product-card .dls-product-card-header .dls-product-card-sbc {
    font-size: 24px;
    font-weight: 200;
    line-height: 30px;
    margin-bottom: 8px
}

@media only screen and (max-width: 1900px) {
    .dls-product-card .dls-product-card-header .dls-product-card-sbc {
        font-size: 20px;
        font-weight: 200
    }
}

.dls-product-card .dls-product-card-header .dls-product-card-product-name {
    font-size: 40px;
    font-weight: 600;
    line-height: 50px
}

@media only screen and (max-width: 1900px) {
    .dls-product-card .dls-product-card-header .dls-product-card-product-name {
        font-size: 32px;
        font-weight: 600
    }
}

.dls-product-card .sticky-bottom-button {
    bottom: 0px;
    margin-bottom: 40px;
    position: absolute;
    width: 100%
}

@media only screen and (max-width: 1900px) {
    .dls-product-card .sticky-bottom-button {
        margin-bottom: 32px
    }
}

.dls-product-card .sticky-bottom-button button {
    margin-left: 80px;
    margin-right: 80px;
    width: calc(100% - 160px)
}

@media only screen and (max-width: 1900px) {
    .dls-product-card .sticky-bottom-button button {
        margin-left: 32px;
        margin-right: 32px;
        width: calc(100% - 64px)
    }
}

.dls-product-card .dls-product-card-body {
    font-family: 'Open Sans';
    margin-bottom: 128px;
    padding: 40px 80px 0px 80px
}

@media only screen and (max-width: 1900px) {
    .dls-product-card .dls-product-card-body {
        margin-bottom: 108px;
        padding: 32px 40px 0px 40px
    }
}

@media only screen and (max-width: 600px) {
    .dls-product-card .dls-product-card-body {
        padding: 32px 24px 0px 24px
    }
}

.dls-product-card .dls-product-card-body .dls-product-card-body-indent {
    display: flex;
    margin: 40px 80px
}

    .dls-product-card .dls-product-card-body .dls-product-card-body-indent .price {
        color: rgba(0,0,0,0.6);
        font-size: 18px
    }

        .dls-product-card .dls-product-card-body .dls-product-card-body-indent .price .strikethru {
            text-decoration: line-through
        }

        .dls-product-card .dls-product-card-body .dls-product-card-body-indent .price .numeral {
            color: rgba(0,0,0,0.9);
            font-size: 74px
        }

        .dls-product-card .dls-product-card-body .dls-product-card-body-indent .price.center {
            text-align: center
        }

    .dls-product-card .dls-product-card-body .dls-product-card-body-indent button + button {
        margin-top: 18px
    }

.dls-product-card .dls-product-card-body p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 24px
}

.dls-product-card .dls-product-card-body button {
    width: 100%
}

.dls-product-card .dls-product-card-body .product-card-list li {
    font-size: 16px;
    line-height: 24px;
    margin: 0px 0px 12px 40px
}

    .dls-product-card .dls-product-card-body .product-card-list li:before {
        color: #00A376;
        content: '\e950';
        float: left;
        font-size: 18px;
        font-family: CarbonIcons;
        margin-left: -32px
    }

.dls-product-card .dls-product-card-body .product-card-list + button {
    margin-top: 110px
}

.dls-pill-container {
    border: 1px solid #668592;
    border-radius: 12px;
    display: inline-block;
    margin: 0px 8px 0px 0px;
    padding: 2px 8px 2px 8px;
    position: relative
}

    .dls-pill-container:hover {
        cursor: pointer
    }

        .dls-pill-container:hover.pill-container-small-biz {
            border: 1px solid #00815d
        }

            .dls-pill-container:hover.pill-container-small-biz .dls-pill {
                color: #00815d
            }

        .dls-pill-container:hover.pill-container-medium-biz {
            border: 1px solid #0073c2
        }

            .dls-pill-container:hover.pill-container-medium-biz .dls-pill {
                color: #0073c2
            }

        .dls-pill-container:hover.pill-container-large-biz {
            border: 1px solid #69418f
        }

            .dls-pill-container:hover.pill-container-large-biz .dls-pill {
                color: #69418f
            }

    .dls-pill-container.dls-pill-delete {
        border: 1px solid #668592;
        padding: 2px 27px 2px 8px
    }

        .dls-pill-container.dls-pill-delete:hover {
            border: 1px solid #99adb6;
            cursor: pointer
        }

            .dls-pill-container.dls-pill-delete:hover:before {
                background: #ccd6db;
                border-radius: 20px;
                content: '';
                height: 20px;
                position: absolute;
                right: 2px;
                top: 3px;
                width: 20px
            }

    .dls-pill-container .dls-pill {
        color: rgba(0,0,0,0.9);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5
    }

    .dls-pill-container .pill-cross-icon {
        color: #668592;
        position: absolute;
        right: 4px;
        top: 3px
    }

    .dls-pill-container.dls-pill-action.pill-action-small-biz {
        border: 1px solid #00815d
    }

        .dls-pill-container.dls-pill-action.pill-action-small-biz .dls-pill {
            color: #00815d
        }

    .dls-pill-container.dls-pill-action.pill-action-medium-biz {
        border: 1px solid #0073c2
    }

        .dls-pill-container.dls-pill-action.pill-action-medium-biz .dls-pill {
            color: #0073c2
        }

    .dls-pill-container.dls-pill-action.pill-action-large-biz {
        border: 1px solid #69418f
    }

        .dls-pill-container.dls-pill-action.pill-action-large-biz .dls-pill {
            color: #69418f
        }

    .dls-pill-container.dls-pill-action:hover.pill-action-small-biz {
        background: #00815d
    }

    .dls-pill-container.dls-pill-action:hover.pill-action-medium-biz {
        background: #0073c2
    }

    .dls-pill-container.dls-pill-action:hover.pill-action-large-biz {
        background: #69418f
    }

    .dls-pill-container.dls-pill-action:hover .dls-pill {
        color: white
    }

    .dls-pill-container.dls-badge:hover {
        cursor: default
    }

    .dls-pill-container.dls-badge.badge-neutral {
        background-color: #668592;
        border: none
    }

    .dls-pill-container.dls-badge.badge-negative {
        background-color: #C7384F;
        border: none
    }

    .dls-pill-container.dls-badge.badge-attention {
        background-color: #FFB500;
        border: none
    }

        .dls-pill-container.dls-badge.badge-attention .dls-pill {
            color: rgba(0,0,0,0.9)
        }

    .dls-pill-container.dls-badge.badge-positive {
        background-color: #00b000;
        border: none
    }

    .dls-pill-container.dls-badge.badge-generic {
        background-color: #090;
        border: none
    }

    .dls-pill-container.dls-badge .dls-pill {
        color: white
    }

.dls-badge-use {
    margin-bottom: 0px
}

.dls-inline-wrapper * {
    display: inline-block
}

    .dls-inline-wrapper *.dls-pill-container {
        left: 8px;
        top: -4px
    }

.tab-menu .dls-pill-container {
    margin-right: 0px
}

.tab-count-example > ul > li {
    padding-bottom: 10px
}

li > .dls-pill-container {
    margin-right: 3px
}

.cb-product-instances {
    margin-bottom: 20px
}

    .cb-product-instances:last-of-type {
        margin-bottom: 0px
    }

input[type="radio"].custom-radio {
    opacity: 0;
    position: absolute
}

    input[type="radio"].custom-radio + label {
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        padding: 0;
        position: relative
    }

        input[type="radio"].custom-radio + label:hover:before {
            box-shadow: 0 0 0 3px #FFB500
        }

        input[type="radio"].custom-radio + label:before {
            background: white;
            border: 1px solid #668592;
            border-radius: 16px;
            content: '';
            display: inline-block;
            height: 16px;
            margin-right: 10px;
            vertical-align: text-top;
            width: 16px
        }

        input[type="radio"].custom-radio + label.disabled {
            color: rgba(0,0,0,0.55)
        }

            input[type="radio"].custom-radio + label.disabled:before {
                background: #f2f5f6;
                border-color: #ccd6db;
                box-shadow: none
            }

            input[type="radio"].custom-radio + label.disabled:hover {
                cursor: not-allowed
            }

                input[type="radio"].custom-radio + label.disabled:hover:before {
                    border-color: #ccd6db
                }

        input[type="radio"].custom-radio + label.error:before {
            border-color: #C7384F
        }

        input[type="radio"].custom-radio + label:after {
            border-radius: 10px;
            content: '';
            height: 8px;
            left: 5px;
            opacity: 0;
            position: absolute;
            top: 6px;
            width: 8px
        }

        input[type="radio"].custom-radio + label.cb-generic-app:after {
            background: #008200;
            color: #008200
        }

        input[type="radio"].custom-radio + label.cb-small-app:after {
            background: #00815d;
            color: #00815d
        }

        input[type="radio"].custom-radio + label.cb-medium-app:after {
            background: #0073c2;
            color: #0073c2
        }

        input[type="radio"].custom-radio + label.cb-large-app:after {
            background: #69418f;
            color: #69418f
        }

    input[type="radio"].custom-radio:checked + label:before {
        background: white
    }

    input[type="radio"].custom-radio:checked + label.cb-generic-app:after {
        background: #008200
    }

    input[type="radio"].custom-radio:checked + label.cb-small-app:after {
        background: #00815d
    }

    input[type="radio"].custom-radio:checked + label.cb-medium-app:after {
        background: #0073c2
    }

    input[type="radio"].custom-radio:checked + label.cb-large-app:after {
        background: #69418f
    }

    input[type="radio"].custom-radio:checked + label.disabled:before {
        background: #f2f5f6;
        border-color: #ccd6db
    }

    input[type="radio"].custom-radio:checked + label.disabled:after {
        background: #ccd6db
    }

    input[type="radio"].custom-radio:checked + label:after {
        opacity: 1
    }

#sidebar-transition {
    transition: all 0.5s ease
}

    #sidebar-transition .example-sidebar {
        transition: all 0.2s ease
    }

.sidebar-component {
    opacity: 0;
    visibility: hidden
}

.showsidebar {
    opacity: 1;
    visibility: visible
}

    .showsidebar .example-sidebar {
        transform: translateX(-50px)
    }

.stop-scroll {
    overflow: hidden
}

.example-sidebar {
    background: #f2f5f6;
    box-shadow: 0 10px 30px 0 rgba(0,20,29,0.1),0 30px 60px 0 rgba(0,20,29,0.1);
    width: 600px
}

    .example-sidebar .closebox {
        color: #668592;
        cursor: pointer;
        position: absolute;
        right: 32px;
        top: 32px
    }

        .example-sidebar .closebox:hover {
            color: #003349
        }

    .example-sidebar h3 {
        margin: 0px 0px 40px 0px;
        padding: 0px
    }

.example-sidebar {
    height: 100vh;
    position: fixed;
    right: -50px;
    top: 0
}

.dls-sidebar-header {
    background: white;
    box-shadow: inset 0 -1px 0 0 #CCD6DB;
    height: 92px;
    left: 0;
    padding: 27px 32px 32px 32px;
    top: 0;
    transition: all 0.2s ease;
    width: 100%
}

.dls-sidebar-content {
    padding: 27px 32px 32px 32px
}

.sidebar-size-image {
    display: block;
    width: 800px
}

@keyframes bouncedelay {
    0%, 80%, 100% {
        opacity: 0;
        transform: scale(0)
    }

    40% {
        opacity: 1;
        transform: scale(1)
    }
}

.pod.fixed-height-200 {
    display: flex;
    /*height: 200px*/
}

    .pod.fixed-height-200 .spinner {
        margin: auto
    }

.spinner {
    text-align: center;
    display: flex;
    align-items: center;
}

    .spinner.white .bounce {
        background-color: white
    }

    .spinner .bounce {
        animation: bouncedelay 1s infinite ease-in-out both;
        background-color: #008200;
        display: inline-block;
        height: 8px;
        margin-right: 6px;
        width: 8px
    }

button .spinner .bounce {
    background-color: white
}

.spinner .bounce.bounce1 {
    animation-delay: 0s;
    order: 1;
}

.spinner .bounce.bounce2 {
    animation-delay: 0.2s;
    order: 2;
}

.spinner .bounce.bounce3 {
    animation-delay: 0.4s;
    margin-right: 0px;
    order: 3;
}

.spinner.large .bounce {
    animation: bouncedelay 1.2s infinite ease-in-out both;
    background-color: #0073c2;
    height: 16px;
    margin-right: 10px;
    width: 16px
}

    .spinner.large .bounce.bounce1 {
        animation-delay: 0s
    }

    .spinner.large .bounce.bounce2 {
        animation-delay: 0.2s
    }

    .spinner.large .bounce.bounce3 {
        animation-delay: 0.4s;
        margin-right: 0px
    }

.switch-test {
    position: relative;
    display: inline-block;
    height: 40px;
    width: 76px
}

    .switch-test:hover, .switch-test:focus {
        outline: 3px solid #FFB500;
        outline-offset: 0
    }

    .switch-test input {
        display: none
    }

input:checked + .switch-toggle {
    background-color: #00815d
}

.switch-toggle {
    background-color: #ccd6db;
    bottom: 0;
    cursor: pointer;
    display: flex;
    position: absolute;
    font-size: 12px;
    font-weight: 600;
    left: 0;
    letter-spacing: 1px;
    right: 0;
    top: 0;
    -webkit-transition: .4s;
    transition: .4s
}

.switch-on-t {
    color: white;
    margin-left: 5px;
    margin: auto
}

.switch-off-t {
    margin: auto
}

input:checked + .switch-toggle:before {
    -webkit-transform: translateX(36px);
    -ms-transform: translateX(36px);
    transform: translateX(36px)
}

input:checked + .switch-toggle + .switch-line {
    -webkit-transform: translateX(36px);
    -ms-transform: translateX(36px);
    transform: translateX(36px)
}

.switch-toggle:before {
    background-color: white;
    bottom: 2px;
    content: "";
    height: 36px;
    position: absolute;
    left: 2px;
    -webkit-transition: .4s;
    transition: .4s;
    width: 36px
}

.switch-line {
    background-color: #e6ebed;
    height: 14px;
    position: absolute;
    right: 15px;
    top: 14px;
    width: 1px
}

    .switch-line:nth-of-type(2) {
        margin-right: 4px
    }

    .switch-line:last-of-type {
        margin-right: 8px
    }

.cb-product-instances {
    margin-bottom: 20px
}

    .cb-product-instances:last-of-type {
        margin-bottom: 0px
    }

.form-right-aligned > .label-input-wrapper > label {
    display: inline-block;
    margin-right: 8px;
    text-align: right;
    width: 150px
}

.form-right-aligned > .dls-form-button-container-left, .form-right-aligned > .label-input-wrapper > .dls-icon-link {
    margin-left: 162px
}

.dls-form {
    display: inline-block;
    width: 100%
}

    .dls-form .optional {
        font-weight: 400
    }

.fieldset > .label-input-wrapper > .dls-input-container {
    margin-bottom: -1px !important
}

    .fieldset > .label-input-wrapper > .dls-input-container > .dls-input:hover {
        z-index: 9 !important
    }

    .fieldset > .label-input-wrapper > .dls-input-container > .dls-input:focus {
        z-index: 9 !important
    }

.form-right-aligned > .label-input-wrapper > .dls-input-container {
    display: inline-block;
    margin-bottom: 32px
}

.form-right-aligned > .label-input-wrapper > .input-inline {
    margin-bottom: 6px
}

.form-right-aligned > .dls-form-button-container-left {
    margin-top: 16px
}

.dls-input-container {
    /*margin-bottom: 24px;*/
    position: relative
}

    .dls-input-container .error-qualifier {
        color: #C7384F;
        margin-top: 3px
    }

    .dls-input-container.input-height-s {
        font-size: 14px;
        height: 32px
    }

    .dls-input-container.input-height-m {
        font-size: 14px;
        line-height: 21px;
        height: 40px;
        margin-bottom: 10px;
        margin-top: 5px;
    }

    .dls-input-container.input-height-l {
        font-size: 16px;
        height: 48px
    }

    .dls-input-container.input-width-xs {
        width: 48px
    }

    .dls-input-container.input-width-s {
        width: 80px
    }

    .dls-input-container.input-width-m {
        width: 128px
    }

    .dls-input-container.input-width-l {
        width: 256px
    }

    .dls-input-container.input-width-xl {
        width: 384px
    }

.input-height-s > input {
    padding: 0px 8px
}

.input-height-m > input {
    padding: 0px 11px
}

.input-height-l > input {
    padding: 0px 13px
}

.dls-input {
    border: 1px solid #668592;
    width: 100%;
    height: 100%;
    z-index: 0;
    position: relative;
    padding: 2px 0px 2px 11px;
}

    .dls-input.input-number {
        text-align: right
    }

    .dls-input:focus {
        outline: 3px solid #FFB500;
        outline-offset: 0
    }

    .dls-input.force-focus {
        outline: 3px solid #FFB500;
        outline-offset: 0
    }

    .dls-input::selection {
        background-color: #ccd6db
    }

    .dls-input.input-disabled {
        background-color: #f2f5f6;
        color: rgba(0,0,0,0.55);
        border-color: #ccd6db;
        cursor: not-allowed
    }

    .dls-input.input-read-only {
        border: 0px;
        padding: 0px;
        height: 21px
    }

        .dls-input.input-read-only.input-large-biz {
            border-bottom: 1px solid #ccd6db !important;
            height: 40px
        }

    .dls-input.input-error {
        border: 2px solid #C7384F
    }

    .dls-input::placeholder {
        color: rgba(0,0,0,0.3)
    }

.pod > input {
    margin-bottom: 32px
}

.field-icon {
    z-index: 9;
    width: 16px
}

.input-text-align-right + .field-icon {
    position: absolute;
    top: 8px;
    left: 11px;
    cursor: pointer
}

.input-height-s > .field-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer
}

.input-height-m > .field-icon {
    position: absolute;
    top: 8px;
    right: 11px;
    cursor: pointer
}

.input-height-l > .field-icon {
    position: absolute;
    top: 8px;
    right: 13px;
    cursor: pointer
}

.label-icon {
    position: relative;
    right: -8px;
    top: -2px;
    cursor: pointer
}

.label-disabled {
    color: rgba(0,0,0,0.55)
}

.dls-textarea {
    padding: 8px;
    font-family: Open Sans;
    font-size: 14px;
    height: 128px;
    color: rgba(0,0,0,0.9);
    margin-bottom: 8px;
    width: 368px
}

.dls-textarea-count {
    font-size: 12px;
    text-align: right;
    color: rgba(0,0,0,0.55);
    margin: 0px
}

.dls-form-button-container-right {
    text-align: right;
    margin-top: 48px
}

.dls-form-button-container-left {
    margin-top: 48px
}

    .dls-form-button-container-left .tertiary {
        position: relative;
        right: 16px
    }

.input-inline {
    display: inline-block;
    margin-left: 8px;
    margin-bottom: 6px
}

.input-inline-wrapper {
    margin-bottom: 24px
}

label + .input-inline {
    margin-left: 0px
}

label + p {
    margin-bottom: 8px
}

.label-inline {
    display: inline-block
}

    .label-inline + .dls-input-container {
        margin: 0px 16px 0px 0px
    }

.input-text-align-right {
    text-align: right
}

.input-position-right {
    float: right
}

.input-position-left {
    width: 256px
}


.error-tooltip > .tooltip-body {
    background-color: #C7384F;
    color: white
}

.error-tooltip > .tooltip-pointer {
    border-right-color: #C7384F
}




.tooltip-icon {
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.input-text-color-icon {
    color: rgba(0, 0, 0, 0.65);
}

.tooltip-icon i {
    padding: 0 2px 2px;
}

.icon:hover {
    text-decoration: none;
}

.input-text-color-icon:hover, .input-text-color-icon-hover {
    color: rgba(199, 56, 79, 1);
}

.tooltip-icon i:focus {
    outline: 2px solid #ffb500;
}

.tooltip-container {
    left: calc(4px + 100%);
    min-width: 230px;
    max-width: 256px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .2s linear;
    visibility: hidden;
    z-index: 99;
}

.tooltip-container {
    left: calc(4px + 100%);
    min-width: 230px;
    max-width: 256px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .2s linear;
    visibility: hidden;
    z-index: 99;
}

.tooltip-icon > i:hover + .tooltip-container {
    visibility: visible !important;
    opacity: 1;
    transition: opacity .2s linear;
}

.tooltip-icon > i:focus + .tooltip-container {
    opacity: 1;
    transition: opacity .2s linear;
    visibility: visible !important;
}

.tooltip-icon > i:hover + .tooltip-container {
    visibility: visible !important;
    opacity: 1;
    transition: opacity .2s linear;
}

.tooltip-icon > i:focus + .tooltip-container {
    opacity: 1;
    transition: opacity .2s linear;
    visibility: visible !important;
}

.tooltip-container .tooltip-pointer {
    position: absolute;
    top: calc(-8px + 50%);
    width: 0px;
    height: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid;
}

.general-tooltip > .tooltip-pointer {
    border-right-color: #000;
}

.tooltip-container .tooltip-pointer {
    position: absolute;
    top: calc(-8px + 50%);
    width: 0px;
    height: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid;
}

.general-tooltip > .tooltip-pointer {
    border-right-color: #0077c8;
}

.tooltip-container .tooltip-body {
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    margin-left: 8px;
    padding: 16px;
}

.general-tooltip > .tooltip-body {
    background-color: #0077c8;
    color: #fff;
}

.tooltip-container .tooltip-body {
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    margin-left: 8px;
    padding: 16px;
}

.general-tooltip > .tooltip-body {
    background-color: #0077c8;
    color: #fff;
}

a i:hover {
    text-decoration: none
}

.dialog-content > .system-message {
    left: 185px;
    opacity: 0;
    position: absolute;
    top: 12px;
    visibility: hidden
}

.dialog-content > .dls-form > .label-input-wrapper > label {
    width: 75px
}

.form-right-aligned > .dls-form-button-container-right {
    margin-top: 16px
}

.wizard-progress-indicator {
    padding-top: 19px;
    text-align: center
}

    .wizard-progress-indicator .progressbar {
        counter-reset: section;
        display: inline-flex;
        justify-content: center;
        list-style-type: none
    }

        .wizard-progress-indicator .progressbar li {
            font-weight: 700;
            margin-right: 96px;
            position: relative
        }

            .wizard-progress-indicator .progressbar li:last-child {
                margin-right: 0
            }

                .wizard-progress-indicator .progressbar li:last-child:after {
                    display: none
                }

            .wizard-progress-indicator .progressbar li .link {
                text-decoration: none
            }

            .wizard-progress-indicator .progressbar li:after {
                background: rgba(0,0,0,0.55);
                content: '';
                display: block;
                height: 1px;
                position: absolute;
                right: -64px;
                top: 8px;
                width: 48px
            }

            .wizard-progress-indicator .progressbar li.completed:after {
                background: #00815d
            }

            .wizard-progress-indicator .progressbar li.completed .link {
                color: #00815d
            }

                .wizard-progress-indicator .progressbar li.completed .link:before {
                    color: #00815d;
                    content: "\E950";
                    font-family: CarbonIcons;
                    left: -24px
                }

        .wizard-progress-indicator .progressbar .link:before {
            content: " " counter(section) " ";
            counter-increment: section;
            font-weight: 700;
            left: -17px;
            position: absolute
        }

        .wizard-progress-indicator .progressbar .active .link {
            color: rgba(0,0,0,0.9)
        }

            .wizard-progress-indicator .progressbar .active .link:before {
                color: rgba(0,0,0,0.9)
            }

.previous-page {
    visibility: hidden
}

.previous-page-visible {
    visibility: visible
}

body.global-search-active {
    overflow: hidden
}

    body.global-search-active .main-body .all-content, body.global-search-active .homepage-wrapper {
        opacity: 0.4
    }

.global-search {
    background: white;
    border: 1px solid #00815d;
    box-shadow: 0 10px 40px 0 rgba(0,20,29,0.04),0 50px 80px 0 rgba(0,20,29,0.1);
    left: 50%;
    margin-left: -320px;
    opacity: 0;
    position: fixed;
    transition: all 0.2s ease;
    top: 10vh;
    transform: translateY(30px);
    visibility: hidden;
    width: 640px;
    z-index: 9999
}

    .global-search.visible {
        transform: translateY(0px);
        opacity: 1;
        visibility: visible
    }

    .global-search .global-search-input-container {
        position: relative
    }

        .global-search .global-search-input-container:before {
            content: "\E92F";
            display: block;
            font-family: CarbonIcons;
            height: 16px;
            left: 16px;
            position: absolute;
            top: 25px;
            width: 16px
        }

        .global-search .global-search-input-container input.search-box {
            font-family: "Open Sans";
            font-size: 18px;
            height: 64px;
            line-height: 64px;
            padding: 0px 24px 0px 40px;
            width: 100%
        }

            .global-search .global-search-input-container input.search-box:focus {
                outline: none
            }

    .global-search #search-results {
        width: 100%
    }

        .global-search #search-results .no-result {
            padding: 0px 24px 24px 40px
        }

    .global-search .search-result {
        display: block;
        padding: 11px 24px 11px 40px;
        position: relative;
        text-decoration: none
    }

        .global-search .search-result:after {
            background: url("../visuals/enter-key.svg") center center no-repeat;
            content: '';
            display: block;
            height: 16px;
            margin-top: -8px;
            opacity: 0;
            position: absolute;
            right: 16px;
            top: 50%;
            width: 16px
        }

        .global-search .search-result .search-result-title {
            color: rgba(0,0,0,0.9);
            font-size: 16px;
            font-weight: 600
        }

            .global-search .search-result .search-result-title + .search-result-summary:not(:empty) {
                margin-top: 5px
            }

        .global-search .search-result .search-result-summary {
            color: rgba(0,0,0,0.74);
            font-size: 13px;
            font-weight: 400;
            line-height: 18px
        }

        .global-search .search-result:hover, .global-search .search-result:focus {
            background: #00815d;
            outline: none
        }

            .global-search .search-result:hover .search-result-title, .global-search .search-result:hover .search-result-summary, .global-search .search-result:focus .search-result-title, .global-search .search-result:focus .search-result-summary {
                color: white
            }

            .global-search .search-result:hover:after, .global-search .search-result:focus:after {
                opacity: 1
            }

        .global-search .search-result:last-child {
            margin-bottom: 8px
        }

.table {
    display: grid;
    grid-row-gap: 2px;
    max-width: 100%
}

.row {
    background-color: white;
    display: grid;
    grid-template-columns: 24px 52px 120px 120px auto 140px 120px 120px 200px;
    grid-template-rows: 44px
}

    .row.row-2 {
        grid-template-columns: 24px 41px 88px 92px auto 88px 120px 115px 168px 80px
    }

    .row.row-3 {
        grid-template-columns: 120px 120px auto 140px 120px 120px 200px
    }

@media screen and (max-width: 1490px) {
    .row {
        grid-template-columns: 24px 60px 100px 100px auto 120px 100px 100px 180px
    }
}

@media screen and (max-width: 1366px) {
    .row {
        grid-template-columns: 24px 60px 100px 80px auto 80px 80px 80px 160px
    }
}

@media screen and (max-width: 1215px) {
    .row {
        grid-template-columns: 16px 44px 100px 75px auto 80px 65px 65px 140px
    }
}

@media screen and (max-width: 1115px) {
    .row {
        grid-template-columns: 16px 44px 95px 75px auto 80px 65px 65px 100px
    }
}

.row.row-header {
    grid-template-rows: 24px;
    margin-bottom: -2px
}

.row:hover {
    background-color: #f7f9fa
}

.row.selected {
    background: #00815d;
    color: white
}

    .row.selected:hover {
        background: #00815d;
        color: white
    }

    .row.selected .cell span.status.overdue {
        color: white
    }

.row.actions-visible .cell {
    background: #f7f9fa
}

.row.actions-visible .actions-container {
    background: #e6ebed
}

    .row.actions-visible .actions-container .actions-menu {
        opacity: 1 !important;
        top: 24px !important;
        visibility: visible !important
    }

.row .heading {
    background: #f2f5f6;
    border-bottom: 1px solid #E6EBED;
    color: rgba(0,0,0,0.55);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.33px;
    padding: 0px 16px
}

    .row .heading.centered {
        text-align: center
    }

    .row .heading.number {
        text-align: right
    }

.row .cell {
    line-height: 44px;
    padding: 0px 16px
}

    .row .cell.actions-cell {
        display: flex
    }

    .row .cell .actions-container {
        cursor: pointer;
        display: flex;
        height: 24px;
        margin: auto;
        position: relative;
        width: 32px
    }

        .row .cell .actions-container:hover {
            background: #e6ebed
        }

        .row .cell .actions-container .actions-menu {
            background: white;
            box-shadow: 0 10px 20px 0 rgba(0,20,29,0.2),0 20px 40px 0 rgba(0,20,29,0.1);
            opacity: 0;
            padding: 8px 0px;
            position: absolute;
            right: 0;
            top: 16px;
            transition: all 0.1s ease-out;
            visibility: hidden;
            z-index: 9
        }

            .row .cell .actions-container .actions-menu li {
                font-size: 14px;
                font-weight: 700;
                height: 40px;
                line-height: 40px;
                padding: 0px 24px;
                white-space: nowrap
            }

                .row .cell .actions-container .actions-menu li i {
                    padding-right: 8px
                }

                .row .cell .actions-container .actions-menu li:hover {
                    background-color: #f2f5f6
                }

    .row .cell .actions {
        background: #668592;
        display: block;
        height: 4px;
        margin: auto;
        position: relative;
        width: 4px
    }

        .row .cell .actions:after, .row .cell .actions:before {
            background: #668592;
            content: '';
            height: 4px;
            left: -6px;
            position: absolute;
            width: 4px
        }

        .row .cell .actions:before {
            left: 6px
        }

    .row .cell.number {
        text-align: right
    }

    .row .cell span {
        font-size: 14px;
        z-index: 4
    }

        .row .cell span.status {
            font-weight: 700
        }

            .row .cell span.status.overdue {
                color: #E42C2D
            }

        .row .cell span label {
            z-index: 3
        }

        .row .cell span.checkbox {
            position: relative;
            top: 13px
        }

.row .dls-input {
    border-color: transparent;
    height: 32px;
    padding: 0px 11px
}

    .row .dls-input:focus {
        border: 1px solid #668592
    }

    .row .dls-input.input-number {
        margin-right: -11px
    }

.row.active-inputs .dls-input {
    border-color: #668592
}

.row:hover .dls-input {
    border-color: #668592
}

.table-pagination {
    color: #668592;
    display: flex;
    font-size: 14px;
    font-weight: 700;
    max-width: 1200px
}

    .table-pagination .pagination-wrapper {
        display: flex;
        margin: auto;
        padding-top: 16px
    }

        .table-pagination .pagination-wrapper .pag-item {
            height: 32px;
            line-height: 32px;
            margin-right: 8px;
            padding: 0 8px;
            width: 32px;
            text-align: center
        }

            .table-pagination .pagination-wrapper .pag-item:hover {
                background: #e6ebed;
                cursor: pointer
            }

            .table-pagination .pagination-wrapper .pag-item.pag-active {
                background: #e6ebed;
                color: rgba(0,0,0,0.9);
                font-weight: 700
            }

            .table-pagination .pagination-wrapper .pag-item.pag-prev, .table-pagination .pagination-wrapper .pag-item.pag-next {
                width: auto
            }

.table-sortable .icon-drag {
    cursor: move
}

.table-sortable .row-sortable:focus {
    outline: none
}

.table-sortable .draggable-source--is-dragging {
    background: rgba(0,130,0,0.2);
    box-shadow: inset 0px 0px 0px 1px #008200
}

.table-sortable .draggable-mirror {
    box-shadow: 0 10px 20px 0 rgba(0,20,29,0.2),0 20px 40px 0 rgba(0,20,29,0.1);
    cursor: move !important;
    width: 1200px;
    z-index: 99999
}

    .table-sortable .draggable-mirror:focus {
        cursor: move !important
    }

.icon-guidance {
    max-width: 840px
}

@keyframes fadeInSageChat {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.live-chat-trigger, .show-live-chat-timed-popup {
    margin-bottom: 40px
}

.live-chat-dialog {
    background: white;
    bottom: 0px;
    box-shadow: 0 10px 30px 0 rgba(0,20,29,0.1),0 30px 60px 0 rgba(0,20,29,0.1);
    max-width: 420px;
    opacity: 0;
    overflow: hidden;
    position: fixed;
    right: 5vh;
    transition: all 300ms cubic-bezier(0.25, 0.25, 0, 1.5);
    visibility: hidden;
    width: 90vw
}

@media screen and (max-width: 510px) {
    .live-chat-dialog {
        right: 5vw
    }
}

.live-chat-dialog.live-chat-visible {
    bottom: 5vh;
    opacity: 1;
    visibility: visible
}

@media screen and (max-width: 510px) {
    .live-chat-dialog.live-chat-visible {
        right: 5vw
    }
}

.live-chat-dialog .connected-message, .live-chat-dialog .loading, .live-chat-dialog .chat-message-container, .live-chat-dialog .reply-container, .live-chat-dialog .in-queue, .live-chat-dialog .connecting-message {
    display: none
}

.live-chat-dialog .live-chat-header {
    background: #0073c2;
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 16px 24px
}

    .live-chat-dialog .live-chat-header .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 3px
    }

    .live-chat-dialog .live-chat-header .status {
        font-size: 13px
    }

        .live-chat-dialog .live-chat-header .status .spinner {
            display: inline-block;
            margin-left: 8px
        }

    .live-chat-dialog .live-chat-header .close {
        cursor: pointer;
        height: 20px;
        position: relative;
        top: 10px;
        transition: all 0.2s ease
    }

        .live-chat-dialog .live-chat-header .close:hover {
            transform: scale(1.3)
        }

    .live-chat-dialog .live-chat-header.want-to-chat {
        border: none;
        color: white;
        display: none
    }

        .live-chat-dialog .live-chat-header.want-to-chat .icon-close {
            margin: 0
        }

        .live-chat-dialog .live-chat-header.want-to-chat .start-chat {
            margin-top: 16px
        }

.live-chat-dialog .content-container {
    padding: 24px
}

    .live-chat-dialog .content-container .dls-input {
        height: 40px;
        padding: 0 11px
    }

    .live-chat-dialog .content-container.chat-message-container {
        height: 390px;
        overflow: auto
    }

        .live-chat-dialog .content-container.chat-message-container .closed-chat-segment {
            color: rgba(0,0,0,0.55);
            margin: 40px 0 24px;
            text-align: left
        }

            .live-chat-dialog .content-container.chat-message-container .closed-chat-segment .closed-chat-timestamp {
                font-size: 13px;
                margin-bottom: 16px
            }

            .live-chat-dialog .content-container.chat-message-container .closed-chat-segment .chat-download-text {
                border-top: 1px solid #f2f5f6;
                padding-top: 16px;
                margin-bottom: 16px
            }

            .live-chat-dialog .content-container.chat-message-container .closed-chat-segment .download-transcript {
                color: #003349;
                cursor: pointer;
                font-weight: 700;
                margin-top: 16px
            }

                .live-chat-dialog .content-container.chat-message-container .closed-chat-segment .download-transcript:hover {
                    color: #003349;
                    text-decoration: underline
                }

    .live-chat-dialog .content-container.loading {
        padding: 80px 0;
        text-align: center
    }

    .live-chat-dialog .content-container .field-container {
        margin-bottom: 20px
    }

        .live-chat-dialog .content-container .field-container:last-child {
            margin-bottom: 0
        }

    .live-chat-dialog .content-container label {
        display: block;
        font-weight: 700;
        margin-bottom: 0;
        padding-bottom: 5px
    }

    .live-chat-dialog .content-container .optional {
        color: rgba(0,0,0,0.55);
        font-size: 13px
    }

.live-chat-dialog .live-chat-footer {
    text-align: right
}

    .live-chat-dialog .live-chat-footer .reply-container textarea {
        background: transparent;
        border: none;
        font-family: inherit;
        font-size: 14px;
        height: 50px;
        padding: 16px 24px;
        resize: none;
        width: 100%
    }

        .live-chat-dialog .live-chat-footer .reply-container textarea:focus {
            outline: none
        }

    .live-chat-dialog .live-chat-footer .reply-container .reply-actions {
        padding: 8px 8px 0 0
    }

        .live-chat-dialog .live-chat-footer .reply-container .reply-actions button {
            transition: all 0.2s ease
        }

            .live-chat-dialog .live-chat-footer .reply-container .reply-actions button svg path {
                fill: #0073c2
            }

            .live-chat-dialog .live-chat-footer .reply-container .reply-actions button:hover {
                background: transparent;
                border-color: transparent;
                transform: scale(1.2)
            }

    .live-chat-dialog .live-chat-footer .web-chat-connect {
        margin: 16px 24px 16px 0
    }

    .live-chat-dialog .live-chat-footer .submit-message {
        background: transparent;
        color: #003349
    }

        .live-chat-dialog .live-chat-footer .submit-message:hover {
            background: #003349;
            color: white
        }

.live-chat-dialog .message-interface .customer-reply, .live-chat-dialog .message-interface .agent-reply {
    animation: fadeInSageChat 0.3s ease forwards;
    display: flex;
    opacity: 0;
    position: relative;
    margin-bottom: 32px
}

    .live-chat-dialog .message-interface .customer-reply:last-child, .live-chat-dialog .message-interface .agent-reply:last-child {
        margin-bottom: 0px
    }

    .live-chat-dialog .message-interface .customer-reply:before, .live-chat-dialog .message-interface .agent-reply:before {
        border-top: 10px solid transparent;
        bottom: 0;
        content: '';
        height: 0px;
        position: absolute;
        width: 0px
    }

    .live-chat-dialog .message-interface .customer-reply:after, .live-chat-dialog .message-interface .agent-reply:after {
        background: white;
        border-radius: 50%;
        bottom: 0px;
        content: '';
        height: 22px;
        position: absolute;
        width: 13px
    }

.live-chat-dialog .message-interface .message-reply {
    display: inline-block;
    font-size: 14px;
    line-height: 21px;
    max-width: 70%;
    padding: 8px 16px;
    position: relative
}

    .live-chat-dialog .message-interface .message-reply .time-stamp {
        bottom: -20px;
        color: rgba(0,0,0,0.55);
        font-size: 12px;
        left: 16px;
        position: absolute;
        min-width: 50px
    }

.live-chat-dialog .message-interface .customer-reply {
    justify-content: flex-end
}

    .live-chat-dialog .message-interface .customer-reply:before {
        border-left: 8px solid #f2f5f6;
        right: -8px
    }

    .live-chat-dialog .message-interface .customer-reply:after {
        right: -13px
    }

    .live-chat-dialog .message-interface .customer-reply .message-reply {
        background: #f2f5f6
    }

        .live-chat-dialog .message-interface .customer-reply .message-reply .time-stamp {
            left: auto;
            right: 16px
        }

.live-chat-dialog .message-interface .agent-reply {
    justify-content: flex-start
}

    .live-chat-dialog .message-interface .agent-reply:before {
        border-right: 8px solid #005c9b;
        left: -8px
    }

    .live-chat-dialog .message-interface .agent-reply:after {
        left: -13px
    }

    .live-chat-dialog .message-interface .agent-reply .message-reply {
        background: #005c9b;
        color: white
    }

.live-chat-dialog .confirm-dialog {
    background: rgba(0,20,29,0.6);
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

    .live-chat-dialog .confirm-dialog.visible {
        display: flex
    }

    .live-chat-dialog .confirm-dialog .confirm-content {
        background: white;
        box-shadow: 0 10px 20px 0 rgba(0,20,29,0.2),0 20px 40px 0 rgba(0,20,29,0.1);
        margin: auto;
        padding: 24px;
        max-width: 90%
    }

        .live-chat-dialog .confirm-dialog .confirm-content .confirm-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 16px
        }

        .live-chat-dialog .confirm-dialog .confirm-content .download-transcript {
            display: block;
            margin-bottom: 24px
        }

    .live-chat-dialog .confirm-dialog .confirm-actions {
        text-align: right
    }

.live-chat-dialog.web-chat-loading .connecting-message {
    display: block
}

.live-chat-dialog.web-chat-loading .loading {
    display: block
}

.live-chat-dialog.web-chat-loading .info-collect, .live-chat-dialog.web-chat-loading .connect-options, .live-chat-dialog.web-chat-loading .notconnected-message {
    display: none
}

.live-chat-dialog.web-chat-end-session .footer .reply-container {
    opacity: 0.5
}

.live-chat-dialog.web-chat-connected .loading, .live-chat-dialog.web-chat-connected .connecting-message {
    display: none
}

.live-chat-dialog.web-chat-connected .first-reply {
    animation: fadeInSageChat 0.3s ease forwards 1s;
    opacity: 0
}

.live-chat-dialog.web-chat-connected .reply-container {
    background: #f2f5f6;
    display: flex;
    position: relative
}

    .live-chat-dialog.web-chat-connected .reply-container .chat-end-trigger {
        color: rgba(0,0,0,0.2);
        cursor: pointer
    }

.live-chat-dialog.web-chat-connected .connected-message, .live-chat-dialog.web-chat-connected .chat-message-container {
    display: block
}

.live-chat-dialog.web-chat-connected .notconnected-message, .live-chat-dialog.web-chat-connected .info-collect, .live-chat-dialog.web-chat-connected .connect-options {
    display: none
}

.live-chat-dialog.web-chat-queued .loading {
    display: none
}

.live-chat-dialog.web-chat-queued .connecting-message .spinner {
    display: inline-block
}

    .live-chat-dialog.web-chat-queued .connecting-message .spinner .bounce {
        background-color: white
    }

.live-chat-dialog.web-chat-queued .in-queue {
    display: block
}

.live-chat-dialog.live-chat-prompt .want-to-chat {
    display: flex
}

.live-chat-dialog.live-chat-prompt .info-collect, .live-chat-dialog.live-chat-prompt .live-chat-footer, .live-chat-dialog.live-chat-prompt .main-header {
    display: none
}

.learn_more_tt {
    height: auto;
    margin: 50px auto 0 auto;
    max-width: 355px;
    position: relative;
    width: 356px
}

    .learn_more_tt::after {
        border-bottom: 16px solid transparent;
        border-top: 16px solid transparent;
        border-left: 16px solid #003349;
        content: "";
        height: 0;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 0
    }

    .learn_more_tt .card_graphic {
        background: url("/visuals/ipd_card_graphic.png") center center/contain no-repeat;
        box-shadow: 0 10px 20px 0 rgba(0,20,29,0.2),0 20px 40px 0 rgba(0,20,29,0.1);
        height: 76px;
        left: 105px;
        position: absolute;
        top: -45px;
        transform: rotate3d(0.5, 0.866, 0, 16deg) rotate(-7deg);
        width: 120px
    }

    .learn_more_tt .learn_inner_container {
        background: #003349;
        box-shadow: 0 10px 20px 0 rgba(0,20,29,0.2),0 20px 40px 0 rgba(0,20,29,0.1);
        max-width: 327px;
        padding-top: 56px
    }

        .learn_more_tt .learn_inner_container h3, .learn_more_tt .learn_inner_container p {
            color: white;
            padding: 0 24px;
            text-align: center
        }

        .learn_more_tt .learn_inner_container h3 {
            margin-bottom: 16px
        }

        .learn_more_tt .learn_inner_container .card_icons {
            background: url("/visuals/ipd_card_icons.png") center center/contain no-repeat;
            height: 30px;
            margin: 0 auto 16px auto;
            width: 165px
        }

        .learn_more_tt .learn_inner_container .powered_stripe {
            background: url("/visuals/ipd_powered_by_stripe.svg") center center/contain no-repeat;
            height: 17px;
            margin: 0 auto 32px auto;
            opacity: 0.5;
            width: 102px
        }

        .learn_more_tt .learn_inner_container .learn_CTA_container {
            background-color: #265264;
            height: 40px;
            width: 100%
        }

        .learn_more_tt .learn_inner_container .business-small, .learn_more_tt .learn_inner_container .learn_dismiss_CTA {
            float: right;
            margin: 0
        }

        .learn_more_tt .learn_inner_container .learn_dismiss_CTA {
            background-color: transparent
        }

            .learn_more_tt .learn_inner_container .learn_dismiss_CTA:hover {
                background-color: #003349
            }

    .learn_more_tt.basic_dark, .learn_more_tt.basic_light {
        display: inline-block;
        margin: 0
    }

        .learn_more_tt.basic_dark .learn_inner_container, .learn_more_tt.basic_light .learn_inner_container {
            padding-top: 24px
        }

    .learn_more_tt:nth-child(2) {
        margin-left: 32px
    }

    .learn_more_tt.basic_light {
        z-index: 1
    }

        .learn_more_tt.basic_light::after {
            display: none
        }

        .learn_more_tt.basic_light .triangle-with-shadow {
            height: 72px;
            overflow: hidden;
            position: absolute;
            right: 5px;
            top: 104px;
            width: 24px;
            z-index: 2
        }

            .learn_more_tt.basic_light .triangle-with-shadow:after {
                background-color: white;
                box-shadow: 5px 10px 20px 0 rgba(0,20,29,0.2),10px 20px 40px 0 rgba(0,20,29,0.1);
                content: "";
                height: 32px;
                left: -20px;
                position: absolute;
                transform: rotate(45deg);
                top: 10px;
                width: 32px
            }

        .learn_more_tt.basic_light .learn_inner_container {
            background-color: white
        }

        .learn_more_tt.basic_light h3, .learn_more_tt.basic_light p {
            color: rgba(0,0,0,0.9)
        }

        .learn_more_tt.basic_light .learn_CTA_container {
            background-color: #e6ebed
        }

        .learn_more_tt.basic_light .learn_dismiss_CTA {
            color: rgba(0,0,0,0.9)
        }

            .learn_more_tt.basic_light .learn_dismiss_CTA:hover {
                background-color: #ccd6db
            }

.empty-states-img, .empty-states-img-2 {
    background: url("/visuals/empty_states_small.png") center center/contain no-repeat;
    height: 452px;
    width: 626px
}

@media screen and (min-width: 1200px) {
    .empty-states-img, .empty-states-img-2 {
        background: url("/visuals/empty_states_large.png") center center/contain no-repeat;
        height: 555px;
        width: 982px
    }
}

@media screen and (min-width: 1920px) {
    .empty-states-img, .empty-states-img-2 {
        background: url("/visuals/empty_states_large.png") center center/contain no-repeat;
        height: 845px;
        width: 100%
    }
}

.empty-states-img-2 {
    background: url("/visuals/empty_states_large-2.png") center center/contain no-repeat
}

.hero-banners-img {
    background: url("/visuals/hero-banners-resp.jpg") center center/contain no-repeat;
    height: 452px;
    width: 626px
}

.hero-banners-img-4 {
    background: url("/visuals/hero-banners-resp-example-4.jpg") center center/contain no-repeat;
    height: 452px;
    width: 626px
}

.hero-banner {
    background-image: url("/visuals/hero-banner-background-example-1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 12px;
    width: 100%
}

    .hero-banner.customer-banner {
        background-image: url("/visuals/customer-banner-background-example-1.jpg")
    }

    .hero-banner.campaign-banner {
        background-image: url("/visuals/customer-banner-campaign-example.jpg")
    }

    .hero-banner.carousel-banner {
        background-image: url("/visuals/hero-banner-background-example-1-carousel.jpg")
    }

    .hero-banner#lh-slt {
        height: 340px
    }

    .hero-banner#mh-tlt, .hero-banner#sh-flt {
        height: 360px
    }

    .hero-banner#sh-crsl {
        height: 320px
    }

        .hero-banner#sh-crsl .hero-banner-content {
            right: 80px
        }

    .hero-banner#dcs, .hero-banner#bcs {
        height: 320px
    }

    .hero-banner#ch {
        height: 390px
    }

    .hero-banner .hb-large {
        padding: 68px 80px
    }

    .hero-banner .hb-small {
        padding: 40px 80px
    }

    .hero-banner .hb-small-carousel {
        padding: 40px 40px
    }

    .hero-banner .hero-banner-content {
        background: #090;
        display: flex;
        position: absolute;
        right: 12px;
        width: 462px
    }

        .hero-banner .hero-banner-content .hero-text .customer-name {
            font-weight: 600;
            margin-bottom: 0
        }

        .hero-banner .hero-banner-content .hero-text .customer-quote {
            font-family: 'Open Sans', sans-serif;
            font-style: italic;
            font-weight: 400
        }

    .hero-banner .customer-story {
        background: white;
        left: 80px;
        width: 351px
    }

        .hero-banner .customer-story.campaign {
            background: transparent
        }

            .hero-banner .customer-story.campaign p {
                color: white
            }

        .hero-banner .customer-story .customer-speech-mark {
            left: 12px;
            position: absolute;
            top: 12px
        }

        .hero-banner .customer-story .grey {
            background: rgba(255,255,255,0.05)
        }

        .hero-banner .customer-story .stars {
            display: flex;
            margin: 0px -1px 40px -1px
        }

            .hero-banner .customer-story .stars i {
                color: white;
                margin: 0px 1px
            }

                .hero-banner .customer-story .stars i:before {
                    font-size: 8px;
                    line-height: 8px
                }

.example-dropdown-hb {
    margin-bottom: 24px
}

    .example-dropdown-hb .label-input-wrapper label {
        width: auto
    }

    .example-dropdown-hb .dropdown_list_content {
        height: auto;
        position: absolute
    }

        .example-dropdown-hb .dropdown_list_content .dropdown_height {
            height: auto
        }

.hero-banner-nav {
    background-image: url("/visuals/hero-banner-com-navigation.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: 32px;
    width: 100%
}

.hero-banner-features {
    background-image: url("/visuals/hero-banner-tab-content.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: 517px;
    width: 100%
}

.hero-content-container, .customer-story-container {
    display: none
}

    .hero-content-container.first-container, .customer-story-container.first-container {
        display: block
    }

.ftu_panel {
    display: inline-block;
    height: auto;
    margin: 32px 0 58px 0;
    min-height: 785px;
    overflow: hidden;
    padding: 40px;
    position: relative;
    vertical-align: top;
    width: 432px
}

    .ftu_panel .icon-close {
        color: #8099a4;
        cursor: pointer;
        float: right
    }

        .ftu_panel .icon-close:hover {
            color: #003349
        }

    .ftu_panel .ftu_progress_container {
        height: 62px;
        position: relative;
        width: 303px
    }

        .ftu_panel .ftu_progress_container .progress_bar_bg {
            background-color: #e6ebed;
            height: 16px;
            margin-bottom: 8px;
            width: 100%
        }

        .ftu_panel .ftu_progress_container .progress_bar_fill {
            background-color: #00b000;
            height: 100%;
            width: 14%
        }

        .ftu_panel .ftu_progress_container p {
            color: rgba(0,0,0,0.65);
            float: right;
            font-size: 14px;
            font-weight: 600;
            margin: 0
        }

    .ftu_panel .ftu_welcome_video {
        background: url("/visuals/ftu_video_bg.png") center center/cover no-repeat;
        box-shadow: 0 5px 5px 0 rgba(0,20,29,0.2),0 10px 10px 0 rgba(0,20,29,0.1);
        cursor: pointer;
        height: 185px;
        margin: 40px auto 48px auto;
        position: relative;
        transition: all 0.3s ease-in-out;
        width: 100%
    }

        .ftu_panel .ftu_welcome_video .dimmer {
            background-color: black;
            height: 100%;
            opacity: 0.3;
            position: absolute;
            transition: all 0.3s ease-in-out;
            width: 100%
        }

        .ftu_panel .ftu_welcome_video:hover {
            box-shadow: 0 10px 20px 0 rgba(0,20,29,0.2),0 20px 40px 0 rgba(0,20,29,0.1);
            cursor: pointer;
            transform: scale(1.05)
        }

            .ftu_panel .ftu_welcome_video:hover .dimmer {
                opacity: 0.2
            }

        .ftu_panel .ftu_welcome_video .player_controls_container {
            background-color: white;
            bottom: 0;
            height: 50px;
            left: 0;
            padding: 16px 24px;
            position: absolute
        }

            .ftu_panel .ftu_welcome_video .player_controls_container .play_icon {
                border-bottom: 8px solid transparent;
                border-left: 10px solid rgba(0,0,0,0.85);
                border-top: 8px solid transparent;
                display: inline-block;
                height: 0;
                width: 0
            }

            .ftu_panel .ftu_welcome_video .player_controls_container p {
                display: inline-block;
                font-weight: 900;
                letter-spacing: 1px;
                margin-left: 8px;
                position: relative;
                top: -2px
            }

    .ftu_panel p, .ftu_panel a.link, .ftu_panel button {
        font-size: 16px;
        line-height: 24px
    }

        .ftu_panel p:last-of-type {
            margin-bottom: 32px
        }

        .ftu_panel button.tertiary {
            padding-left: 0
        }

    .ftu_panel .back_container {
        display: inline-block;
        float: left;
        position: relative;
        top: -4px
    }

        .ftu_panel .back_container button {
            font-size: 14px
        }

    .ftu_panel .help_link {
        font-size: 14px;
        margin-bottom: 32px
    }

    .ftu_panel.wizard {
        margin-right: 24px
    }

        .ftu_panel.wizard .ftu_progress_container {
            margin-bottom: 16px
        }

        .ftu_panel.wizard .progress_bar_fill {
            width: 56%
        }

        .ftu_panel.wizard .feature_img {
            background: url("/visuals/FTU_Products.png") center center/cover no-repeat;
            height: 255px;
            left: -177px;
            position: relative;
            top: -25px;
            width: 470px
        }

    .ftu_panel.advanced .back_container {
        top: -8px;
        width: 290px
    }

    .ftu_panel.advanced .feature_img {
        background: url("/visuals/FTU_advanced.png") center center/contain no-repeat;
        height: 255px;
        margin: 40px 0 38px 0;
        position: relative;
        width: 345px
    }

    .ftu_panel.advanced ol {
        counter-reset: item;
        margin-bottom: 40px;
        margin-left: 0;
        padding-left: 0
    }

        .ftu_panel.advanced ol > li {
            counter-increment: item;
            list-style: none inside;
            margin-bottom: 10px;
            margin-left: 0;
            padding-left: 0
        }

            .ftu_panel.advanced ol > li:before {
                content: " " counter(item) " ";
                border: 1px solid #99adb6;
                border-radius: 20px;
                font-size: 13px;
                font-weight: 900;
                margin-right: 8px;
                padding: 2px 4px 3px 8px
            }

            .ftu_panel.advanced ol > li button {
                height: 32px;
                margin-right: 8px;
                padding: 0
            }

            .ftu_panel.advanced ol > li a {
                text-decoration: none
            }

            .ftu_panel.advanced ol > li .icon-question {
                color: #b3c2c8;
                position: relative;
                top: -2px
            }

                .ftu_panel.advanced ol > li .icon-question:hover {
                    color: #003349
                }

.community-backlog-page .standard-list {
    max-width: 580px
}

.align-center {
    text-align: center !important;
}

.nav-link:hover, .help-link:hover {
    color: white !important;
    background-color: #00805D;
}

    .nav-link:hover a, .help-link:hover a {
        color: white !important;
        background-color: #00805D;
    }

.col-auto {
    margin-right: 20px;
}

.section-page {
    background-color: white;
    box-shadow: 0 3px 3px 0 rgba(0,20,29,0.2), 0 2px 4px 0 rgba(0,20,29,0.15);
    background-color: white;
    overflow: scroll;
    height: calc(100% - 106px);
    overflow-y: scroll;
    overflow-x: hidden;
    padding-left: 30px;
    padding-right: 30px;
}

.section-page-container {
    /*margin-top: 105px;*/
    top: 100px;
    bottom: 0;
    position: fixed;
    height: calc(100% - 150px);
    width: calc(100% - 260px);
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background-color: rgb(0, 129, 93);
    -webkit-box-shadow: 0 0 1px rgba(0,20,29,0.1);
}

.ui-widget-overlay {
    background: rgba(0,20,29,0.6);
    display: flex;
    height: 100vh;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: all 0.2s ease;
    visibility: hidden;
    width: 100vw;
    z-index: 11;
    opacity: 1;
    visibility: visible;
}

.ui-dialog {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0;
    background-color: #f2f5f6 !important;
    background: #f2f5f6 !important;
    height: 100vh;
    position: fixed;
    top: 0;
    transition: all 0.2s ease;
    width: 100vw;
    z-index: 11;
}

.ui-widget-header {
    border-bottom: 1px solid #ccd6db;
    height: 64px;
    background: #f2f5f6 !important;
    width: 600px
}

.ui-dialog-title {
    color: black;
    background-color: #f2f5f6 !important;
    background: #f2f5f6 !important;
}

.ui-widget-content {
    border: 1px solid #ddd;
    background: #f2f5f6 !important;
    color: #333;
}

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        border: 1px solid #ccc;
        font-weight: bold;
    }


.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer;
}

.ui-dialog-title {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    line-height: normal;
    color: black;
    background-color: #f2f5f6 !important;
    background: #f2f5f6 !important;
}

.ui-dialog-buttonset .ui-button {
    background-color: #008200;
    border: 0px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-family: 'Open Sans';
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    margin-right: 16px;
    padding: 0px 24px 0px 24px;
    text-decoration: none;
    border-radius: 0;
}

    .ui-dialog-buttonset .ui-button:nth-of-type(2) {
        background-color: #f2f5f6 !important;
        background: #f2f5f6 !important;
        color: #008200;
        line-height: 38px
    }


    .ui-dialog-buttonset .ui-button:focus {
        background-color: #f2f5f6 !important;
        background: #f2f5f6 !important;
        color: #008200;
        line-height: 38px;
        outline: none !important;
        border: none !important;
    }

.ui-button:hover {
    background-color: #006800;
    text-decoration: none;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer;
}

.ui-widget-header {
    border: none !important;
    border-bottom: 1px solid #ccd6db !important;
    height: 50px;
    background: #f2f5f6 !important;
    width: 100%;
}

.ui-state-hover {
    background: #006800 !important;
}


.ui-icon-closethick {
    color: black !important;
}

.ui-dialog-titlebar-close {
    padding: 10px !important;
    border: none !important;
    color: black !important;
    top: 15px !important
}

.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border: none !important;
    border-width: none !important;
    background-image: none;
    margin-top: 2em !important;
    padding: 0 !important;
}

.ui-state-default .ui-icon {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: sagearmonyeicons;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: 16px;
    vertical-align: middle;
    background: none !important;
}

.ui-icon {
    background: none !important;
}

.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: sagearmonyeicons;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: 16px;
    vertical-align: middle;
}

    .ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close:before {
        content: "\0078";
    }

.ui-icon:hover {
    background-image: none !important;
    background-color: none !important;
}

.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close.ui-state-hover {
    background-color: transparent !important;
    background: none !important;
    font-weight: bold;
    color: black !important;
}


.ui-state-focus {
    border: none !important;
    background: #006800 !important;
    font-weight: bold;
}

.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
    padding: 0;
}

.ui-dialog .ui-dialog-titlebar-close {
    position: relative;
    left: 40px !important;
    right: 0 !important;
    margin: 0 !important;
    top: 0 !important;
    width: 0px !important;
    padding: 0 !important;
    height: 0 !important;
    color: #668592 !important;
    cursor: pointer;
}

:focus {
    outline: -webkit-focus-ring-color auto 0px !important;
}

/* MVC Grids over rides*/

.mvc-grid {
    font-family: 'Open Sans';
    overflow: auto !important;
    padding: 1px 1px;
}

    .mvc-grid table {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        font-family: 'Open Sans';
    }

.mvc-grid-col-75 {
    width: 75px;
    padding-right: 0px !important;
}

.mvc-grid-col-100 {
    width: 100px;
}

.mvc-grid-col-200 {
    width: 200px;
    padding-right: 0px !important;
}

.mvc-grid-col-300 {
    width: 300px;
}

.mvc-grid-col-400 {
    width: 400px;
}

.mvc-grid-headers {
    border: none !important;
}

.mvc-grid-selected {
    background: #d9e0e4 !important;
    box-shadow: none !important;
}

.mvc-grid table tr {
    cursor: pointer;
}

    .mvc-grid table tr:hover {
        background-color: #f2f5f6;
    }

        .mvc-grid table tr:hover .user-grid-icon-wrappper-hide {
            display: block;
            margin-top: -22px;
        }

        .mvc-grid table tr:hover input ~ .user-grid-icon-wrappper-hide {
            display: block;
            margin-top: -25px;
        }

.mvc-grid table th {
    background-color: #FFFFFF;
    border: none;
    font-weight: 600;
    border-bottom: 1px solid #ccd6db;
    font-size: 14px;
    height: unset
}


.mvc-grid table td:not(.mvc-grid-hidden) ~ td:not(.mvc-grid-hidden) {
    border-left: none;
    border-top: none;
    border-right: none;
}

.mvc-grid table td:not(.mvc-grid-hidden) {
    border-left: 1px solid #ccd6db;
    border-top: none;
    border-right: none;
}

.mvc-grid table td:last-of-type {
    border-top: none;
    border-right: 1px solid #ccd6db !important;
}

.mvc-grid .mvc-grid-page-sizes {
    margin: 0;
    font-size: 13px;
    position: absolute;
    left: 0;
}

.mvc-grid-pager {
    background: #fafbfb;
    border: 1px solid #d9e0e4;
    color: rgba(0,0,0,0.9);
    font-size: 13px;
    height: 40px;
    line-height: 40px;
}

    .mvc-grid-pager button {
        background-color: transparent !important;
        text-decoration: underline;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.9) !important;
        margin: 0 !important;
        height: 35px;
        outline: none !important;
        border: none !important;
        line-height: 13px !important;
    }

    .mvc-grid-pager div.pages-of {
        display: inline-block;
        height: 39px !important;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
    }

        .mvc-grid-pager div.pages-of input {
            width: 55px;
            height: 22px;
            text-align: center;
            color: rgba(0, 0, 0, 0.9);
            border-color: rgba(0, 0, 0, 0.9);
            border-width: 1px;
            border-style: solid;
            display: inline;
            margin-right: 4px;
            margin-left: 2px;
        }

.mvc-grid button.disabled {
    color: rgba(0,0,0,0.3) !important;
    cursor: default !important;
}

.mvc-grid-page-sizes select {
    border: 1px solid #dddddd;
    padding: 0 !important;
    font: inherit;
}

.mvc-grid .mvc-grid-page-sizes:before {
    Content: "Show";
    margin-left: 15px;
}

.mvc-grid .mvc-grid-page-sizes:after {
    Content: "items";
}

.mvc-grid-filter {
    margin-top: 0px;
    font-family: sagearmonyeicons !important;
    padding: 0;
}

    .mvc-grid-filter:before {
        content: "\0043" !important;
        top: -5px !important;
        position: relative;
        color: rgba(0, 0, 0, 0.8);
    }

.mvc-grid-row-filters .filterable {
    padding: 0.25em;
    padding-left: 0 !important;
}

.hidden-col {
    display: none;
}

.mcv-grid-client {
    /*border: 1px red solid !important;*/
}

.mcv-grid-company {
}

    .mcv-grid-company .mvc-grid-row-filters {
        /*border: 1px red solid !important;
        position: absolute;
        top: -10px;
        margin-top: 10px;
        left: 0;
        right: 0;*/
    }

.pod-table .col {
    overflow-y: scroll;
}

    .pod-table .col.wide {
        overflow: scroll;
    }

.text-display-show {
    display: inline-block;
    padding: 0;
    width: 100% !important;
    line-height: 25px;
    margin: 0 !important;
}

.edit-hide {
    display: none;
}


.mvc-grid-form-edit td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

    .mvc-grid-form-edit td .dls-input {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

.mvc-grid-link:after {
    font-family: sagearmonyeicons;
    content: '\0027';
    color: green;
}

.mvc-grid-link-up:after {
    font-family: sagearmonyeicons;
    content: '\0027';
    color: green;
}

.mvc-grid-link-down:after {
    font-family: sagearmonyeicons;
    content: '\0027';
}

.mvc-grid-link-broken:after {
    font-family: sagearmonyeicons;
    content: '\0028';
    color: red;
}

.mvc-grid-glyph {
    display: inline-block;
    padding-left: 15px;
    font-size: 18px;
}

.mvc-grid-filter-required-empty {
    border: 2px solid #c7384f !important;
    padding: 0 !important;
}

.mvc-grid-row-filters select.mvc-grid-value {
    padding: 0px 0.2em 0 0.2em !important;
}

.mvc-grid-popup {
}

.mcv-grid-user tr {
    height: 41px;
}

.mvc-grid-controls {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 100%;
    margin-bottom: 1rem !important;
    margin-top: 16px;
    justify-content: flex-end;
}

input:focus, select:focus {
    outline: 2px solid #FFB500 !important;
}

select {
    cursor: pointer;
}

    select option {
        cursor: pointer;
        margin-top: 8px;
        font-family: 'Open Sans', sans-serif;
        line-height: 1.5;
        border-radius: 5px;
        -webkit-appearance: none;
        box-shadow: 0 5px 5px 0 rgba(0,20,29,0.2),0 10px 10px 0 rgba(0,20,29,0.1);
        padding: 10px 0px 10px 0px
    }

.float-right-save {
    float: right !important;
    margin: 20px;
}

h1, h2, h3, h4 {
    font-family: "Open Sans";
}

.checkbox-container {
    cursor: pointer;
    display: block;
    margin-bottom: 12px;
    position: relative;
    padding-left: 24px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .checkbox-container input {
        cursor: pointer;
        height: 0;
        opacity: 0;
        position: absolute;
        width: 0;
    }

    .checkbox-container .checkmark {
        background-color: #fff;
        box-sizing: unset;
        border: 1px solid #668592;
        height: 16px;
        left: 0;
        position: absolute;
        top: 3px;
        width: 16px;
    }

        .checkbox-container .checkmark:after {
            border: 1px solid;
            box-sizing: unset;
            border-width: 0 3px 3px 0;
            content: "";
            display: none;
            height: 8px;
            left: 5px;
            position: absolute;
            top: 1px;
            transform: rotate(45deg);
            width: 4px;
        }

    .checkbox-container input:checked ~ .checkmark:after {
        display: block;
    }

    .checkbox-container:hover input ~ .checkmark {
        outline: 3px solid #FFB500;
    }

.mvc-grid .checkbox-container {
    bottom: 5px;
    left: calc(50% - 17px);
    width: 0;
}

.dls-checkbox-container {
    cursor: pointer;
    display: block;
    margin-bottom: 12px;
    position: relative;
    padding-left: 24px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.container {
    min-height: 100%;
    margin-bottom: 80px;
}

.dls-checkbox-container input {
    cursor: pointer;
    height: 0px;
    opacity: 0;
    position: absolute;
    width: 0px;
}

.dls-checkbox-container .checkmark {
    background-color: #fff;
    border: 1px solid #668592;
    height: 16px;
    left: 0px;
    position: absolute;
    top: 3px;
    width: 16px;
}

.dialog, .example-dialog {
    background: #f2f5f6;
    box-shadow: 0px 10px 30px 0px rgba(0,20,29,0.1), 0px 30px 60px 0px rgba(0,20,29,0.1);
    width: auto;
}



.dialog-component .dialog, .fs-dialog-component .dialog {
    transition: all .3s cubic-bezier(.25,.25,0,1.5);
    transform: perspective(500px) translate3d(0px, 20px, 10px);
    z-index: 11;
}

.dialog-visible.dialog-component .dialog, .dialog-visible.fs-dialog-component .dialog {
    transform: perspective(500px) translate3d(0px, 0px, 0px);
}

.dialog-component, .fs-dialog-component {
    background: rgba(0,20,29,.6);
    display: flex;
    height: 100vh;
    left: 0px;
    opacity: 0;
    position: fixed;
    top: 0px;
    transition: all .2s ease;
    visibility: hidden;
    width: 100vw;
    z-index: 11;
}

.dialog-visible.dialog-component, .dialog-visible.fs-dialog-component {
    opacity: 1;
    visibility: visible;
}

.dialog .header-section, .example-dialog .header-section {
    border-bottom: 1px solid #ccd6db;
    height: 64px;
}

.dialog .dialog-content, .example-dialog .dialog-content {
    padding: 27px 32px 32px;
}

.dialog h3, .example-dialog h3 {
    padding: 19px 0 0 32px;
}

.dialog .closebox, .example-dialog .closebox {
    color: #668592;
    cursor: pointer;
    position: absolute;
    right: 32px;
    top: 23px;
    margin: 16px;
}

.hs-dialog-content {
}

.hs-dialog-content {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.hs-dialog {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.hs-dialog-text-small {
    font-size: 13px;
    font-family: 'Open Sans';
    width: 100% !important;
}

    .hs-dialog-text-small > .icon-copy {
        float: right;
        margin-right: 30px;
    }

#newCreds {
    width: 578px;
}

.statusCircle {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px grey solid;
    margin-left: 10px;
    margin-right: 5px;
}

    .statusCircle.green-gradient {
        background: radial-gradient(circle at 15px 5px, yellow, #006E00);
    }

    .statusCircle.red-gradient {
        background: radial-gradient(circle at 15px 5px, #E9AFB9, red);
    }

    .statusCircle.grey-gradient {
        background: radial-gradient(circle at 15px 5px, white, grey);
    }

    .statusCircle.yellow-gradient {
        background: radial-gradient(circle at 15px 5px, yellow, orange);
    }

    .statusCircle.white-gradient {
        background: radial-gradient(circle at 15px 5px, white, limegreen)
    }

.sf-auth-pod {
    display: flex;
    align-items: center;
    height: 40px;
}

.sf-auth-indicator {
    display: flex;
    align-items: center;
}

.sf-auth-button {
    margin-left: auto;
}

.cp-auth-indicator {
    display: flex;
    align-items: center;
}

.bgl-auth-pod {
    display: flex;
    align-items: center;
    height: 40px;
}

.bgl-auth-indicator {
    display: flex;
    align-items: center;
}

.bgl-auth-button {
    margin-left: auto;
}

.htc-auth-pod {
    display: flex;
    align-items: center;
    height: 40px;
}

.htc-auth-indicator {
    display: flex;
    align-items: center;
}

.htc-auth-button {
    margin-left: auto;
}

.fa-auth-pod {
    display: flex;
    align-items: center;
    height: 40px;
}

.fa-auth-indicator {
    display: flex;
    align-items: center;
}

.fa-auth-button {
    margin-left: auto;
}


.prac-selected {
    background-color: #f2f5f6;
}

.link-edit-col {
}

.prov-credentials {
    margin-left: 20px;
}

    .prov-credentials td:first-child {
        width: 80%
    }

    .prov-credentials td:nth-child(2) {
        width: 20%
    }

.sprov-credentials table td:nth-child(1) {
    background-color: red;
}

.adv-setting-checkbox {
    display: inline-block;
    float: right;
}

.show-div {
    display: block;
}

.hide-div {
    display: none;
}
.prac-edit-title {
    padding-top:30px;
    padding-bottom:10px;
    font-family:'Open Sans';
}

.section-user-container {
    height: calc(100% - 106px);
    max-height: calc(100% - 106px);
    display: flex;
    padding-bottom: 15px;
    flex: 1 0 auto;
}

.section-user-details {
    background-color: white;
    box-shadow: 0 3px 3px 0 rgba(0,20,29,0.2), 0 2px 4px 0 rgba(0,20,29,0.15);
    margin-right: 5px;
    display: flex;
    flex-grow: 3;
}

.section-user-details-left-col {
    padding-top: 10px;
    flex-basis: 50%;
}

.section-user-details-right-col {
    flex-basis: 50%;
    padding-top: 10px;
}

.section-user-other-details-container {
    display: flex;
    flex-direction: column;
    flex: 2 0 auto;
    height: 100%;
    min-height: 0;
}

.section-user-practices {
    background-color: white;
    box-shadow: 0 3px 3px 0 rgba(0,20,29,0.2), 0 2px 4px 0 rgba(0,20,29,0.15);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 110px
}

.section-user-roles {
    background-color: white;
    box-shadow: 0 3px 3px 0 rgba(0,20,29,0.2), 0 2px 4px 0 rgba(0,20,29,0.15);
    margin-top: 5px;
    padding-left: 30px;
    padding-right: 30px;
    flex-shrink: 0;
}

.section-user-products {
    background-color: white;
    box-shadow: 0 3px 3px 0 rgba(0,20,29,0.2), 0 2px 4px 0 rgba(0,20,29,0.15);
    margin-top: 5px;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.user-products {
    display: flex;
    flex-direction: column;
}

.user-product {
    display: flex;
}

.employee-roles {
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
}

.employee-role {
    padding-top: 10px;
    display: flex;
    gap: 10px;
}

.section-user-heading {
    padding: 10px;
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.ws-org-info {
    display: inline-flex;
    height: 32px;
}

    .ws-org-info input {
        height: 30px;
        width: 340px;
        padding-left: 4px;
    }

    .ws-org-info span {
        padding-left: 4px;
        width: 340px;
    }

        .ws-org-info span:first-child {
            padding-right: 3px;
            padding-left: unset;
            width: 122px;
        }

    .ws-org-info i {
        padding-top: 5px;
        margin-left: 7px;
    }

.ws-org-id {
    height: 22px;
    margin-top: 7px;
    margin-bottom: auto;
}

.flex-v-divider {
    flex-basis: 100%;
    height: 0;
}