/* Minification failed. Returning unminified contents.
(1044,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '4px'
(2332,40): run-time error CSS1034: Expected closing parenthesis, found ','
(2332,40): run-time error CSS1042: Expected function, found ','
(2332,44): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(10237,35): run-time error CSS1030: Expected identifier, found ':'
(10237,46): run-time error CSS1031: Expected selector, found ')'
(10237,46): run-time error CSS1025: Expected comma or open brace, found ')'
 */
/* Normalize.css   http://necolas.github.io/normalize.css/2.1.3/normalize.css
Use this in preference to the classic 'reset' options http://www.cssreset.com/which-css-reset-should-i-use/ as it is lighter and less confusing/easier to analyse.  
===================== */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden], template {
    display: none;
}

html {
    font-family: 'Quicksand', Arial, Sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

a {
    background: transparent;
    outline: 0;
}

    a:focus {
        outline: thin dotted;
    }

    a:active, a:hover {
        outline: 0;
    }

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b, strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

mark {
    background: #ff0;
    color: #000;
}

code, kbd, pre, samp {
    font-family: monospace, serif;
    font-size: 1em;
}

pre {
    white-space: pre-wrap;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

button, input {
    line-height: normal;
}

button, select {
    text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

    button[disabled], html input[disabled] {
        cursor: default;
    }

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

    input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

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

/* HTML tags the streamSWEET way
===================== */
body {
    font-size: 16px;
    line-height: 22px;
    color: #192a33;
    margin: 0;
    background-color: #fff;
}

p {
    margin: 5px 0 22px 0;
}

h1 {
    font-size: 42px;
    line-height: 48px;
    font-weight: 700;
    color: #1f2533;
    margin: 20px 0px 12px 0px;
}

h2 {
    font-size: 34px;
    line-height: 40px;
    font-weight: 700;
    color: #1f2533;
    margin: 34px 0px 10px 0px;
}

h3 {
    font-size: 26px;
    line-height: 30px;
    font-weight: 500;
    color: #1f2533;
    margin: 22px 0px 8px 0px;
}

h4 {
    font-size: 19px;
    line-height: 23px;
    font-weight: 500;
    color: #1f2533;
    margin: 20px 0px 2px 0px;
}

h5 {
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
    color: #1f2533;
    margin: 10px 0px 2px 0px;
}

h6 {
    font-size: 13px;
    line-height: 16px;
    font-weight: bold;
    color: #1f2533;
    margin: 10px 0px 2px 0px;
}

blockquote {
    quotes: none;
    font-style: italic;
}

hr {
    border-top-width: 2px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #eaeaea;
    margin-right: 0px;
    margin-left: 0px;
}

img {
    border: 0;
    display: block;
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    background: transparent;
}

    a:link, a:visited {
        color: #4ccdd9;
        text-decoration: none;
    }

    a:active, a:hover, a:focus {
        color: #f0a047;
        text-decoration: none;
    }

/* PROBLEM WITH CACHING THE DETAIL.CSS FILE SO TEMPORARILY PLACE CSS HERE */

.PDsystemBanner {
    padding: 0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 20px;
}

.PDsystemSnapshotCol1 {
    width: 28%;
    float: left;
    padding-top: 10px;
}

.PDsystemImgPanel {
    border: 1px solid #d8d9d9;
    border-radius: 3px;
    padding: 3px;
    margin-bottom: 20px;
}

/* Easy access for this site */
.HeaderHowitWorks {
    padding: 0;
    height: 160px;
    background-color: #00a2a9;
}

.HeaderContact {
    padding: 0;
    height: 160px;
    background-color: #00a2a9;
}

.HeaderPricing {
    margin: 0;
    padding: 0;
    height: 160px;
    background-color: #00a2a9;
}

.HeaderFAQS {
    padding: 0;
    height: 160px;
    background-color: #00a2a9;
}

.TopBanner {
    margin: 0 auto;
    width: 100%;
    max-width: 1680px;
}

.Intro {
    font-weight: 200;
}

.FeaturesIntroPanel {
    border-radius: 14px;
    padding: 30px;
    background-color: #ebedf5;
}

/* Icons */
.IconPrice {
    float: left;
    width: 48px;
    height: 48px;
    margin-right: 6px;
}

.PriceItem {
    padding-top: 5px;
    min-height: 70px;
}

.IconSelfRecord {
    width: 62px;
    height: 56px;
    background: url(/ImagesCust/imagescont/CMS/icon_self_record.svg) no-repeat;
    overflow: hidden;
}

.IconPlans {
    width: 62px;
    height: 56px;
    background: url(/ImagesCust/imagescont/CMS/icon_plan.svg) no-repeat;
    overflow: hidden;
}

.IconExport {
    width: 62px;
    height: 56px;
    background: url(/ImagesCust/imagescont/CMS/icon_export.svg) no-repeat;
    overflow: hidden;
}

.IconExportSimple {
    width: 62px;
    height: 56px;
    background: url(/ImagesCust/imagescont/CMS/icon_export_simple.svg) no-repeat;
    overflow: hidden;
}

.IconDownloadPD {
    width: 62px;
    height: 56px;
    background: url(/ImagesCust/imagescont/CMS/icon_download_pd.svg) no-repeat;
    overflow: hidden;
}

.IconPDHistory {
    width: 62px;
    height: 56px;
    background: url(/ImagesCust/imagescont/CMS/icon_pd_history.svg) no-repeat;
    overflow: hidden;
}

.IconPay {
    width: 62px;
    height: 56px;
    background: url(/ImagesCust/imagescont/CMS/icon_pay.svg) no-repeat;
    overflow: hidden;
}

.IconAddEmployee {
    width: 62px;
    height: 56px;
    background: url(/ImagesCust/imagescont/CMS/icon_add_employee.svg) no-repeat;
    overflow: hidden;
}

.IconCustomReport {
    width: 62px;
    height: 56px;
    background: url(/ImagesCust/imagescont/CMS/icon_custom_report.svg) no-repeat;
    overflow: hidden;
}

.IconFeature {
    color: #00a2a9;
}

/* Form Icons */

/* Special Feature Boxes */
.SpecialFeatureBox1 {
    padding: 40px 60px 40px 60px;
    border-radius: 30px;
    background: url(/assets/images/tile_featurebox_1.svg) no-repeat top right #f6f0e8;
}

.SpecialFeatureBox2 {
    padding: 40px 60px 40px 60px;
    border-radius: 30px;
    background: url(/assets/images/tile_featurebox_2.svg) no-repeat top right #eaf4f5;
}

.SpecialOfferTable {
    width: 340px !important;
}

    .SpecialOfferTable p {
        margin: 0;
    }

/* Graphic Page Titles */

.PageTitle {
}

    .PageTitle h2 {
        margin: 0;
    }

    .PageTitle p {
        margin: 0;
    }

.RegoCard {
    border-radius: 10px;
    background-color: #fff;
    padding: 25px 10px;
    margin: 20px auto;
    width: 90%;
    -webkit-box-shadow: 0 0 9px 9px rgba(96, 96, 96, 0.1);
    -moz-box-shadow: 0 0 9px 9px rgba(96, 96, 96, 0.1);
    box-shadow: 0 0 9px 9px rgba(96, 96, 96, 0.1);
    margin-bottom: 45px;
}

/* Standard Register Link */
.RegisterLink {
    text-align: center;
    font-weight: 500;
    padding: 12px 0px;
    font-size: 16px;
    line-height: 16px;
    display: block;
    border-radius: 4px;
    z-index: 10009;
    background-color: #ff9c2b;
    margin: 10px auto;
    border: none;
    color: #fff;
    width: 100%;
}

a.RegisterLink:link, a.RegisterLink:visited {
    text-decoration: none;
    color: #fff;
}

a.RegisterLink:hover, a.RegisterLink:active, .RegisterLink:hover {
    text-decoration: none;
    color: #ff9c2b;
    background-color: #0a454d;
    transition: all 0.3s ease;
}

/* Coming Soon */
.RegisterSoonLink {
    text-align: center;
    font-weight: 400;
    padding: 12px 25px;
    font-size: 16px;
    line-height: 16px;
    display: block;
    border-radius: 4px;
    z-index: 10009;
    background-color: #666;
    margin: 10px auto;
}

a.RegisterSoonLink:link, a.RegisterSoonLink:visited {
    text-decoration: none;
    color: #fff;
}

a.RegisterSoonLink:hover, a.RegisterSoonLink:active {
    text-decoration: none;
    color: #ff9c2b;
    background-color: #0a454d;
    transition: all 0.3s ease;
}

/* Specs Table Link */
.RegisterLinkSpecs {
    text-align: center;
    font-weight: 400;
    padding: 12px 25px;
    font-size: 16px;
    line-height: 16px;
    display: block;
    border-radius: 4px;
    z-index: 10009;
    background-color: #ff9c2b;
    margin: 10px auto;
    border: none;
    color: #fff;
    width: 100%;
}

a.RegisterLinkSpecs:link, a.RegisterLinkSpecs:visited {
    text-decoration: none;
    color: #fff;
}

a.RegisterLinkSpecs:hover, a.RegisterLinkSpecs:active {
    text-decoration: none;
    color: #ff9c2b;
    background-color: #0a454d;
    transition: all 0.3s ease;
}

/* Small Buttons */
.RegisterLinkSml {
    text-align: center;
    font-weight: 400;
    padding: 6px 15px;
    font-size: 12px;
    line-height: 12px;
    display: block;
    border-radius: 4px;
    background-color: #ff9c2b;
    margin: 6px auto;
}

a.RegisterLinkSml:link, a.RegisterLinkSml:visited {
    text-decoration: none;
    color: #fff;
}

a.RegisterLinkSml:hover, a.RegisterLinkSml:active {
    text-decoration: none;
    color: #ff9c2b;
    background-color: #0a454d;
    transition: all 0.3s ease;
}

.RegisterSubscribedSml {
    text-align: center;
    font-weight: 400;
    padding: 6px 15px;
    font-size: 12px;
    line-height: 12px;
    display: block;
    border-radius: 4px;
    background-color: #fff;
    margin: 6px auto;
    border: 1px solid #4ba0a7;
}

a.RegisterSubscribedSml:link, a.RegisterSubscribedSml:visited {
    text-decoration: none;
    color: #0a454d;
}

a.RegisterSubscribedSml:hover, a.RegisterSubscribedSml:active {
    text-decoration: none;
    color: #ff9c2b;
    background-color: #0a454d;
    transition: all 0.3s ease;
}

/* Standard Register Link */
.MoreInfoLink {
    text-align: center;
    font-weight: 400;
    padding: 12px 25px;
    font-size: 16px;
    line-height: 16px;
    display: block;
    border-radius: 4px;
    z-index: 10009;
    background-color: #fff;
    margin: 10px auto;
    border: 1px solid #ccc;
}

a.MoreInfoLink:link, a.MoreInfoLink:visited {
    text-decoration: none;
    color: #0a454d;
}

a.MoreInfoLink:hover, a.MoreInfoLink:active {
    text-decoration: none;
    color: #ff9c2b;
    background-color: #fafafa;
    transition: all 0.3s ease;
}

/* Pricing */

.PriceType1 {
    font-size: 15px;
    line-height: 20px;
    background-color: #fff;
    float: left;
    width: 47%;
    margin: 30px 1%;
    padding: 30px;
    border: 1px solid #ccc;
    border-top: 10px solid #4ba0a7;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0px 16px 24px rgba(31, 68, 76, 0.18);
}

.PriceType2 {
    font-size: 15px;
    line-height: 20px;
    background-color: #fff;
    float: right;
    width: 47%;
    margin: 30px 1%;
    padding: 30px;
    border: 1px solid #ccc;
    border-top: 10px solid #4ba0a7;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0px 16px 24px rgba(31, 68, 76, 0.18);
}

.PriceBox {
    font-size: 15px;
    line-height: 20px;
    background-color: #fff;
    float: left;
    width: 22.5%;
    margin: 30px 1%;
    padding: 30px;
    border: 1px solid #ccc;
    border-top: 10px solid #4ba0a7;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0px 16px 24px rgba(31, 68, 76, 0.18);
}

.PriceBoxWide {
    font-size: 15px;
    line-height: 20px;
    background-color: #fff;
    float: left;
    width: 100%;
    margin: 30px 1%;
    padding: 30px;
    border: 1px solid #ccc;
    border-top: 10px solid #4ba0a7;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0px 16px 24px rgba(31, 68, 76, 0.18);
}

.PriceHead1 {
    font-size: 46px;
    line-height: 50px;
    display: inline-block;
}

.PriceHead1Currency {
    font-size: 22px;
    line-height: 50px;
    display: inline-block;
}

.PriceHead2 {
    color: #ff9c2b;
    font-size: 18px;
    letter-spacing: 1px;
}

.PriceHead3 {
    color: #4a9fa6;
    font-size: 15px;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.PricingTable {
    width: 94%;
    margin: 10px auto 30px auto;
}

    .PricingTable th {
        border-bottom: 2px solid #00a2a9;
        padding: 15px 3px 20px 3px;
    }

    .PricingTable td {
        padding: 6px 3px;
    }

.PricingTableProducts:hover {
    background-color: #fafafa;
}

.PricingTable hr {
    border-top-width: 2px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #00a2a9;
    margin-right: 0px;
    margin-left: 0px;
}

.PricingTable ul {
    margin: 0 0 24px 0;
}

.PricingTableH1 {
    font-weight: bold;
    font-size: 24px;
    line-height: 32px;
    padding: 20px 5px !important;
}

.PricingTableH2 {
    font-weight: bold;
    font-size: 18px;
    line-height: 26px;
    padding: 20px 5px !important;
}

.ComingSoon {
    background-color: #f4f7f8;
    padding: 20px;
    border-radius: 8px;
}


/* Pricing Table at Full Width */
.PricingTableCol1 {
    width: 9%;
    text-align: center;
}

.PricingTableCol2 {
    width: 47%;
}

.PricingTableCol3 {
    width: 22%;
    text-align: center;
}
/* Ticks */
.PricingTableCol4 {
    width: 22%;
    text-align: center;
}
/* Ticks */

/** Pricing Overview **/
/* Responsive Grid of 5 */
.Pricing_col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}

    .Pricing_col:first-child {
        margin-left: 0;
    }

.Pricing_span_1_of_5 {
    width: 18.72%;
}

.PricingOverview {
    background-color: #ebf4f4;
    padding: 90px 30px;
}

    .PricingOverview article {
        background-color: #fff;
        padding: 30px;
        border-radius: 8px;
        box-sizing: border-box;
        box-shadow: 0px 16px 24px rgba(31, 68, 76, 0.18);
        min-height: 440px;
    }

    .PricingOverview h2 {
        color: #0a454d;
        margin: 15px 0 10px 0;
        font-size: 28px;
        line-height: 30px;
    }

    .PricingOverview h4 {
        margin: 10px 0 20px 0;
    }

    .PricingOverview h3 {
        margin: 10px 0 20px 0;
        font-size: 20px;
        color: #ff9c2b;
    }

    .PricingOverview a p {
        color: #0a454d;
        font-size: 14px;
        line-height: 17px;
    }

    .PricingOverview a:hover p {
        color: #666;
    }

.Steps-Grey-Boxes {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 8px;
    background-color: #f5f5f5;
    margin-top: 16px;
}

    .Steps-Grey-Boxes article {
        text-align: left;
        width: 95%;
    }

    .Steps-Grey-Boxes img {
        margin: 10px;
    }

.Steps-Price-Text {
    display: flex;
    align-items: center; /* vertically centers SVG and text */
    gap: 1.5rem; /* spacing between icon and text */
    margin: 1.0rem 0;
    flex-wrap: wrap;
}

.Steps-text-Icon {
}

.Steps-text-Col {
    flex: 1;
    min-width: 200px; /* avoids text squashing */
}

/* Mobile: stack vertically */
@media (max-width: 600px) {
    .Steps-text-Col {
        flex-direction: column;
        align-items: flex-start; /* keeps text aligned left under icon */
    }
}

.DividerLineRounded {
    background-color: #4ba0a7;
    border-radius: 5px;
    height: 10px;
    overflow: hidden;
}

.NiceLists ul {
    padding: 0;
    margin: 0;
}

.NiceLists li {
    color: #0a454d;
    font-size: 15px;
    line-height: 18px;
    margin-bottom: 10px;
    background: url(/assets/images/bullet_list.svg) no-repeat 0 7px transparent;
    list-style-type: none;
    padding: 10px 0px 1px 24px;
}

.EmojiListIcon {
    margin: 8px auto;
}

.EmojiTextList {
    float: left;
}

.TableEmojiList {
    width: 100%;
}

    .TableEmojiList td {
        padding: 5px;
    }

    .TableEmojiList p {
        margin: 0;
        font-size: 17px;
    }

/* DIV BASED TABLES */
.DivTable {
    display: table;
    width: 100%;
}

.DivRow {
    display: table-row;
}

.DivCell {
    display: table-cell;
    padding: 5px;
    vertical-align: top;
}

.DivCellVertMiddle {
    vertical-align: middle !important;
}

.DivSpan-Cell {
    display: table-cell;
    padding: 5px;
}

.DivTable h4 {
    margin-top: 0;
}

.CountPanel {
    margin-top: 20px;
}

.Count {
    border-radius: 18px;
    background-color: #e8e1ee;
    color: #692ba4;
    text-align: center;
    font-size: 16px;
    line-height: normal;
    width: 36px;
    height: 26px;
    display: block;
    float: left;
    vertical-align: middle;
    margin-right: 8px;
    padding: 8px 0 2px 0;
}

.CountCol1 {
    float: left;
    width: 60px;
}

.CountCol2 {
    float: left;
    width: calc(100% - 60px);
}

    .CountCol2 h4 {
        margin: 0 0 4px 0;
    }

.ResponsiveCellLeft55 {
    float: left;
    width: 55%;
}

.ResponsiveCellLeft50 {
    float: left;
    width: 50%;
}

.ResponsiveCellLeft60 {
    float: left;
    width: 60%;
}

.ResponsiveCellLeft45 {
    float: left;
    width: 45%;
}

.ResponsiveCellLeft40 {
    float: left;
    width: 40%;
}

/* Show and Hide Elements as the screen narrows */
.Show800 {
    display: none;
}

.Hide800 {
    display: block;
}

.GetStartedLink {
    margin: 0 auto;
    width: auto;
}

.InfoTable {
}

    .InfoTable padding {
        4px;
    }

    .InfoTable h4 {
        margin: 4px 0;
    }

/* Pricing - Employer */
.panel-price-employer {
    margin: 20px 0 60px 0;
}

    .panel-price-employer > div {
        font-size: 15px;
        line-height: 20px;
        background-color: #fff;
        float: left;
        margin: 0 10px;
        border: 1px solid #ccc;
        border-top: 10px solid #4ba0a7;
        border-radius: 8px;
        box-sizing: border-box;
        box-shadow: 0px 16px 24px rgba(31, 68, 76, 0.18);
    }

        .panel-price-employer > div:nth-of-type(1), .panel-price-employer > div:nth-of-type(4) {
            width: calc(20% - 20px);
            padding: 30px 18px;
        }

        .panel-price-employer > div:nth-of-type(2), .panel-price-employer > div:nth-of-type(3) {
            width: calc(30% - 20px);
            padding: 30px 28px;
        }

/* Pricing - Summary of Options Row */
.panel-pdroles {
    margin: 20px 0 20px 0;
}

    .panel-pdroles > a {
        text-decoration: none;
        color: #000;
        padding: 0 10px;
        margin: 0 5px;
        float: left;
        width: calc(20% - 32px);
        border: 1px solid #ccc;
        min-height: 330px;
        background-color: #fff;
        border-top: 8px solid #4ba0a7;
        border-radius: 5px;
        box-shadow: 0px 3px 3px rgba(31, 68, 76, 0.18);
    }

        .panel-pdroles > a:hover {
            box-shadow: 0 5px 10px rgba(11, 19, 20, 0.18);
        }

        .panel-pdroles > a h3 {
            font-weight: bold;
            color: #999;
        }

        .panel-pdroles > a:hover h3 {
            color: #333;
        }

    .panel-pdroles p {
        font-size: 14px;
        margin: 3px 0 10px 0;
    }

/* Toggle Switch*/
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ff9c2b;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: #fff;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #4a9fa6;
}

input:focus + .slider {
    box-shadow: 0 0 1px #4a9fa6;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.ToggleText {
    color: #666;
    font-size: 17px;
}

/* Home */
.HomeFeaturePanel {
    width: 90%;
    margin: 0 auto;
}

.WhiteText {
    color: #fff;
}

    .WhiteText a:link, .WhiteText a:visited {
        color: #fff;
        text-decoration: none;
    }

    .WhiteText a:hover, .WhiteText a:active {
        text-decoration: underline;
    }
/* Full Width Sections */
.SectionGrey {
    background-color: #eff1f7;
    padding: 80px 0;
}

.SectionWhite {
    background-color: #fff;
    padding: 80px 0;
}

.SectionPaleGreen {
    background-color: #ebf4f4;
    padding: 80px 0;
}

.SectionPaleBlue {
    background-color: #f6f6fa;
    padding: 80px 0;
}

.SectionPaleDolphin {
    background-color: #ddeaec;
    padding: 80px 0;
}

.SectionPalePurple {
    background-color: #f5f4fc;
    padding: 80px 0;
}
/* Contact Panel */
.ContactPanel {
    background: url(/assets/images/background-contact-us.jpg) no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 100px 60px;
}

    .ContactPanel h2 {
        text-shadow: 4px 4px 8px #000;
    }

    .ContactPanel h3 {
        text-shadow: 4px 4px 8px #000;
    }

    .ContactPanel h4 {
        text-shadow: 4px 4px 8px #000;
        font-weight: normal;
    }

/* Homepage Cards for Main Sectors */
.pd-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    justify-items: center;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Card styling */
.pd-card {
    position: relative;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    aspect-ratio: 1.3 / 1;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
    min-height: 400px;
}

    .pd-card h3 {
        margin: 8px 0 0 0;
    }

    .pd-card p {
        margin: 6px 0 0 0;
    }

    .pd-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }

    /* Image styling */
    .pd-card img {
        width: 60%;
        height: auto;
        object-fit: contain;
        margin-bottom: 0;
        display: block;
    }

    /* Full-card clickable link */
    .pd-card a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-indent: -9999px;
    }

/* Stack cards on smaller screens but keep spacing */
@media (max-width: 840px) {
    .pd-panels {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 20px;
    }

    .pd-card {
        max-width: 300px;
    }
}

/* Subnavigation Text */
.SubNavText {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
    padding: 0;
    margin: 1em 0;
    font-size: 1rem;
}

    .SubNavText li::after {
        content: "|";
        margin: 0 0.5em;
    }

    .SubNavText li:last-child::after {
        content: "";
    }

    /* Link styling */
    .SubNavText a {
        text-decoration: none;
    }
        /* Adjust to match your brand */
        .SubNavText a:hover {
            text-decoration: underline;
        }

    /* Current page styling (non-link) */
    .SubNavText .Current { /* Make it look like selected text */
        font-weight: bold;
        cursor: default;
    }

/* PD FEATURES SHORTCUT PANEL */
.PDsysFeaturesPanel {
    background: url(/assets/images/background-pdsys-feature.jpg) no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 100px 60px;
}

    .PDsysFeaturesPanel h2 {
        text-shadow: 4px 4px 8px #000;
    }

    .PDsysFeaturesPanel h3 {
        text-shadow: 4px 4px 8px #000;
    }

    .PDsysFeaturesPanel h4 {
        text-shadow: 4px 4px 8px #000;
        font-weight: normal;
    }

    .PDsysFeaturesPanel p {
        text-shadow: 1px 1px 1px #333;
        font-weight: normal;
        color: #fff;
    }

.PDListCol1 {
    width: 80%;
    float: left;
}

.PDListCol2 {
    width: 20%;
    float: left;
}

/* Find a PD System Listings */
.pdsys-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 24px 0;
}

.pdsys-grid-item {
    border: 1px solid #d9d9d9;
    display: flex;
    align-items: stretch;
    padding: 14px;
    background-color: #fff;
    cursor: pointer;
}

    .pdsys-grid-item:hover {
        box-shadow: 0 0 15px 0 rgba(0,0,0,.10);
        transition: all 0.2s ease;
    }


.pdsys-item-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 140px;
}

.pdsys-item-image {
    flex: 1;
    max-width: 150px;
}

    .pdsys-item-image img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 14px 0;
        transition: transform 1s;
    }

        .pdsys-item-image img:hover {
            transform: scale(1.03,1.03);
            cursor: pointer;
        }

.pdsys-item-text {
    flex: 2;
    padding-left: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    transition: all 0.3s ease;
}

.pdsys-text-content {
    flex: 2;
}

.pdsys-features-panel {
    flex: 1;
    padding-left: 15px;
}

    .pdsys-features-panel ul {
        list-style-type: disc;
        margin: 10px 0 0 0;
        padding: 0 0 0 14px;
    }

    .pdsys-features-panel li {
        font-size: 11px;
        line-height: normal;
        margin-bottom: 10px;
        padding-left: 5px;
    }

.pdsys-item-text h2 {
    margin: 10px 0 5px 0;
    font-size: 19px;
    line-height: 21px;
}

.pdsys-item-text h3 {
    margin: 10px 0 6px 0;
    font-size: 18px;
    font-weight: bold;
}

.pdsys-item-text h4 {
    margin: 15px 0 10px 0;
    font-size: 12px;
    line-height: 16px;
}

.pdsys-item-text p {
    font-size: 13px;
    line-height: 16px;
    margin-bottom: 10px;
}

.pdsys-item-text a {
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

    .pdsys-item-text a:hover {
    }

.TextHighlightPaleYellow {
    padding: 6px 8px;
    background-color: #E2E294;
}

/* Quick Reference Videos */

.VideoBox {
    box-shadow: 0 4px 28px 0 rgba(0,21,51,.06);
    padding: 0 10px 5px 10px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: block;
    align-items: center;
    background: url(/assets/images/browser_controls.svg) no-repeat #fff;
}

    .VideoBox video {
        margin: 28px 0 0 0;
        line-height: 0;
        width: 100%;
        height: auto;
    }


/* --- Landing Page --- */

/* --- Section label (small eyebrow text) --- */
.section-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

/* --- 2x2 grid --- */
.landing-page-2x2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}

/* --- Individual card --- */
.landing-page-2x2-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

/* --- Icon container --- */
.landing-page-2x2-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .landing-page-2x2-icon img {
        width: 32px;
        height: 32px;
        display: block;
    }

/* --- Card text --- */
.landing-page-2x2-card p {
    font-size: 15px;
    color: #374151;
    line-height: 1.6;
    margin: 0;
    align-self: center;
}

/* --- Responsive: stack to single column on small screens --- */
@media (max-width: 400px) {
    .landing-page-2x2-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}
/* Landing Page: Responsive Columns That Hold Content 40/60*/
.landing-page-40-responsive {
    width: 40%;
}

.landing-page-60-responsive {
    width: 60%;
}

/* --- 3-column card grid --- */
.landing-page-3col-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* --- Individual card --- */
.landing-page-3col-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* --- Icon container --- */
.landing-page-3col-icon {
    width: 44px;
    height: 44px;
    background: #E1F5EE;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

    .landing-page-3col-icon img {
        width: 24px;
        height: 24px;
        display: block;
    }

/* --- Card heading --- */
.landing-page-3col-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.4rem 0;
}

/* --- Card text --- */
.landing-page-3col-card p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* --- Responsive: stack to single column on small screens --- */
@media (max-width: 640px) {
    .landing-page-3col-grid {
        grid-template-columns: 1fr;
    }
}


/* Audience */

/* --- 2-column card grid --- */
.landing-page-2col-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

/* --- Individual card --- */
.landing-page-2col-feature-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 28px 0 rgba(0,21,51,.06);
}

/* --- Card header: icon + title/role --- */
.landing-page-2col-feature-card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

/* --- Header icon container --- */
.landing-page-2col-feature-icon {
    width: 80px;
    height: 80px;
    background: #c1d8db;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .landing-page-2col-feature-icon img {
        width: 50px;
        height: 50px;
        display: block;
    }

/* --- Card title --- */
.landing-page-2col-feature-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 2px 0;
}

/* --- Card role/subtitle --- */
.landing-page-2col-feature-role {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* --- Feature list --- */
.landing-page-2col-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .landing-page-2col-feature-list li {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding: 0.65rem 0;
        border-bottom: 1px solid #f3f4f6;
        font-size: 14px;
        color: #6b7280;
        line-height: 1.5;
    }

        .landing-page-2col-feature-list li:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

/* --- Check icon --- */
.check-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* --- Bold label within list item --- */
.landing-page-2col-feature-list strong {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #111827;
    margin-bottom: 1px;
}

/* --- Responsive: stack on small screens --- */
@media (max-width: 640px) {
    .landing-page-2col-feature-grid {
        grid-template-columns: 1fr;
    }
}

/* 16:9 responsive video wrapper */
.video-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-top: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
}

    .video-wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* --- Tinted band container --- */
.landing-page-compliance-band {
    background: #f0faf6;
    border: 1px solid #c6ead9;
    border-radius: 12px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Band header: icon + title --- */
.landing-page-compliance-band-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.landing-page-compliance-icon {
    width: 64px;
    height: 64px;
    background: #4ba0a7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .landing-page-compliance-icon img {
        width: 40px;
        height: 40px;
        display: block;
    }

.landing-page-compliance-band-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 3px 0;
}

.landing-page-compliance-band-header p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* --- Clause 3-column grid --- */
.landing-page-clause-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* --- Individual clause card --- */
.landing-page-clause-card {
    background: #fff;
    border: 1px solid #c6ead9;
    border-radius: 8px;
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .landing-page-clause-card strong {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }

    .landing-page-clause-card span {
        font-size: 16px;
        color: #6b7280;
        line-height: 1.5;
    }

/* --- Outcomes list --- */
.landing-page-outcomes-label {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.75rem 0;
}

.landing-page-outcomes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 2rem;
}

    .landing-page-outcomes-list li {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        font-size: 14px;
        color: #374151;
        line-height: 1.5;
    }

.landing-page-check-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* --- Responsive --- */
@media (max-width: 400px) {
    .landing-page-clause-grid {
        grid-template-columns: 1fr;
    }

    .landing-page-outcomes-list {
        grid-template-columns: 1fr;
    }
}


/* Pricing */

/* --- Main band --- */
.landing-page-pricing-band {
    background: #f0faf6;
    border: 1px solid #c6ead9;
    border-radius: 12px;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 2rem;
    align-items: start;
}

/* --- Vertical divider --- */
.landing-page-pricing-divider {
    background: #c6ead9;
    width: 1px;
    align-self: stretch;
}

/* --- Left: content --- */
.landing-page-pricing-content h3 {
    font-size: 20px;
    font-weight: 600;
    color: #0a454d;
    margin: 0 0 0.6rem 0;
}

.landing-page-pricing-content p {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.7;
    margin: 0 0 1.25rem 0;
}

/* --- Free badge --- */
.landing-page-pricing-tag {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 1rem;
}

.landing-page-pricing-free {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}

.landing-page-pricing-free-sub {
    font-size: 16px;
}

/* --- Checklist --- */
.landing-page-pricing-points {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .landing-page-pricing-points li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 16px;
        line-height: 1.5;
    }

/* --- Pricing page link --- */
.landing-page-pricing-link {
    font-size: 14px;
    font-weight: 600;
    color: #1D9E75;
    text-decoration: none;
}

    .landing-page-pricing-link:hover {
        text-decoration: underline;
    }

/* --- Right: plan cards --- */
.landing-page-pricing-plans {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.landing-page-plan-card {
    background: #fff;
    border: 1px solid #c6ead9;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}

.landing-page-plan-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #1D9E75;
    margin-bottom: 0.5rem;
}

.landing-page-plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 0.5rem;
}

.landing-page-plan-amount {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}

.landing-page-plan-period {
    font-size: 14px;
    color: #6b7280;
}

.landing-page-plan-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* --- Link inside plan card --- */
.landing-page-plan-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 13px;
    font-weight: 600;
    color: #1D9E75;
    text-decoration: none;
}

    .landing-page-plan-link:hover {
        text-decoration: underline;
    }

/* --- Responsive --- */
@media (max-width: 680px) {
    .landing-page-pricing-band {
        grid-template-columns: 1fr;
    }

    .landing-page-pricing-divider {
        width: 100%;
        height: 1px;
        align-self: auto;
    }
}

/* SIMPLE START */

/* --- Trust strip --- */
.trust-strip {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 2rem;
}

    .trust-strip li {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        color: #6b7280;
    }

/* --- Responsive --- */
@media (max-width: 560px) {
    .trust-strip {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
}

/* --- 4-column grid --- */
.simple-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* --- Individual card --- */
.simple-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;
    text-align: center;
    gap: 1.2rem;
}

/* --- Icon container --- */
.simple-icon {
    width: 64px;
    height: 64px;
    background: #E1F5EE;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .simple-icon img {
        width: 40px;
        height: 40px;
        display: block;
    }

/* --- Card label --- */
.simple-card p {
    font-size: 15px;
    color: #111827;
    margin: 0;
    line-height: 1.4;
}

/* --- Responsive: 2 columns on medium screens --- */
@media (max-width: 700px) {
    .simple-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Responsive: single column on small screens --- */
@media (max-width: 400px) {
    .simple-grid {
        grid-template-columns: 1fr;
    }
}


/* streamSWEET additional Fonts 
===================== */
.TextStd {
}

.TextEmphasis {
    color: #999;
    font-style: italic;
}

.TextBold {
    font-weight: bold;
}

.TextSml1 {
    font-size: 11px;
    color: #666;
    line-height: 13px;
}

.TextSml2 {
    font-size: 11px;
    color: #b2b2b2;
    line-height: 13px;
}

.TextLarge {
    font-size: 18px;
}

.TextQuote {
    font-size: 16px;
    font-weight: bold;
    color: #4898d4;
    line-height: 22px;
    font-style: italic;
}

.TextLabel {
    font-size: 12px;
    color: #777 !important;
    vertical-align: top;
}

.TextInstruct {
    font-size: 12px;
    color: #999;
    font-style: italic;
}

.TextNoData {
    color: #999;
    padding: 20px 5px 10px 5px;
    display: block;
}

.TextTime {
    font-weight: normal;
}

.TextDate {
    font-weight: bold;
}

/* Font - Legacy Support until replaced throughout the code.  Meantime manually align with h1 h2 etc tags above and text classes used above.
===================== */
.Head1 {
    font-size: 36px;
    line-height: 42px;
    font-weight: normal;
    color: #384f7b;
}

.Head2 {
    font-size: 28px;
    line-height: 36px;
    font-weight: normal;
    color: #333;
}

.Head3 {
    font-size: 20px;
    line-height: 28px;
    font-weight: normal;
    color: #384f7b;
}

.Head4 {
    font-size: 14px;
    line-height: 18px;
    font-weight: bold;
    color: #3182e0;
}

.Text1 {
    font-size: 12px;
    color: #000;
}

.Text2 {
    font-size: 12px;
    line-height: 15px;
    color: #999;
}

.Text3 {
    font-size: 12px;
    color: #999;
    font-style: italic;
}

.TextStrong {
    font-weight: bold;
}

/* Screenshot Slider */

.slidercontainer {
    margin: 40px auto;
    text-align: center;
    width: 100%;
}

    .slidercontainer .screenslide,
    .slidercontainer .thumbnails {
        margin: auto;
        width: 100%;
        border-bottom: 4px solid #fff;
        padding: 5px;
    }

    .slidercontainer .screenslide {
        padding-bottom: 0;
        position: relative;
    }

        .slidercontainer .screenslide img {
            z-index: 1;
            width: 100%;
            height: 99%;
            margin-bottom: 40px;
            box-shadow: 0 0 10px 10px rgba(76, 76, 76, 0.1);
        }

        .slidercontainer .screenslide .fa-chevron-left,
        .slidercontainer .screenslide .fa-chevron-right {
            position: absolute;
            left: 5px;
            top: 5px;
            background-color: rgb(0,0,0, .7);
            color: #fff;
            padding: 10px 15px;
            z-index: 2;
            cursor: pointer;
        }

        .slidercontainer .screenslide .fa-chevron-right {
            right: 5px;
            left: auto;
        }

    .slidercontainer .thumbnails {
        overflow: hidden;
    }

        .slidercontainer .thumbnails img {
            float: left;
            width: 19.2%;
            opacity: .5;
            cursor: pointer;
            transition: all .6s ease-in-out;
            box-shadow: 0 0 3px 3px rgba(76, 76, 76, 0.1);
        }

            .slidercontainer .thumbnails img:hover {
                opacity: 1.0;
            }

            .slidercontainer .thumbnails img:last-child {
                margin-right: 0 !important;
            }

            .slidercontainer .thumbnails img.active {
                border-bottom: 4px solid #f0a047;
                opacity: 1;
            }

/* ======================================================================================== */
/* ======================================================================================== */
/* Template Layout */
/* ======================================================================================== */
/* ======================================================================================== */

/* First level full screen width horizontal containers for each logical section of content. Set vertical padding, background colours/images, height (if explicit) */
.ShellUserDetail {
    padding: 0;
    background-color: #0a454d;
    overflow: hidden;
    border: 0;
}

.ShellLogoMenuHome {
    box-sizing: border-box;
    padding: 12px 0 4px 12px;
    background-color: #fff;
    height: 108px;
    transition: all 0.3s;
    z-index: 8888;
    box-shadow: 0px 10px 5px rgba(0,0,0,0.1);
}

.ShellLogoMenu {
    box-sizing: border-box;
    padding: 12px 0 4px 12px;
    background-color: #fff;
    z-index: 1000;
    height: 108px;
    transition: all 0.3s;
    box-shadow: 0px 10px 5px rgba(0,0,0,0.1);
}

.ShellLogoMenuHomeLoggedin {
    box-sizing: border-box;
    padding: 12px 0 4px 12px;
    background-color: #e6efee;
    height: 108px;
    transition: all 0.3s;
    z-index: 8888;
}

.ShellLogoMenuLoggedin {
    box-sizing: border-box;
    padding: 10px 0 4px 12px;
    background-color: #e6efee;
    z-index: 1000;
    height: 60px;
    transition: all 0.3s;
}
/* Manage the header row content with the logo, mega menu button, main nav and 'start now' button. */
.header-content {
    display: flex;
}

    .header-content > img, .header-content > a:nth-child(1) > img {
        width: 205px;
        box-sizing: border-box;
    }

    .header-content > div:nth-child(2) {
        width: 270px;
        box-sizing: border-box;
        text-align: right;
    }
    /* Contain the last two elements in a FlexBox as we need to reverse their order when the hamburger menu is on. */
    .header-content > div:nth-child(3) {
        width: calc(100% - 475px);
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
    }

        .header-content > div:nth-child(3) > nav {
            width: calc(100% - 150px);
            box-sizing: border-box;
            padding: 0 0 0 30px;
        }

        .header-content > div:nth-child(3) > div {
            width: 150px;
            box-sizing: border-box;
        }

.ShellLogoBanner {
    padding: 8px 0;
    background-color: #fff;
    z-index: 1000;
    height: 78px;
    border-bottom: 1px solid #ddd;
    transition: all 0.3s;
}

.ShellMenu {
    padding: 0 0;
    background-color: #e3e3e3;
    height: 78px;
}

.ShellHero {
    padding: 0;
    background-color: #fff;
}

.ShellHomeContent1 {
    padding: 30px 0;
    background-color: #00a2a9;
}

    .ShellHomeContent1 h1 {
        font-size: 38px;
        line-height: 44px;
        margin: 10 0px 12px 0px;
    }

    .ShellHomeContent1 h2 {
    }

    .ShellHomeContent1 h3 {
        font-size: 22px;
        line-height: 32px;
    }

    .ShellHomeContent1 h4 {
    }

.ShellHomeContent2 {
    padding: 30px 0 0 0;
    background-color: #fff;
}

.ShellHomeContent3 {
    padding: 60px 0;
    background-color: #fff;
}

.ShellHomeContent4 {
    padding: 80px 0;
    background-color: #001e42;
    color: #fff;
}

.ShellContentStd {
    padding: 30px 0 0 0;
    background-color: #fff;
    min-height: 500px;
}

.ShellFooter {
    padding: 80px 0 0 0;
    background-color: #00a2a9;
}

.ShellBottom {
    padding: 10px 0 30px 0;
    background-color: #00a2a9;
}


/* Second level container, nested within each logical section of the page per above. Set horizontal alignment, usable width and position (to give an anchor for nested elements with position handling). */
.SectionWrapper {
    margin: 0 auto;
    position: relative;
    max-width: 1380px;
    width: 96%;
}

.SectionWrapperWide {
    margin: 0 auto;
    position: relative;
    max-width: 1580px;
    width: 96%;
}

.NarrowWrapper {
    margin: 0 auto;
    position: relative;
    max-width: 980px;
    width: 90%;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Mega Menu */
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.mega-menu-cont {
    max-height: 0;
    transition: max-height 0.5s;
    overflow: hidden;
    z-index: 100;
    position: absolute;
    top: 108px;
    left: 0;
    right: 0;
}

.mega-menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    line-height: initial;
    flex-wrap: wrap;
    margin: 0;
    box-sizing: border-box;
    padding: 40px 0 100px 0;
    background-color: #192a33;
}

    .mega-menu > div {
        box-sizing: border-box;
        width: 17%;
        max-width: 350px;
        padding: 20px 8px 30px 8px;
        background-color: #fff;
        border-radius: 8px;
    }

        .mega-menu > div:not(:nth-of-type(1)) {
            margin-left: 1%;
        }

        .mega-menu > div:nth-last-of-type(1) {
            background-color: transparent;
            color: #eee;
            padding: 40px 50px;
            font-size: 16x;
            width: 20%;
            margin-left: 2%;
            max-width: 450px
        }

            .mega-menu > div:nth-last-of-type(1) > div {
                box-sizing: border-box;
                border-left: 1px solid #ddd;
                padding: 1px 0 1px 15px;
            }

                .mega-menu > div:nth-last-of-type(1) > div > p:nth-of-type(1) {
                    margin-top: 8px;
                }

        .mega-menu > div > a {
            display: block;
            padding: 7px 15px;
            color: #1f2533;
            text-decoration: none;
            transition: background-color 0.3s, color 0.3s;
            font-weight: 600;
            font-size: 16px;
        }

            .mega-menu > div > a:hover {
                background-color: #f6f7f9;
                color: #000;
            }

            .mega-menu > div > a > span {
                font-size: 14px;
                display: block;
                font-weight: 300;
            }

.mega-menu-sub-head {
    display: flex;
    flex-direction: row;
    line-height: initial;
    margin: 0 0 20px 0;
    box-sizing: border-box;
    vertical-align: top;
}

    .mega-menu-sub-head > img, .header-content > a:nth-child(1) > img {
        box-sizing: border-box;
        height: 80px;
        width: auto;
        margin: 0;
        padding: 0;
        vertical-align: top;
        z-index: 10005;
        transition: all 0.3s;
    }

        .mega-menu-sub-head > img:hover, .header-content > a:nth-child(1) > img:hover {
            cursor: pointer;
        }

    .mega-menu-sub-head > div {
        box-sizing: border-box;
        width: calc(100% - 76px);
        padding: 10px 0 10px 10px;
    }

    .mega-menu-sub-head h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        font-family: 'Quicksand', Arial, sans-serif;
        color: #1f2533;
    }

    .mega-menu-sub-head p {
        margin: 0;
        font-size: 12px;
        font-weight: 300;
    }

.btn-mega-menu {
    z-index: 10005;
    align-items: center;
    padding: 7px 15px;
    margin: 20px 0 0 0;
    display: inline-flex;
    justify-content: center;
    color: #00a2a9;
    border: none;
    border-radius: 5px;
    font-size: 22px;
    border: 1px solid #b6e5e6;
}

    .btn-mega-menu .material-icons {
        margin-left: 8px;
        transition: transform 0.3s ease;
    }

    .btn-mega-menu:hover {
        cursor: pointer;
        color: #222;
        border: 1px solid #222;
    }

.mega-menu-show {
    max-height: 800px;
    border-bottom: 1px solid #000;
    box-shadow: 0 8px 16px rgba(10, 69, 77, 1);
}

.rotated {
    transform: rotate(180deg);
}

#nav > ul > li:nth-of-type(1) {
    display: none;
}

/* Sign Up Button */
.btn-nav-startfree {
    margin: 22px 0 0 0;
    text-align: center;
    font-weight: 700;
    padding: 9px 25px;
    font-size: 16px;
    line-height: 16px;
    display: inline-block;
    border-radius: 4px;
    z-index: 10009;
    background-color: #ff9c2b;
}

a.btn-nav-startfree:link, a.btn-nav-startfree:visited {
    text-decoration: none;
    color: #fff;
}

a.btn-nav-startfree:hover, a.btn-nav-startfree:active {
    text-decoration: none;
    color: #ff9c2b;
    background-color: #0a454d;
    transition: all 0.3s ease;
}
/* Equivalent handling for the button that leads to the React driven dashboard when a logged in user is viewing the publish pages. */
.btn-nav-dashboard {
    margin: 22px 0 0 0;
    display: inline-block;
    z-index: 10009;
}

/* Template specific layout handlers */

/* Home 
===================== */
.HomeBenefits1 {
    background-color: #ebf4f4;
    padding: 110px 0;
}

    .HomeBenefits1 h2 {
        color: #0a454d;
        margin: 0 0 10px 0;
    }

    .HomeBenefits1 h4 {
        color: #0a454d;
    }

.WideText {
    letter-spacing: 2px;
}

.HomeCard {
    padding: 20px 10px;
    margin: 20px auto;
}

.HomeCardImage {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    margin: 20px auto 10px auto;
}

.SpecialOfferPanel {
    padding: 20px 25px;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
}

    .SpecialOfferPanel h3 {
        font-size: 25px;
        font-weight: 700;
        color: #4b7b30;
        margin: 0 0 8px 0;
    }

    .SpecialOfferPanel h4 {
        font-weight: 700;
        color: #4b7b30;
        margin: 0;
    }

    .SpecialOfferPanel h2 {
        font-size: 20px;
        font-weight: 700;
        color: #4b7b30;
        margin: 8px 0 8px 0;
    }

/* CTA BUTTONS */
.ButtonHomeCTA {
    background-color: #4ba0a7;
    text-align: center;
    padding: 10px 26px 10px 26px;
    margin: 0 6px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    border: 3px solid #4ba0a7;
    margin: 10px 0;
    transition: all .2s ease;
}

a.ButtonHomeCTA:link, a.ButtonHomeCTA:visited {
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

a.ButtonHomeCTA:hover, a.ButtonHomeCTA:active {
    color: #fff;
    background-color: #ff9c2b;
    text-decoration: none;
    border: 3px solid #ff9c2b;
    cursor: pointer;
    transform: translateY(-2px);
}

.ButtonHomeWhiteCTA {
    background-color: #fff;
    text-align: center;
    padding: 10px 26px 10px 26px;
    margin: 0 6px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    margin: 10px 0;
    transition: all .2s ease;
}

a.ButtonHomeWhiteCTA:link, a.ButtonHomeWhiteCTA:visited {
    color: #4ba0a7;
    text-decoration: none;
    display: inline-block;
}

a.ButtonHomeWhiteCTA:hover, a.ButtonHomeWhiteCTA:active {
    color: #fff;
    background-color: #ff9c2b;
    text-decoration: none;
    cursor: pointer;
    transform: translateY(-2px);
}

.ButtonHomeCTAOutline {
    background-color: #fff;
    text-align: center;
    padding: 10px 26px 10px 26px;
    margin: 0 6px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    border: 3px solid #ff9c2b;
    margin: 10px 0;
    transition: all .2s ease;
}

a.ButtonHomeCTAOutline:link, a.ButtonHomeCTAOutline:visited {
    color: #ff9c2b;
    text-decoration: none;
    display: inline-block;
}

a.ButtonHomeCTAOutline:hover, a.ButtonHomeCTAOutline:active {
    color: #ff9c2b;
    background-color: #fff;
    text-decoration: none;
    border: 3px solid #666;
    cursor: pointer;
    transform: translateY(-2px);
}

.ButtonRoundedCTA {
    background-color: #ff9c2b;
    text-align: center;
    padding: 10px 26px 10px 26px;
    margin: 0 6px;
    border-radius: 26px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    border: 3px solid #ff9c2b;
    margin: 10px 0;
    box-shadow: 0 4px 20px #05040024;
    transition: all .2s ease;
}

a.ButtonRoundedCTA:link, a.ButtonRoundedCTA:visited {
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

a.ButtonRoundedCTA:hover, a.ButtonRoundedCTA:active {
    color: #fff;
    background-color: #4ba0a7;
    text-decoration: none;
    border: 3px solid #4ba0a7;
    cursor: pointer;
    transform: translateY(-2px);
}

.hContent1 {
    width: 90%;
    padding: 0;
    background-color: #fff;
    text-align: left;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
}
/* Content 1 */
.hContent2 {
    padding: 0px 0px 20px 0;
    text-align: left;
    vertical-align: top;
}
/* Content 2 */

/* Content - Standard
===================== */
.cNavSub {
    padding: 0px 0px 5px 0px;
    background-color: #fff;
    vertical-align: top;
}

.cContent1 {
    padding: 10px 0;
    background-color: #fff;
    text-align: left;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
}
/* Content 1 */
.cContent2 {
    padding: 0px 0px 20px 0;
    text-align: left;
    vertical-align: top;
}
/* Content 2 */

/* Container for User Login Text/Name*/
.cLogin {
    float: right; /*background-color:#fff;*/
    padding: 0 4px 0 24px;
    margin: 10px;
    font-weight: 300;
    font-size: 13px;
}

    .cLogin a:link, .cLogin a:visited {
        color: #9ebfc4;
        text-decoration: none;
    }

    .cLogin a:hover, .cLogin a:active {
        color: #fff;
        text-decoration: underline;
    }

.ButtonLogin {
    background-color: #d0edec;
    margin: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 8px 20px 14px 20px;
}

a.ButtonLogin:link, a.ButtonLogin:visited {
    color: #00a2a9;
    text-decoration: none;
}

a.ButtonLogin:hover, a.ButtonLogin:active {
    color: #00a2a9;
    background-color: #fff;
    text-decoration: none;
}

/* Container for basket */
.cBasket {
    margin: 7px 50px 0 0;
    float: right;
    color: #9ebfc4;
}

    .cBasket a:link, .cBasket a:visited {
        color: #9ebfc4;
        text-decoration: none;
        text-align: right;
    }

    .cBasket a:hover, .cBasket a:active {
        text-decoration: underline;
        color: #fff
    }

.BasketIcon {
    float: left;
}

.BasketCount {
    float: left;
    padding: 4px 5px;
    font-size: 13px;
}

/* Footer
===================== */
.FooterText {
    font-size: 9px;
    color: #666;
    line-height: 15px;
}

    .FooterText a:link, .FooterText a:visited {
        color: #666;
        text-decoration: underline;
    }

    .FooterText a:hover, .FooterText a:active {
        color: #f60;
        text-decoration: underline;
    }

/* Custom Footer Navigation */
/*  GRID OF FOUR  */
.span_1_of_4Footer {
    width: 23.8%;
}

.span_1_of_3Footer {
    width: 32.26%;
}

.FooterNavText {
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    font-weight: 200;
}

    .FooterNavText a:link, .FooterNavText a:visited {
        color: #fff;
        text-decoration: none;
    }

    .FooterNavText a:hover, .FooterNavText a:active {
        color: #ccc;
        text-decoration: underline;
    }

.ShellFooter hr {
    border-top-width: 1px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #fff;
    margin-right: 0px;
    margin-left: 0px;
    opacity: 0.8;
}

.FooterSocialIcons {
    float: left;
    margin: 5px;
    width: 24px;
    height: auto;
}

/* Material Icons */

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr; /* WebKit */
    -webkit-font-smoothing: antialiased; /* Chrome */
    text-rendering: optimizeLegibility; /* Firefox */
    -moz-osx-font-smoothing: grayscale; /* IE */
    font-feature-settings: 'liga';
}

    /* Rules for sizing the icons. */
    .material-icons.md-14 {
        font-size: 14px;
    }

    .material-icons.md-16 {
        font-size: 16px;
    }

    .material-icons.md-18 {
        font-size: 18px;
    }

    .material-icons.md-20 {
        font-size: 20px;
        line-height: 30px;
    }

    .material-icons.md-24 {
        font-size: 24px;
    }

    .material-icons.md-30 {
        font-size: 30px;
    }

    .material-icons.md-36 {
        font-size: 36px;
    }

    .material-icons.md-48 {
        font-size: 48px;
    }

.material-icons-outlined.md-36 {
    font-size: 36px;
}

.material-icons-outlined.md-48 {
    font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
    color: rgba(0, 0, 0, 0.54);
}

    .material-icons.md-dark.md-inactive {
        color: rgba(0, 0, 0, 0.26);
    }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
    color: rgba(255, 255, 255, 1);
}

    .material-icons.md-light.md-inactive {
        color: rgba(255, 255, 255, 0.3);
    }



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

/* Responsive Menu
===================== */
/* Menu bar setup */
#nav {
    z-index: 10000;
}

    #nav > a {
        display: none;
    }

    /* Generic */
    #nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    #nav li {
        position: relative;
        text-align: left;
    }

        #nav li a {
            display: block;
            text-decoration: none;
        }

    /* First level */
    #nav > ul > li {
        display: inline-block;
    }

        #nav > ul > li > a {
            color: #00a2a9;
            font-size: 16px;
            padding: 30px 20px;
        }

        #nav > ul > li.NavParent > a:hover {
            cursor: context-menu;
        }

        #nav > ul > li.NavSelected > a {
            color: #00a2a9;
            font-weight: bold;
            background-color: #fff;
            border-radius: 5px 5px 0px 0px
        }

            #nav > ul > li.NavSelected > a:after {
                color: #00a2a9;
            }

        #nav > ul > li > a:hover, #nav > ul > li > a:hover:after {
            color: #222;
        }

        /* Second level  */
        #nav > ul > li > ul {
            z-index: 10001;
            width: 200px;
            position: absolute;
            top: calc(100% - 14px);
            overflow: hidden;
            padding: 0;
            max-height: 0;
            opacity: 0;
            transition: padding 0.0s, max-height 1.5s, opacity 0.5s;
            background-color: #fff;
        }

        #nav > ul > li:hover > ul {
            padding: 15px 0;
            max-height: 800px;
            opacity: 1;
            overflow: visible;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #nav > ul > li > ul > li > a {
            font-size: 14px;
            padding: 8px 15px;
            color: #1f2533;
        }

        #nav > ul > li > ul > li.NavParent > a:after {
            content: '\25BA';
            font-size: 10px;
            color: #555;
            position: absolute;
            top: 8px;
            right: 5px;
        }

        #nav > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > a:hover:after {
            color: #00a2a9;
        }

        /* Third level */
        #nav > ul > li > ul > li > ul {
            z-index: 10002;
            position: absolute;
            top: -1px;
            left: 185px;
            padding: 0;
            width: 0;
            max-height: 0;
            opacity: 0;
            transition: padding 0.0s, width 0.0s, max-height 1.5s, opacity 0.75s;
            background-color: #fff;
        }

        #nav > ul > li > ul > li:hover > ul {
            padding: 15px 0;
            width: 200px;
            max-height: 800px;
            opacity: 1;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #nav > ul > li > ul > li > ul > li > a {
            font-size: 14px;
            padding: 8px 15px;
            color: #1f2533;
        }

            #nav > ul > li > ul > li > ul > li > a:hover {
                color: #00a2a9;
            }

/* Second level Sub Nav - Vertical 
===================== */
#navSub, #navSub ul {
    width: 100%;
    list-style: none;
    line-height: 16px;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

    #navSub .sel {
        background-color: #fff;
        font-weight: 700;
        background-image: url(/assets/images/arrow_subnav_1_on.svg);
    }

    #navSub a {
        display: block;
        color: #1f2533;
        text-decoration: none;
    }

    #navSub li {
        margin: 7px 0;
        padding: 0px;
        background: url(/assets/images/arrow_subnav_1.svg) 10px 10px no-repeat;
        list-style: none;
    }

        #navSub li a {
            width: 90%;
            w\idth: 85%;
            padding: 8px 5px 5px 36px;
            background: url(/assets/images/arrow_subnav_1.svg) 10px 10px no-repeat;
        }

        #navSub li ul {
            border: 0;
        }

        #navSub li li .sel {
            background-color: #fff;
            color: #1f2533;
            font-weight: 700;
            background-image: url(/assets/images/arrow_subnav_2_on.svg);
        }

        #navSub li li {
            margin: 0px;
            padding: 0px;
            background: url(/assets/images/arrow_subnav_2.svg) 26px 10px no-repeat;
        }

            #navSub li li a {
                width: 90%;
                w\idth: 85%;
                padding: 8px 5px 5px 50px;
                background: url(/assets/images/arrow_subnav_2.svg) 26px 10px no-repeat;
            }

    #navSub a:hover {
        background-color: #fff;
        color: #1f2533;
        transition: all 0.5s linear;
    }

/* Second level Sub Nav - Horizontal 
===================== */
.navSubH {
    font-size: 10px;
    color: #5d6786;
    line-height: 14px;
}

    .navSubH a:link {
        color: #5d6786;
        text-decoration: none;
    }

    .navSubH a:visited {
        color: #666;
        text-decoration: none;
    }

    .navSubH a:active, .navSubH a:hover {
        color: #f60;
        text-decoration: underline;
    }

/* Breadcrumbs Nav 
===================== */
.MenuBCrumb {
    font-size: 10px;
    color: #333;
    font-weight: bold;
}

    .MenuBCrumb a:link, .menuBCrumb a:visited {
        color: #666;
        text-decoration: none;
    }

    .MenuBCrumb a:active, .menuBCrumb a:hover {
        color: #a60e0e;
        text-decoration: underline;
    }

/* Bottom Text Nav
===================== */
.MenuBotL1 {
    font-size: 12px;
    color: #fff;
    line-height: 14px;
    margin-top: 15px;
}

    .MenuBotL1 a:link {
        opacity: 1.0;
        text-decoration: none;
    }

    .MenuBotL1 a:visited {
        color: #4ccdd9;
    }

    .MenuBotL1 a:active, .MenuBotL1 a:hover {
        color: #4ccdd9;
    }

    .MenuBotL1 span {
        padding: 0 5px 0 5px;
        color: #4ccdd9;
    }

.MenuBotL2 {
    font-size: 12px;
    color: #fff;
    line-height: 14px;
    opacity: 1.0;
    margin: 10px 0 8px 0;
}

    .MenuBotL2 a:link {
        opacity: 1.0;
        color: #fff;
        text-decoration: none;
    }

    .MenuBotL2 a:visited {
        color: #4ccdd9;
    }

    .MenuBotL2 a:active, .MenuBotL2 a:hover {
        color: #4ccdd9;
    }

    .MenuBotL2 span {
        padding: 0 5px 0 5px;
        color: #4ccdd9;
    }

/* streamSWEET Branding */
.streamSWEETLogo {
    margin: 0 30px 30px 30px;
}

/* group is used to replace clearfix */
.group:after {
    content: "";
    display: table;
    clear: both;
}

/* Sticky Panel */
.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

    .sticky:before, .sticky:after {
        content: ' ';
        display: table;
    }

/* Sticky top logo / Navigation row resize handling.  Triggered by JavaScript function "init"
===================== */
header.HdrSmaller {
    height: 46px;
    padding: 3px 0;
}

.HdrSmaller .header-content > img, .HdrSmaller .header-content > a:nth-child(1) > img {
    height: 40px;
}

.HdrSmaller .btn-mega-menu {
    margin: 2px 0 0 0;
    font-size: 18px;
    padding: 5px 15px;
}

.HdrSmaller .btn-nav-startfree {
    margin: 3px 0 0 0;
    font-size: 14px;
}

.HdrSmaller .btn-nav-dashboard {
    margin: 3px 0 0 0;
}

.HdrSmaller .mega-menu-show {
    top: 46px;
}

.HdrSmaller .mega-menu-sub-head > img {
    height: 40px;
}

.HdrSmaller #nav > ul > li > a {
    padding: 7px 20px;
}

.HdrSmaller #nav > ul > li > ul {
    top: calc(100%);
}

.HdrSmaller #nav > ul > li.NavParent > a:after {
    top: 8px;
}

/* Add an item to the basket - animated flydown
===================== */
.BasketPreview {
    display: block;
    animation: BasketAdd 20.0s forwards;
    opacity: 0;
    width: 400px;
    max-width: calc(95vw - 40px);
    padding: 5px 10px 16px 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 4px 4px 8px 0px #ccc;
    position: fixed;
    top: 20px;
    right: 5%;
    z-index: 10000;
    overflow: hidden;
}

    .BasketPreview:target {
        display: none;
    }

    .BasketPreview > a {
        display: block;
    }
/* Close Button */
.CloseIt {
    float: right;
    vertical-align: middle;
    margin: 5px 10px 12px 5px;
    padding: 4px 16px 3px 12px;
    font-size: 12px;
    line-height: 12px;
    border: 1px solid transparent;
    border-radius: 12px;
}

    .CloseIt span {
        position: relative;
        top: -2px;
        left: 4px;
    }
    /* align text with icon */
    .CloseIt a:hover {
        border: 1px solid #ccc;
        transition: all 1.0s ease;
    }
/* Product Info */
.BasketPreviewName {
    float: left;
    padding: 3px 10px;
    font-size: 12px;
}

.BasketPreviewPrice {
    font-weight: 700;
}
/* View Cart Link */
.BasketPreviewCart {
    float: right;
}

.CartLink {
    float: right;
    vertical-align: middle;
    margin: 3px;
    color: #fff;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    padding: 3px 20px 3px 16px;
    font-size: 12px;
    line-height: 12px;
    border-radius: 5px;
}

    .CartLink span {
        position: relative;
        top: -3px;
        left: 3px;
    }
    /* align text with icon */
    .CartLink:hover {
        border-color: #3eb7ed;
        box-shadow: 0 0 3px 3px rgba(76, 76, 76, 0.1);
        transition: all 1.0s ease;
    }

@keyframes BasketAdd {
    0% {
        top: -200px;
    }

    5% {
        top: 20px;
        opacity: 1.0;
    }

    90% {
        top: 20px;
        opacity: 1.0;
    }

    95% {
        top: 20px;
        opacity: 0.5;
    }

    99% {
        opacity: 0.0;
    }

    100% {
        top: -9000px;
    }
}

/* Added heading styles where we do not want to use h1, h2 etc */
.Heading1 {
    font-size: 18px;
    line-height: 22px;
    height: 38px;
    vertical-align: top;
    color: #234841;
    font-weight: bold;
    background-color: #f8f8f8;
    padding: 0 0 0 20px;
    border: 1px solid #ccc;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    overflow: hidden;
}

    .Heading1 span, .Heading1 div {
        float: left;
        margin-top: 8px;
    }

    .Heading1 div {
        float: left;
        margin-top: 1px;
    }

    .Heading1 .BtnAddNew {
        border-top-right-radius: 6px;
        color: #234841;
        height: 38px;
    }

.Heading2 {
    font-size: 16px;
    line-height: 20px;
    height: 34px;
    color: #234841;
    font-weight: normal;
    padding: 0 0 0 10px;
    vertical-align: top;
    background-color: #e0e9e9;
    overflow: hidden;
}

.Heading2Top {
    font-size: 16px;
    line-height: 20px;
    height: 34px;
    color: #1f444c;
    font-weight: normal;
    padding: 0 0 0 10px;
    vertical-align: top;
    background-color: #f8fafa;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 1px solid #e9e9e9;
    border-bottom: 0;
    overflow: hidden;
}

    .Heading2 span, .Heading2Top span {
        float: left;
        margin-top: 6px;
    }

    .Heading2 div, .Heading2Top div {
        float: left;
        margin-top: 1px;
    }

    .Heading2 aside, .Heading2Top aside {
        float: right;
        margin: 3px 10px 0 0;
    }

    .Heading2Top .BtnAddNew {
        border-top-right-radius: 4px;
        color: #234841;
    }

    .Heading2Top i {
        color: #234841 !important;
    }

    .Heading2Top select {
        float: right;
        margin: 2px 10px 0 0 !important;
        height: 20px !important;
        font-size: 11px;
        border-radius: 3px;
    }

.Heading3 {
    font-size: 12px;
    line-height: 17px;
    color: #234841;
    font-weight: bold;
    padding: 4px 5px 4px 8px !important;
    background-color: #e8eefa;
    overflow: hidden;
    border-bottom: 1px solid #d1d8e8;
    margin: 0;
}

.Heading3Top {
    font-size: 12px;
    line-height: 17px;
    height: 20px;
    color: #234841;
    font-weight: bold;
    padding: 0 0 0 5px;
    vertical-align: top;
    background-color: #e8eefa;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;
}

    .Heading3 span, .Heading3Top span, .Heading3 div, .Heading3Top div {
        float: left;
        margin-top: 1px;
    }

.Heading3 > a {
    float: right;
    margin-right: 5px;
}

.Heading3Top .BtnAddNew {
    border-top-right-radius: 3px;
}

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* CONTENT LAYOUT - DIV based (being phased IN) */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

/* Main Content Area - Admin */
.ContentShell {
    overflow: hidden;
    padding: 0 5px 10px 5px;
    border-color: #eee;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    background-color: #fcfcfc;
    min-height: 600px;
}

.ContentColSet1Left {
    width: 30%;
    float: left;
}

.ContentColSet1Right {
    width: 70%;
    float: right;
}

.ContentColSet2Left {
    width: 40%;
    float: left;
}

.ContentColSet2Right {
    width: 60%;
    float: right;
}

.ContentColSet3Left {
    width: 50%;
    float: left;
}

.ContentColSet3Right {
    width: 50%;
    float: right;
}

.ContentColSet4Left {
    width: 65%;
    float: left;
}

.ContentColSet4Right {
    width: 35%;
    float: right;
}

.ContentColContRight {
    margin-left: 8px;
}

/* Panels within content area - Admin */
.PanelShell {
    margin: 13px 0 0 0;
}

.PanelShellTop {
    margin: 0;
}
/* Occasionally needed for a panel that sits at the top, where spacing is already applied at the container level*/
.PanelContainTable {
    border: solid 1px #e9e9e9;
    background-color: #fff;
}

.PanelContainText {
    padding: 10px;
    border: solid 1px #ccc;
    background-color: #efefef;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.PanelContainTextSquare {
    padding: 10px;
    border: solid 1px #ccc;
    background-color: #efefef;
}

.PanelContainChart {
    padding: 10px;
    border: solid 1px #ccc;
    background-color: #efefef;
    border-radius: 5px;
}

.PanelContainTree {
    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-color: #ccc;
    background-color: #efefef;
    padding: 10px 5px 25px 5px;
}

.PanelContainColumns {
    overflow: hidden;
}

.PanelContainRow {
    overflow: hidden;
    background-color: #fff;
    border-top: 1px solid #ccc;
    padding: 6px;
}

    .PanelContainRow:hover {
        background-color: #fcfce3;
    }

    .PanelContainRow img {
        border: 1px solid #ccc;
    }

.PanelContainImgCrop {
    position: relative;
    width: 600px;
}
/* if desired to change container size, you must update class level variable inside ItemFileImageCrop control to match*/
.PanelTabsContentTelerik {
    margin-top: -1px;
    border: 1px solid #ccc;
    padding: 13px 10px 10px 10px;
    background-color: #fff;
    overflow: hidden;
}

.PanelContentItemSet {
    margin: 15px 10px 0 10px;
}

    .PanelContentItemSet > span {
        display: block;
        line-height: 16px;
    }

.PanelAccount {
    position: absolute;
    right: 75px;
    top: 0;
    padding-top: 5px;
    font-size: 14px;
}

.PanelAccountBasket {
    display: inline-block;
    margin: 0 30px 0 0;
}

.PanelAccountBasketCount {
    color: #f00;
    font-weight: bold;
}

.PanelLoginAccount {
    display: inline-block;
}

.PanelLoginAccount {
    color: #9ebfc4;
}

    .PanelLoginAccount a {
    }

        .PanelLoginAccount a:hover {
            color: #006f98;
        }

.ChangeButton {
    background-color: #333;
    padding: 3px 8px;
    border-radius: 3px;
}

.PanelLoginOuter1 {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10005;
}

.PanelLoginOuter2 {
    margin: 0 auto;
    max-width: 1100px;
    position: relative;
}

.PanelLogin {
    margin: 0 auto;
    background-color: #edf4f4;
    padding: 15px 30px;
    border-left: 1px solid #1f444c;
    border-right: 1px solid #1f444c;
    border-bottom: 5px solid #1f444c;
}

.PanelLoginCont {
    position: absolute;
    top: 0;
    right: 150px;
    height: 0;
    overflow: hidden;
}

.PanelLogin input {
    display: inline-block;
    margin: 5px 0 !important;
}

.PanelLoginHide {
    float: right;
    margin: -20px -20px 50px 0;
    color: #666;
    padding: 0 10px;
    border: 1px solid transparent;
}

    .PanelLoginHide:hover {
        border: 1px solid #000;
        background-color: #fff;
        cursor: pointer;
    }

.PanelLoginProfile {
    background-color: #f5f5f5;
    padding: 15px 30px;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: 5px solid #999;
    width: 300px;
    font-size: 14px;
}

.PanelLoginProfileCont {
    position: absolute;
    top: 0;
    right: 50px;
    height: 0;
    overflow: hidden;
}

.PanelLoginProfile a:link, .PanelLoginProfile a:visited {
    color: #69646c;
}

.PanelLoginProfile a:hover, .PanelLoginProfile a:active {
    color: #ff8c0a;
}

.PanelLoginProfileSelect {
    font-size: 12px;
    padding: 3px 10px;
}

/* Address Handling*/
/* data-address fields:Name, NameTradingAs, Building, StreetPOBox, Suburb, TownCity, PostZipCode, StateProvince, Country, Email, Phone*/
/* Note that for each country we may have custom formating, with several fields in one line. In those instances use first field data-address name i.e. TownCity for Auckland 1001*/
.PanelAddress > span {
    display: block;
}

.PanelAddress {
    margin: 15px 5px 5px 5px;
    font-size: 13px;
    line-height: 18px;
}

    .PanelAddress span[data-address=Name], .PanelAddress span[data-address=NameTradingAs] {
        font-size: 18px;
        line-height: 24px;
    }

    .PanelAddress span[data-address=Email] {
        margin-top: 15px;
    }

.PanelAddressBilling > span {
    display: block;
}

.PanelAddressBilling {
    margin: 15px 5px 5px 5px;
    font-size: 13px;
    line-height: 17px;
}

    .PanelAddressBilling span[data-address=Name], .PanelAddress span[data-address=NameTradingAs] {
        font-size: 18px;
        line-height: 24px;
    }

    .PanelAddressBilling span[data-address=Email] {
        margin-top: 15px;
    }

.PanelAddressDelivery > span {
    display: block;
}

.PanelAddressDelivery {
    margin: 15px 5px 5px 5px;
    font-size: 13px;
    line-height: 17px;
}

    .PanelAddressDelivery span[data-address=Name], .PanelAddress span[data-address=NameTradingAs] {
        font-size: 18px;
        line-height: 24px;
    }

    .PanelAddressDelivery span[data-address=Phone] {
        margin-top: 15px;
    }


/* ======================================================================================== */
/* ======================================================================================== */
/* Content - Coded outputs */
/* ======================================================================================== */
/* ======================================================================================== */

/* Responsive Containers */
/* Video */
.VideoDetailOuter {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 2%;
}
/* iframe */
.iframe43 {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 75%;
}
/* Aspect ratio is achieved through "padding-bottom"....  75% = 4x3; 56.25% = 16x9. */
.iframe16x9 {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
}
    /* Aspect ratio is achieved through "padding-bottom"....  75% = 4x3; 56.25% = 16x9. */
    .iframe43, .iframe16x9 iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* Container for the DIV based Map handling	*/
.containerMap {
    width: 100%;
}

.outerMap {
    position: relative;
    width: 100%;
    padding-top: 75%;
}

.innerMap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.GoogleMapInfoWindow {
    min-height: 100px;
    min-width: 200px;
}

.GoogleMapHeading1 {
    font-weight: bold;
    color: #11598a;
}

.GoogleMapText1 {
    font-size: 10px;
}
/* St No. */
.GoogleMapText2 {
    font-size: 10px;
    color: #000;
}
/* Suburb. */
.GoogleMapText3 {
    font-size: 10px;
    color: #000;
}
/* City. */
.GoogleMapText4 {
    font-size: 10px;
    color: #000;
}
/* Country. */
.GoogleMapText5 {
    font-size: 10px;
    color: #000;
    padding: 7px 0;
}
/* Phone. */
.GoogleMapText6 {
    font-size: 10px;
    color: #3488c1;
}
/* Web Address */
.GoogleMapText7 {
    font-size: 10px;
    color: #000;
}
/* Business type. */
.GoogleMapText8 {
    font-size: 10px;
    color: #000;
}
/* Untried as yet */
.GoogleMapText9 {
    font-size: 10px;
    color: #000;
}
/* Untried as yet */
.GoogleMapText10 {
    font-size: 10px;
    color: #000;
}
/* Untried as yet */

.GoogleMapButton {
    text-align: center;
    text-shadow: 0px 2px #0c1c5d;
    font-weight: 700;
    padding: 3px 20px;
    margin: 15px auto;
    font-size: 14px;
    line-height: normal;
    display: inline-block;
    border-radius: 5px;
    background-color: #0099ff;
    background-image: linear-gradient(0deg, #296abf, #1d327b 90%);
    cursor: pointer;
}

a.GoogleMapButton:link, a.GoogleMapButton:visited {
    text-decoration: none;
    color: #fff;
}

a.GoogleMapButton:hover, a.GoogleMapButton:active {
    text-decoration: none;
    background-color: #2a6abf;
    background-image: linear-gradient(0deg, #0099ff, #2a6abf 90%);
    transition: all 0.3s ease;
}

.GMapResultTable {
    margin-bottom: 20px;
    line-height: 1.5;
    border-top: 1px solid #bdbebf;
    background-color: #fff;
    width: 99%;
}

    .GMapResultTable th {
        background-color: #11598a;
        font-weight: 300;
        color: #fff;
        padding: 10px;
    }

    .GMapResultTable tr {
        border-bottom: 1px solid #cdd6e1;
    }

        .GMapResultTable tr:hover {
            background-color: #f3f5f8;
        }

    .GMapResultTable td {
        font-size: 14px;
        padding: 12px 8px; /*vertical-align:top;*/
    }

        .GMapResultTable td > h4 {
            margin: 4px 0 6px 0;
        }

.GMapResultTableSubHead {
    color: #939598;
    font-weight: bold;
}

.GMapResultCol1 {
    width: 70%;
}

.GMapResultCol2 {
    width: 15%;
}

.GMapResultCol3 {
    width: 15%;
}

.GMapResultCol4 {
    width: 15%;
}

/* Table
===================== */
.TableBorder {
    background-color: #fff;
    border: 1px solid #888;
    margin-top: 1px;
}

.TableBasic {
    border: none;
    width: 100%;
    border-collapse: collapse;
}

    .TableBasic td {
        padding: 0;
    }

.TableInfoLayout {
    width: 100%;
    border-collapse: collapse;
}

    .TableInfoLayout > tbody > tr > th {
        text-align: left;
        color: #333;
        font-weight: bold;
        padding: 7px !important;
        border: 1px solid #bebebe;
        background-color: #fff;
    }

    .TableInfoLayout > tbody > tr > td {
        text-align: left;
        vertical-align: top;
        padding: 7px;
        font-size: 14px;
    }

    .TableInfoLayout > tbody > tr:first-of-type > td {
        padding: 10px 7px 7px 7px;
    }

/* should probably be reworked, because this has been moved from rugby for a handful of controls that we placed in streamSWEET. */
/* These controls are still not made part of the system properly, so we can either update them to use generic styles, or remove styles and controls */
/* usercontrol\SHOP\Payment\Front\CreditsLogBought.ascx */
/* usercontrol\front\custom\CreditsLogUsed.ascx */
/* usercontrol\front\Network\FriendsResultsList.ascx */
/* usercontrol\front\Network\MyFriends.ascx */
.AccountTable {
    margin-bottom: 6px;
}

    .AccountTable td {
        padding: 4px 2px;
    }

    .AccountTable th {
        text-align: left;
        background-color: #fff;
        border: 2px solid #cde9b4;
        font-size: 15px;
        padding: 6px;
        background-image: url(/assets/images/tile_header_profile.jpg);
        background-repeat: repeat-x;
    }

.AccountTableLeft {
    text-align: left;
    font-weight: bold;
    background-color: #fff;
    border-top: 2px solid #cde9b4;
    border-left: 2px solid #cde9b4;
    border-bottom: 2px solid #cde9b4;
    font-size: 15px;
    padding: 6px;
    background-image: url(/assets/images/tile_header_profile.jpg);
    background-repeat: repeat-x;
}

.AccountTableCenter {
    text-align: left;
    font-weight: bold;
    background-color: #fff;
    border-top: 2px solid #cde9b4;
    border-bottom: 2px solid #cde9b4;
    font-size: 15px;
    padding: 6px;
    background-image: url(/assets/images/tile_header_profile.jpg);
    background-repeat: repeat-x;
}

.AccountTableRight {
    text-align: left;
    font-weight: bold;
    background-color: #fff;
    border-top: 2px solid #cde9b4;
    border-right: 2px solid #cde9b4;
    border-bottom: 2px solid #cde9b4;
    font-size: 15px;
    padding: 6px;
    background-image: url(/assets/images/tile_header_profile.jpg);
    background-repeat: repeat-x;
}

.AccountTableSub {
    background-image: url(/assets/images/tile_account_sub.jpg);
    background-repeat: repeat-x;
    border-bottom: 1px solid #ccc;
}

/* Also from TR */
.TableInformation {
    padding: 2px;
    border: 1px solid #cde9b4;
    background-color: #fafcfa;
    width: 100%;
    max-width: 1200px;
}

    .TableInformation th {
        font-size: 12px;
        color: #000;
        background-image: url(/assets/images/tile_header_profile.jpg);
        background-repeat: repeat-x;
        text-align: left;
        padding: 5px;
        border-bottom: 2px solid #cde9b4;
    }

.TableInformationSub {
    font-size: 12px;
    padding: 4px;
    border-bottom: 2px solid #cde9b4;
    background-color: #ccc;
}

.TableInformation td {
    padding: 3px;
    vertical-align: top;
    border-bottom: 1px dashed #cde9b4;
    line-height: normal;
}

.TableAddAttendees {
    margin-top: 25px !important;
}

    .TableAddAttendees caption {
        text-align: left;
        padding-left: 5px;
        font-size: 12px;
        font-style: italic;
    }

/* streamSWEET predefined tables
===================== */
.Table1 {
    border-collapse: collapse;
    border: 1px solid #b7b8b8;
}

.Table1Head {
    background-color: #3c3c3c;
    padding: 5px 5px 5px 3px;
    font-size: 14px;
    font-weight: bold;
    color: #f7f7f7;
    text-align: left;
    border: 1px solid #b7b8b8;
}

.Table1SubHead {
    background-color: #d4d4d4;
    padding: 3px 3px 3px 3px;
    font-size: 12px;
    font-weight: bold;
    border-top: 1px solid #b7b8b8;
    border-bottom: 1px solid #b7b8b8;
}

.Table1Content {
    background-color: #fbfbfb;
    padding: 2px 2px 2px 3px;
    font-size: 12px;
    border-top: 1px solid #b7b8b8;
    border-bottom: 1px solid #b7b8b8;
}

.FormContItemFile {
    width: 90%;
    max-width: 800px;
    border-collapse: collapse;
    border: 1px solid #ccc;
}

    .FormContItemFile td {
        padding: 2px;
    }

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Data Repeater*/
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

.TableDataRepeat {
    width: 100%;
    border-collapse: collapse;
}

    .TableDataRepeat caption {
        text-align: left;
        font-size: 14px;
        color: #4c6465;
        font-weight: bold;
        padding: 7px 5px 4px 10px;
        border-color: #ccc;
        border-style: solid;
        border-width: 1px 1px 0 1px;
        background-color: #fff;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .TableDataRepeat th {
        font-size: 12px;
        color: #4c6465;
        font-weight: normal;
        text-align: left;
        padding: 4px;
        background-color: #d6dcdc;
        background-image: linear-gradient(0deg, #d6dcdc, #eeeff1 90%);
    }

    .TableDataRepeat td {
        font-size: 12px;
        text-align: left;
        padding: 4px 3px;
    }

        .TableDataRepeat td a {
            text-decoration: none;
            display: block;
        }

            .TableDataRepeat td a:hover {
                text-decoration: none;
                color: #f30;
            }

    .TableDataRepeat tr:nth-child(even) {
        background-color: #fff;
        border-bottom: 1px solid #fff;
    }

    .TableDataRepeat tr:nth-child(odd) {
        background-color: #fff;
        border-bottom: 1px solid #fff;
    }

    .TableDataRepeat tr:hover {
        background-color: #fcfce3;
        border-bottom: 1px solid #c4c4b5;
    }

    .TableDataRepeat address {
        line-height: normal;
        font-style: normal;
        margin: 5px;
    }

        .TableDataRepeat address > a {
            margin-top: 5px;
        }

/* Data Grid 
===================== */
/* Note. There is a level of repetition and !important handling on the grid rows to override default Telerik values applied, where Telerik Grid is used.  */
.datagridTable {
    color: #f60;
    background-color: #fff;
    width: 100%;
}

.dataGridCont {
    border-width: 0 1px 1px 1px;
    border-style: sold;
    border-color: #999;
}

    .dataGridCont img {
        display: inline-block;
        margin: 0;
        vertical-align: middle;
    }

.datagrid {
    background-color: #fefefe;
    width: 100%;
}

    .datagrid td {
        padding: 4px 4px 4px 4px !important;
        font-size: 12px;
        border-top: 1px solid #ddd;
        height: 26px;
    }

        .datagrid td a {
            text-decoration: none;
            display: block;
        }

            .datagrid td a:before {
                content: '';
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }

    .datagrid tr:first-of-type td a {
        height: 100%;
        white-space: nowrap;
        display: block;
    }
    /* Custom hanlding for the sortable Header Row */
    .datagrid tr:last-of-type td {
        border-bottom: 1px solid transparent;
    }
    /* Stop the bottom row from vertical jumping - applicable where pagination exists */
    .datagrid tr td:last-of-type {
        padding-right: 3px !important;
    }
/* Make sure we have suitable white space at the right hand edge of the grid */

.datagridAlter {
    background-color: #fafafa;
}

    .datagridAlter td {
        padding: 4px 4px 4px 4px !important;
        font-size: 12px;
        border-top: 1px solid #ddd;
        height: 26px;
    }

        .datagridAlter td a {
            text-decoration: none;
            display: block;
        }

            .datagridAlter td a:before {
                content: '';
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }

.datagridSelected {
    background-color: #ecf5f7;
}

    .datagridSelected td {
        padding: 4px 4px 4px 4px !important;
        font-size: 12px;
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
        height: 26px;
    }

        .datagridSelected td a {
            text-decoration: none;
            display: block;
        }

            .datagridSelected td a:before {
                content: '';
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }

.datagridOver {
    background-color: #ebf9fb;
}

    .datagridOver td {
        padding: 4px 4px 4px 4px !important;
        font-size: 12px;
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
        height: 26px;
    }

        .datagridOver td a {
            text-decoration: none;
            display: block;
        }

            .datagridOver td a:before {
                content: '';
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }

/* datagridHeader is only applied to the header row of non-sortable, non drag n drop grids. */
.datagridHeader {
    padding: 0;
}

    .datagridHeader td {
        padding: 4px 2px 4px 4px;
    }

/* Extra handling for the Header Row */
.datagridColumn {
    color: #1f444c;
    background-color: #eff2f2;
}

    .datagridColumn a:link, .datagridColumn a:visited, .datagridColumn a:active {
        text-decoration: none;
        color: #1f444c;
    }

    .datagridColumn a:hover {
        color: #f30;
    }

    .datagridColumn a::after {
        content: "\21F5";
        margin-left: 4px;
        color: transparent;
    }

    .datagridColumn a:hover::after {
        content: "\21F5";
        margin-left: 4px;
        color: #333;
    }

.datagridColumnSelected {
    color: #1f444c;
    background-color: #C3CAD6;
}

    .datagridColumnSelected a:link, .datagridColumnSelected a:visited, .datagridColumnSelected a:active {
        text-decoration: none;
        color: #1f444c;
    }

    .datagridColumnSelected a::after {
        content: "\21F5";
        margin-left: 5px;
        color: #333;
    }
    /*\21C5 \21E7 \21E9 \2191 \2193 */
    .datagridColumnSelected a:hover {
        color: #f30;
    }

/*Format pagination handling. */
.datagridPager td {
    height: 35px;
    font-size: 14px;
    color: #006;
    font-weight: normal;
    background-color: #fff;
    padding: 8px 40px 6px 0 !important;
    text-align: right;
    vertical-align: bottom;
    border-top: 1px solid #999;
}

    .datagridPager td span {
        padding: 0 5px 0 5px;
        font-weight: bold;
    }

    .datagridPager td a {
        padding: 0 8px;
        margin: 0 1px 0 0;
        color: #999;
        font-weight: normal;
        border: 1px solid #666;
        display: inline-block;
        line-height: 20px;
        height: 24px;
        border-radius: 3px;
    }

        .datagridPager td a:hover {
            background-color: #555;
            border-color: #000;
            color: #fff;
            font-weight: bold;
        }

/*Apply colours to key columns with data such as "Yes" and "No" so they stand out more. */
.datagridRed {
    font-size: 11px;
    color: #006;
    font-weight: normal;
    background-color: #ffd9d9;
}

.datagridGreen {
    font-size: 11px;
    color: #006;
    font-weight: normal;
    background-color: #d0ffce;
}

.datagridOrange {
    font-size: 11px;
    color: #006;
    font-weight: normal;
    background-color: #ffe6b0;
}

/* RadGrid - used for drag and drop grid */
.HypergridTableHeader {
    overflow: hidden;
    width: 100%;
    table-layout: fixed;
    empty-cells: show;
    border-collapse: collapse;
}

    .HypergridTableHeader th {
        padding: 4px 2px 4px 4px;
    }

.DivDragDropImage {
    margin-left: auto;
    margin-right: auto;
    width: 16px;
    height: 16px;
    text-align: center;
    background-image: url(/assets/images/icon_sort_up_down.gif);
}

.RadGridDragDropEnabled {
    cursor: move;
}

.rgPager .rgCurrentPage {
    text-decoration: none;
    color: Black;
}

.rgPager .rgInfoPart {
    display: none;
}

.rgMasterTable {
    border-collapse: collapse !important;
}

    .rgMasterTable tr th {
        vertical-align: bottom;
    }

    .rgMasterTable tr:last-of-type td {
        border-bottom: 1px solid #999;
    }

.rgFooterWrapper {
    border-top: 2px solid #999;
    padding-top: 5px;
    color: #4c6465 !important;
    font-size: 11px;
}


/* TABS PANEL - Used for presentation of content in a tabbed view.  This handles the tabs that sit in Div which sits directly above a content panel. */
.Tabs {
    font-size: 0;
    padding: 0 10px 0 10px;
    border-bottom: 1px solid #ccc;
}

    .Tabs a {
        background-color: #f5f5f2;
        text-align: center;
        border: 1px solid #ccc;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        margin-bottom: -1px;
        vertical-align: bottom;
        color: #999;
        padding: 7px 14px 5px 14px;
        font-size: 14px;
        display: inline-block;
    }

    .Tabs:not(a:first-of-type) {
        margin-left: -1px;
    }

    .Tabs a:hover, .Tabs a:link, .Tabs a:visited, .Tabs a:active {
        color: #999;
        text-decoration: none;
    }

    .Tabs a:hover {
        background-color: #fff;
    }

    .Tabs .TabsOn {
        background-color: #fff;
        border-bottom: 1px solid #fff;
        padding: 9px 14px 6px 14px !important;
    }

        .Tabs .TabsOn a:link, .Tabs .TabsOn a:visited, .Tabs .TabsOn a:active, .Tabs .TabsOn a:hover {
            color: #999;
            text-decoration: none;
        }

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Telerik Tabs */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

/* Overrides to get the base environment as Stream needs it. Note this CSS Class "PanelTabsContentTelerik" (above) which is set to margin-top:-1px; */
.RadTabStrip .rtsLevel1 {
    border: none !important;
}

.RadTabStrip .rtsLink {
    border: none !important;
}

.RadTabStrip .rtsUL {
    border-bottom: 1px solid transparent;
    margin-bottom: 0 !important;
}

/* Primary handling - Class applies to the LI */
.RadTabStrip .RadTab {
    background-color: #f5f5f2;
    text-align: center;
    border: 1px solid #ccc;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: -1px;
    vertical-align: bottom !important;
}

    .RadTabStrip .RadTab:not(:first-child) {
        margin-left: -1px;
    }

/* Control the various additional states that a tab can have */
.RadTabStrip .RadTabSelected {
    background-color: #fff;
    border-bottom: 1px solid #fff;
}

.RadTabStrip .RadTabHovered {
    background-color: #e5e5de;
}

.RadTabStrip .RadTabSelected.RadTabHovered {
    background-color: #fff;
}

.RadTabStrip .RadTabDisabled {
    color: #999;
}

/* Control how the text sits within the tab, and in doing so also control the overall height of each tab */
.RadTabStrip .rtsLink {
    padding: 7px 14px 5px 14px !important;
}

.RadTabStrip .RadTabSelected .rtsLink {
    padding: 9px 14px 6px 14px !important;
}

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */


/* Stream 
===================== */

/* In-page alert and information panels */
.in-page-alert-panel {
    width: calc(100% - 126px);
    max-width: 800px;
    margin: 18px 10px;
    padding: 24px 30px 20px 70px;
    font-size: 1.1em;
    position: relative;
    min-height: 40px;
}

    .in-page-alert-panel i {
        position: absolute;
        top: 30px;
        left: 10px;
    }

    .in-page-alert-panel p {
        color: #333;
    }

    .in-page-alert-panel a {
        font-weight: bolder;
    }

.in-page-alert-title {
    font-size: 1.3em;
}

.in-page-alert-emphasis {
    font-style: italic;
}

.in-page-alert-btn {
    margin: 20px 10px 15px 10px;
}

.in-page-alert-note {
    background-color: #eaf7fd;
    border-left: 6px solid #2d465d;
}

    .in-page-alert-note i {
        color: #2d465d;
    }

.in-page-alert-warning {
    background-color: #fff8d0;
    border-left: 6px solid #ff9c2b;
}

    .in-page-alert-warning i {
        color: #ff9c2b;
    }

.in-page-alert-error {
    background-color: #f9e1df;
    border-left: 6px solid #e83724;
}

    .in-page-alert-error i {
        color: #e83724;
    }



/* ################ */
/* In-page alert and information panels */
.PanelInPageAlert {
    max-width: 800px;
    margin: 18px 10px;
    padding: 16px 20px;
    font-size: 1.2em;
}

    .PanelInPageAlert i {
        float: left;
        margin: 0 auto;
        width: 8%;
        min-width: 50px;
    }

    .PanelInPageAlert p {
        float: left;
        margin: 4px 0 0 0;
        width: 85%;
        color: #333;
    }

.Note {
    background-color: #eaf7fd;
    border-left: 6px solid #2d465d;
}

    .Note i {
        color: #2d465d;
    }

.Warning {
    background-color: #fff8d0;
    border-left: 6px solid #ff9c2b;
}

    .Warning i {
        color: #ff9c2b;
    }

.Error {
    background-color: #f9e1df;
    border-left: 6px solid #e83724;
}

    .Error i {
        color: #e83724;
    }
/* ################ */



.PanelInPageAlertTitle {
    font-size: 1.3em;
}

.PanelInPageAlertEmphasis {
    font-style: italic;
}

.PanelInPageAlert a {
    font-weight: bolder;
}

.PanelInPageInform {
    width: 80%;
    max-width: 800px;
    margin: 10px;
    padding: 14px 10px 14px 70px;
    font-size: 1.2em;
    background-color: #ffc;
    border: 1px solid #fc0;
    border-radius: 2px;
    box-shadow: 0 0 20px 0px #ccc;
    background-image: url('/assets/admin/images/icon_warning_sign.svg');
    background-repeat: no-repeat;
    background-position: 16px 16px;
}


/* Alert Message Handling - Appears at bottom right of screen after content/form updates */
.AlertBox {
    width: 350px;
    margin: 0;
    padding: 0;
    border-radius: 3px;
    box-shadow: 0 0 20px 0px #ccc;
    overflow: hidden;
    cursor: auto;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
}

.AlertBoxInner {
    padding: 10px 10px 10px 70px;
    overflow: hidden;
    z-index: 9999;
}

.AlertBoxTitle {
    margin: 5px 0 0 0;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.AlertBoxText {
    margin: 15px 10px 10px 0;
    font-size: 1.1em;
    color: #333;
}

.AlertBoxSuccess {
    background-color: #e0fcd0;
    border: 1px solid #b0cba7;
    animation: ActionSuccess 10.0s forwards;
}
/*Green Box */
.AlertBoxInnerSuccess {
    background-image: url('/assets/images/msg_type_01_01.svg');
    background-repeat: no-repeat;
    background-position: 5px 10px;
}

.AlertBoxError {
    background-color: #f9d6d5;
    border: 1px solid #cf756a;
    animation: ActionAlert 1.5s forwards;
}
/* Red Box */
.AlertBoxInnerError {
    background-image: url('/assets/images/msg_type_02_01.svg');
    background-repeat: no-repeat;
    background-position: 5px 10px;
}

.AlertBoxInfo {
    background-color: #fff8d0;
    border: 1px solid #dac48f;
    animation: ActionAlert 1.5s forwards;
}
/* Orange Box */
.AlertBoxInnerInfo {
    background-image: url('/assets/images/msg_type_03_01.svg');
    background-repeat: no-repeat;
    background-position: 5px 10px;
}

@keyframes ActionSuccess {
    0% {
        right: -360px;
    }

    5% {
        right: 40px;
        opacity: 0.6;
    }

    8% {
        right: 10px;
        opacity: 1.0;
    }

    10% {
        right: 27px;
    }

    12% {
        right: 17px;
    }

    13% {
        right: 22px;
    }

    14% {
        right: 20px;
    }

    80% {
        opacity: 1.0;
    }

    99% {
        right: 20px;
        opacity: 0.0;
    }

    100% {
        right: -1000px;
        opacity: 0.0;
    }
}

@keyframes ActionAlert {
    0% {
        right: -360px;
    }

    50% {
        right: 40px;
        opacity: 1.0;
    }

    70% {
        right: 10px;
    }

    85% {
        right: 27px;
    }

    90% {
        right: 17px;
    }

    95% {
        right: 22px;
    }

    100% {
        right: 20px;
    }
}

/* No Results Handling */
.AlertNoResult {
    padding: 20px 10px 20px 20px;
    border: 1px solid #e5e5e5;
    background: #f7f7f7;
    margin: 30px auto;
}

.AlertNoResultIcon {
    float: left;
    width: 7%;
    margin-right: 10px;
    color: #F93;
    text-align: center;
}

.AlertNoResultText {
    float: left;
    width: 88%;
    font-size: 18px;
    line-height: 24px;
    padding: 5px;
}

/* Error Pages */
.ErrorBox {
    margin-left: auto;
    margin-right: auto;
    width: 65%;
    max-width: 800px;
    margin-top: 60px; /*border-top: 9px solid #FF0;*/
    background-color: #fff;
    padding: 40px 60px;
    color: #0a454d; /*box-shadow: 0 0 10px 10px rgba(76, 76, 76, 0.1);*/
}

    .ErrorBox h1 {
        color: #0a454d !important;
    }

    .ErrorBox h2 {
        color: #0a454d !important;
    }

    .ErrorBox p {
        color: #0a454d !important;
    }

    .ErrorBox hr {
        border-top-width: 4px;
        border-top-style: solid;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        border-top-color: #b9c7ce;
        margin-right: 0px;
        margin-left: 0px;
    }

.ErrorLink {
    margin-left: auto;
    margin-right: auto;
    width: 65%;
    padding: 30px;
}

.ErrorIcon {
    font-size: 120px !important;
}


/* Telerik
===================== */
.RadTabStrip a:active, .RadTabStrip a:hover {
    color: #f60 !important;
}

.TabDisabled {
    color: #999;
}
/* Over-ride telerik generated styles */
.rwControlButtons li {
    list-style-type: none;
}

.rcbHeader ul, .rcbHeader ul li, .rcbFooter ul, .rcbFooter ul li, .rcbItem ul, .rcbItem ul li, .rcbHovered ul, .rcbHovered ul li, .rcbDisabled ul, .rcbDisabled ul li {
    list-style-type: none !important;
    margin: 0px;
    padding: 0px;
}

.RadWinManager {
    z-index: 9999999;
}
/* to make rad windows show above everything else */

/* Modal 
===================== */
.ModalBackground {
    background-color: Gray;
}

.ModalPopup {
    display: none;
}

/* Tool Tip 
===================== */

/* File Upload
===================== */
.FileUploadHeader {
    font-size: 12px;
    font-weight: bold;
    color: #464c55;
    background-color: #c1d82f;
    padding: 4px;
    border-bottom: 1px solid #666;
}

/* Ajax Popup 
===================== */
/* shop */
.FormTopPopup {
    background-image: url(/assets/images/tile_stripe.jpg);
    background-repeat: repeat-x;
    color: #fff;
    font-weight: bold;
    padding-left: 15px;
}

.FormButtonPopup {
    padding: 6px 12px 6px 12px;
    font-size: 14px;
    color: #393b4a;
    background-image: url(/assets/images/tile_ajaxform_header.jpg);
    background-repeat: repeat-x;
    background-color: #b0becd;
    text-decoration: none;
}
/* feedback only */
.FormTablePopup {
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
}
/* carried from rugby - PayPal popup,  Login Message popup */
.FormHeaderPopup {
    padding: 5px 30px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-image: url(/assets/images/tile_ajaxform_header.jpg);
    background-repeat: repeat-x;
}

.FormHeaderPopup {
    padding: 3px;
    font-size: 14px;
    font-weight: bold;
    color: #393b4a;
    background-image: url(/assets/images/tile_ajaxform_header.jpg);
    background-repeat: repeat-x;
}
/* \PayPal_HTML.aspx */
/* \usercontrol\SHOP\Payment\Front\CreditsBuy.ascx */
.CreditDisplay {
    font-size: 14px;
    color: #000;
    padding: 6px 10px;
    background-color: #dbefde;
    border: 1px solid #6eaf4e;
}
/* PayPal popup - \PayPal_HTML.aspx */
.TableBuyStuff {
    width: 100%;
    margin: 10px 0px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

    .TableBuyStuff th {
        background-color: #f1eded;
        padding: 4px;
    }

    .TableBuyStuff td {
        padding: 4px;
    }
/* BUY NOW POP-UP */
/* ref:http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/ */
#fade {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .80;
    z-index: 9999;
}

.popup_block {
    display: none;
    background: #fff;
    padding: 0px;
    border: 2px solid #ddd;
    float: left;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
}


/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* FORMS */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */


/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Forms :: Layout (Note. The 'section' element is used to show panels of content based on user selection) */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

.FormSetHor, .FormSetVert {
    background-color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 800px;
}

    .FormSetHor > section, .FormSetVert > section, .FormSetHor .FormSetHor, .FormSetVert .FormSetVert {
        margin: 0;
        padding: 0;
        border: none;
        width: 100%;
    }
    /*On occasion we need 'sub form' layout, so make it appear as though it is part of the standard form.*/
    .FormSetHor > h1, .FormSetVert > h1 {
        font-size: 26px;
        font-weight: 500;
        background-color: #f2f7f8;
        margin: 10px 0 0 0;
        padding: 6px 10px 6px 10px;
    }

    .FormSetHor > h2, .FormSetVert > h2 {
        font-size: 26px;
        font-weight: 500; /*background-color: #f2f7f8;*/
        margin: 20px 0 0 0;
        padding: 10px 18px 10px 2px;
        border-bottom: 2px solid #4ba0a7;
    }

        .FormSetHor > h2:first-of-type, .FormSetVert > h2:first-of-type {
            margin: 0;
        }

    .FormSetHor > h3, .FormSetHor > section > h3, .FormSetVert > h3, .FormSetVert > section > h3 {
        font-size: 22px;
        font-weight: 500; /*background-color: #f2f7f8;*/
        margin: 25px 0 10px 0;
        padding: 10px 18px 10px 2px;
        border-bottom: 2px solid #4ba0a7;
    }

        .FormSetHor > h3:first-child, .FormSetHor > section > h3:first-child, .FormSetVert > h3:first-child, .FormSetVert > section > h3:first-child {
            margin: 0;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            padding: 10px 15px;
            line-height: 20px;
        }
    /* For when used as a top heading where sub-level forms are needed. */

    .FormSetHor > div, .FormSetHor > section > div, .FormSetVert > div, .FormSetVert > section > div {
        padding: 10px 4px 0 4px;
    }

        .FormSetHor > div:last-of-type, .FormSetVert > div:last-of-type {
            padding-bottom: 10px;
        }

        .FormSetHor > div > div:nth-of-type(1), .FormSetHor > section > div > div:nth-of-type(1) {
            width: 30%;
            min-width: 150px;
            max-width: 300px;
            font-size: 16px;
            font-weight: 500;
            display: inline-block;
        }

        .FormSetHor > div > div:nth-of-type(2), .FormSetHor > section > div > div:nth-of-type(2) {
            width: 68%;
            max-width: 850px;
            display: inline-block;
            position: relative;
        }

        .FormSetVert > div > div:nth-of-type(1), .FormSetVert > section > div > div:nth-of-type(1) {
            width: 100%;
            min-width: 200px;
            font-size: 16px;
            font-weight: 500;
            padding: 15px 0 8px 0;
        }

        .FormSetVert > div > div:nth-of-type(2), .FormSetVert > section > div > div:nth-of-type(2) {
            width: 100%;
            position: relative;
        }

/* Forms that do not require any heading rows */
.FormSetFilter {
    border: 1px solid #ccc;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #fefefe;
    margin-bottom: 10px;
}

    .FormSetFilter > div {
        padding: 10px 10px 0 10px;
    }

        .FormSetFilter > div:last-of-type {
            padding-bottom: 10px;
        }

        .FormSetFilter > div > div:nth-of-type(1) {
            width: 30%;
            min-width: 150px;
            max-width: 200px;
            font-size: 14px;
            color: #666;
            display: inline-block;
        }

        .FormSetFilter > div > div:nth-of-type(2) {
            width: 70%;
            max-width: 850px;
            display: inline-block;
            position: relative;
        }

        /* Globally handle vertical alignment */
        .FormSetHor > div > div, .FormSetHor > section > div > div, .FormSetFilter > div > div {
            vertical-align: top;
        }

            .FormSetHor > div > div:nth-child(2) > *, .FormSetHor > section > div > div:nth-child(2) > *, .FormSetVert > div > div:nth-child(2) > *, .FormSetVert > section > div > div:nth-child(2) > *, .FormSetFilter > div > div:nth-child(2) > * {
                vertical-align: top;
            }
    /* Get the vertical alignment fully consistent */

    /* Provide for inline help text */
    .FormSetHor aside, .FormSetVert aside, .FormSetFilter aside {
        color: #666;
        font-style: italic;
        font-size: 13px;
        padding: 8px 0;
        max-width: calc(100% - 10px);
    }

    .FormSetHor > aside, .FormSetVert > aside, .FormSetFilter > aside {
        padding: 15px;
        max-width: calc(100% - 30px);
    }

/* Provide for situations where Text is presented in place of a form field */
.FormSetHor > div > div:nth-of-type(2) > span, .FormSetHor > section > div > div:nth-of-type(2) > span, .FormSetVert > div > div:nth-of-type(2) > span, .FormSetVert > section > div > div:nth-of-type(2) > span {
    font-size: 1.2em;
}

/* This is no longer used on forms but is still used in the display of LEGACY shopping invoices, CPD, activity history, etc */
.FormTable {
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1);
    -moz-box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1);
    box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1);
}

    .FormTable th {
        font-size: 24px;
        color: #333;
        font-weight: 300;
        padding: 18px 10px 18px 18px;
        background-color: #fafafa;
        text-align: left;
        border-bottom: 3px solid #e8e8e8;
    }

    .FormTable td {
        font-size: 16px;
        color: #333;
        font-weight: 300;
        padding: 6px 15px;
    }

.FormTableHead {
    font-size: 14px;
    color: #41ae35;
    font-weight: bold;
    padding: 7px 5px 5px 15px;
    border-left: 4px solid #41ae35;
}

.FormCellHeadSub {
    font-size: 14px;
    font-weight: 300;
    background-color: #fafafa !important;
}

.InstructTextSml {
    font-size: 10px;
    color: #999;
}

.FormRequired {
    font-size: 18px;
    color: #639ea5;
}

.ErrStdRed {
    font-size: 14px;
    color: #f00;
    vertical-align: top
}


/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Forms :: Generic styling of elements */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

.FormInvalid {
    background-color: #eaced1 !important;
}
/* IC: important useful when dealing with telerik */

/* Causes a star to display after mandatory form elements - apply class to a trailing span */
.FormRequiredField::after {
    content: "";
    height: 18px;
    width: 18px;
    position: absolute;
    top: 14px;
    left: calc(90% + 5px);
    background: url(/assets/images/icon_required.svg) no-repeat;
    background-position: 50% 50%;
    overflow: hidden;
}

.FormRequiredFieldNarrow::after {
    content: "-*-";
    color: transparent;
    font-size: 14px;
    height: 18px;
    width: 18px;
    margin: 0 5px;
    background: url(/assets/images/icon_required.svg) no-repeat;
    background-position: 50% 50%;
    overflow: hidden;
}

/* Default form element styling */
input[type="text"], input[type="password"], textarea {
    display: inline-block;
    padding: 9px 0 9px 9px;
    font-size: 16px;
    color: #000;
    background-color: #fbfbfb;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

input[type="text"], input[type="password"] {
    height: 30px;
    margin: 0 5px 0 0;
}

select {
    cursor: pointer;
    display: inline-block;
    padding: 9px 0 9px 9px;
    margin: 0 5px 0 0;
    width: 100%;
    font-size: 16px;
    color: #000;
    background-color: #fbfbfb;
    border: 1px solid #e5e5e5;
    height: 50px;
    border-radius: 4px;
}
/* Padding, border and margin are REDUCED from the 'height'.*/
fieldset {
    width: 90%;
    max-width: 800px;
    border: 1px solid #ccc;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
    margin: 0 5px;
    font-size: 12px;
    font-weight: normal;
}

label {
    padding: 0 3px 0 5px;
    vertical-align: top;
}

.RadInput_Default input[type="text"] {
    height: 42px !important;
    padding: 8px !important;
    font-size: 16px !important;
    color: #000 !important;
    background-color: #fff !important;
    border: 1px solid #bbb !important;
    margin: 0 20px 0 0 !important;
}
/* Telerik in their wisdom set: box-sizing:border-box; so padding and margin etc do not alter the set size.*/

/* Give a HOVER effect to form elements */
input[type="text"]:hover, input[type="password"]:hover, textarea:hover, select:hover {
    border: 1px solid #9ac8cf;
}

input[type="checkbox"]:hover, input[type="radio"]:hover {
    cursor: pointer;
    color: #f60;
}

label:hover {
    cursor: pointer;
    color: #f60;
}

.RadInput_Default input[type="text"]:hover {
    border: 1px solid #333 !important;
}

.RadComboBox input[type="text"]:hover {
    border: none;
}

/* Change the appearance on FOCUS of a form element */
textarea:focus, input:focus, select:focus {
    outline: none;
    box-shadow: 0 0 10px 0px #ccc;
}

input[type="text"]:focus, textarea:focus {
    background-color: #f8fbfc;
}

input[type="button"]:focus {
    background-color: #f8fbfc;
}

.RadInput_Default input[type="text"]:focus {
    background-color: #f8fbfc !important;
}

.RadComboBox input:focus {
    background-color: #fff !important;
}

/* Stop above styling affecting rad combo box*/
.rcbInputCell input[type="text"]:hover {
    border: initial !important;
}

.rcbInputCell input[type="text"]:focus {
    background-color: initial !important;
    outline: initial !important;
    box-shadow: initial !important;
}

/* Change the appearance if the element is disabled */
textarea:disabled, input:disabled, select:disabled, submit:disabled {
    box-shadow: 0 0 8px 0px #fab9b9;
}

/* Form element standard widths. Note the 'calc' handling, to account for padding and bordres etc and ensure the contained form elements match exactly their set % width. */
textarea { /*width: calc(100% - 12px);*/
    width: 100%;
    max-width: 800px;
    height: 75px;
}
/* Assumed to ALWAYS be in a maxchar DIV */
input[type="text"] { /*width: calc(90% - 19px);*/
    width: 100%;
    max-width: 800px;
}

input[type="file"] {
    width: 100px !important;
}

select {
    width: 100%;
}

.FormWidthLong {
    width: 400px !important;
}

.FormWidthMedium {
    width: 200px !important;
}

.FormWidthShort {
    width: 100px !important;
}

.FormWidthTiny {
    width: 50px !important;
}

.FormTextAreaLarge1 {
    font-size: 12px;
    width: 90%;
    max-width: 1200px;
    height: 400px;
}

.FormTextAreaLarge2 {
    font-size: 12px;
    width: 90%;
    max-width: 1200px;
    height: 700px;
}

.FormTextAreaLarge3 {
    font-size: 12px;
    width: 90%;
    max-width: 1200px;
    height: 200px;
}

.FormTextAreaSmall1 {
    font-size: 12px;
    height: 60px;
}

.FormTextAreaCodeSnippet {
    font-size: 10px;
    background-color: #f4f4f4;
    color: #2d4285;
    height: 50px;
}

.FormTextAreaEmailPreview {
    width: 100%;
    max-width: 1200px;
    height: 700px;
    border: none;
}

.CheckboxMultiCol td {
    padding-right: 15px;
}

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Forms :: Containers */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

/* Wrap form elements and special sets of form elements to solves issues where the element is made up of multiple parts and/or comes from Telerik.  
This goes last as it often applies over-ride values
The standard width is calc(90% - 5px) to ensure no overlap. Some widths vary to suport contained elements with dodgy code, sch as: width:100%; border:1px solid #000; */

/* ItemFile control - applied at the central control level */
.FormContItemFile {
    width: calc(90% - 2px);
    max-width: 800px;
    border-collapse: collapse;
    border: 1px solid #ccc;
    background-color: #f6f9f9;
}

    .FormContItemFile caption {
        text-align: left;
        font-size: 14px;
        color: #4c6465;
        font-weight: bold;
        padding: 7px 5px 4px 20px;
        border-color: #ccc;
        border-style: solid;
        border-width: 1px 1px 0 1px;
        background-color: #efefef;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .FormContItemFile td {
        padding: 10px 20px;
    }
/*.FormContItemFile tr:first-of-type td	{padding:10px 3px 3px 3px;}*/

.FormContFileUp {
}

    .FormContFileUp input[type="text"] {
        width: 300px;
    }

    .FormContFileUp input[type="file"] {
        width: 65px !important;
    }

        .FormContFileUp input[type="file"]:hover {
            cursor: pointer;
        }
    /* Telerik overrides to get the presentation in line with streamSWEET standard */
    .FormContFileUp .ruFileWrap {
        height: 32px !important;
    }

    .FormContFileUp .ruFakeInput {
        height: 18px !important;
        padding: 5px !important;
        font-size: 14px !important;
        border: 2px solid #e5e5e5 !important;
    }

        .FormContFileUp .ruFakeInput:hover {
            border: 2px solid #4ba0a7 !important;
        }

    .FormContFileUp .ruButton {
        height: 32px !important;
        background-image: none !important;
        padding: 2px 10px !important;
        font-size: 12px !important;
        color: #fff !important;
        background-color: #2d6570 !important;
        border-radius: 16px !important;
    }

    .FormContFileUp .ruButtonHover {
        background-color: #3f8f4b !important;
    }

/* Over-ride default image handling for the Telerik tree view - apply to a containing DIV */
.FormContTree img {
    display: inline;
}

/* Remove expand/colaps icon (plus/minus) at top level node of a tree */
.RadTreeView > ul > li > div > span:nth-child(2) {
    display: none
}

/* Prev Next Links */
.NavTreePrevNext {
    width: 94%;
    margin: 10px auto;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
}

    .NavTreePrevNext span {
        padding: 4px 10px;
        border-radius: 8px;
        border: 1px solid #BABABA;
        margin: 4px 4px 8px;
    }

        .NavTreePrevNext span:hover {
            background-color: #fafafa;
            border: 1px solid #458cc7;
        }

/* Over-ride default form element settings for auto-complete search box - apply to a containing DIV */
.FormContAutoComplete {
    width: 202px !important;
    float: left;
    margin: 0 5px 0 0;
    height: 24px;
    border: 1px solid #ccc;
    color: #666 !important;
    background-color: #fff;
}

    .FormContAutoComplete .RadComboBox_Default .rcbInputCell, .FormContAutoComplete .RadComboBox_Default .rcbArrowCell {
        background-image: none !important;
        padding: 0 !important;
        border: none !important;
    }

    .FormContAutoComplete .RadComboBox input[type="text"] {
        height: 24px !important;
        font-size: 16px !important;
        line-height: 24px !important;
        border: 0 !important;
        padding: 0 0 0 5px !important;
    }

/* Handle issues created by the the JQuery that handles the MaxChar functionality on textareas - apply to a containing DIV */
.FormContTextAreaMaxChar {
    width: calc(90% - 5px);
    max-width: 800px;
    display: inline-block;
    margin: 0 5px 0 0;
}

.maxlength-feedback {
    font-size: 12px;
    color: #ccc;
}

/* Over-ride default table cell formatting for the Telerik HTML editor and apply a max width - apply to a containing DIV */
.FormContHtmlEdit { /*width: calc(90% - 2px);*/
    width: 100%;
    max-width: 800px;
    display: inline-block;
}

.FormContHtmlEditWide { /*width: calc(90% - 2px);*/
    width: 100%;
    max-width: 1000px;
    display: inline-block;
}

    .FormContHtmlEdit td, .FormContHtmlEditWide td {
        padding: 0 !important;
    }
    /* Wrap a Telerik Editor with a Div and apply this Class, otherwise inherited cellpadding causes the editor layout to mess up. */
    .FormContHtmlEdit textarea, .FormContHtmlEditWide textarea {
        border: none !important;
        max-width: none !important;
    }

/* Over-ride default settings for the Telerik Date Picker - apply to a containing DIV */
.FormContDate {
    padding: 0;
    display: inline-block;
    margin-right: 10px;
}

    .FormContDate > div, .FormContDate > div > table {
        width: 140px !important;
    }

    .FormContDate td > span > input:first-of-type {
        height: 32px !important; /*margin-top:-1px !important;*/
        padding: 5px !important;
    }

/* OContain radio button in a controlled manner */
.FormContRadioSet {
    max-width: 800px;
    display: inline-block;
}

    .FormContRadioSet td {
        padding: 0 10px 0 0;
    }

/* Special handling to make a nice 'QUICK search' that appears at the top right of the screen, typically within an admin module */
.ContQuickSearch {
    right: 30px;
    position: absolute;
    top: 88px;
    width: 250px;
}

    .ContQuickSearch input[type="text"] {
        margin: 0;
        display: block;
        float: left;
    }

/* Special handling to make a nice 'FILTER search' where multiple form elements sit on a single row */
.ContFilterSearch {
    overflow: hidden;
}

    .ContFilterSearch img, .ContFilterSearch input[type="text"], .ContFilterSearch input[type="password"], .ContFilterSearch select, .ContFilterSearch input[type="button"], .ContFilterSearch input[type="submit"], .ContFilterSearch span, .ContFilterSearch .FormContDate {
        display: block;
        float: left;
    }

/* Give nice layout of the form buttons that sit at the bottom of each form - apply to a containing DIV */
.ContFormSubmit {
    overflow: hidden;
    margin: 10px 0 20px 5px;
}

/*Special handling for 'Groups' where added data is requested after ticking a checkbox.  This 'slides' the textbox into view on the user ticking the related checkbox.  Note!  Assumes only 1 checkbox per GroupSet.*/
.GroupCheckboxList label {
    margin-left: 5px;
}

.GroupCheckboxList input[type="checkbox"], .GroupCheckboxList label, .GroupCheckboxList input[type="text"] {
    display: block;
    float: left;
}

.GroupCheckboxList input[type="text"] {
    margin: -3px 0 0 10px;
    visibility: hidden;
    width: 0;
    transition: width 1.0s;
    -webkit-transition: width 1.0s
}

.GroupCheckboxList input[type="checkbox"]:checked + input[type="text"] {
    visibility: visible;
    width: 150px;
}

.GroupCheckboxList input[type="checkbox"]:checked + label + input[type="text"] {
    visibility: visible;
    width: 150px;
}


/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Forms :: Buttons */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

/* Applied 'OnClick' event to disable the button from being double clicked */
submit:disabled {
    box-shadow: 0 0 8px 0px #fab9b9;
    background-color: #993300;
    cursor: progress;
}

.FormButtonSubmitted {
    background-color: #993300;
    cursor: progress;
}

/* Full size buttons */
.BtnAdd, .BtnUpdate, .BtnDelete, .BtnCancel, .BtnSearch, .BtnUpload, .BtnSubmit, .BtnClone, .BtnImport, .BtnArchive, .BtnGo, .BtnContinue, .BtnUpdateQty, .BtnUnlock, .BtnActivate, .BtnResendActivateEmail, .BtnSynch, .BtnPreview, .BtnReportShow, .BtnReportExport, .BtnSchedule, .BtnSend, .BtnSendTest, .BtnSendStop, .BtnClearUnsent, .BtnConfirm, .BtnBack, .BtnSelect, .BtnAssign, .BtnClose, .BtnCheck, .BtnSet, .BtnInvite, .BtnRemind, .BtnClear, .BtnCloseOff, .BtnRecalculate, .BtnValidate, .BtnRestore, .BtnYes, .BtnNo, .BtnEdit, .BtnLogin {
    margin: 0 5px 0 0;
    padding: 12px 32px;
    font-size: 18px;
    color: #fff;
    border: 0;
    background-color: #2d6570;
    cursor: pointer;
    border-radius: 4px;
}

    .BtnAdd:hover, .BtnYes:hover {
        background-color: #3f8f4b;
    }

    .BtnDelete:hover, .BtnNo:hover {
        background-color: #8f3f43;
    }

    .BtnUpdate:hover, .BtnCancel:hover, .BtnSearch:hover, .BtnUpload:hover, .BtnSubmit:hover, .BtnClone:hover, .BtnImport:hover, .BtnArchive:hover, .BtnGo:hover, .BtnContinue:hover, .BtnUpdateQty:hover, .BtnUnlock:hover, .BtnActivate:hover, .BtnResendActivateEmail:hover, .BtnSynch:hover, .BtnPreview:hover, .BtnReportShow:hover, .BtnReportExport:hover, .BtnSchedule:hover, .BtnSend:hover, .BtnSendTest:hover, .BtnSendStop:hover, .BtnClearUnsent:hover, .BtnConfirm:hover, .BtnBack:hover, .BtnSelect:hover, .BtnAssign:hover, .BtnClose:hover, .BtnCheck:hover, .BtnSet:hover, .BtnInvite:hover, .BtnRemind:hover, .BtnClear:hover, .BtnCloseOff:hover, .BtnRecalculate:hover, .BtnValidate:hover, .BtnRestore:hover, .BtnEdit:hover, .BtnLogin:hover {
        background-color: #bbd9de;
        color: #2d6570;
    }

    .BtnAdd:focus, .BtnYes:focus {
        background-color: #3f8f4b;
    }

    .BtnDelete:focus, .BtnNo:focus {
        background-color: #8f3f43;
    }

    .BtnUpdate:focus, .BtnCancel:focus, .BtnSearch:focus, .BtnUpload:focus, .BtnSubmit:focus, .BtnClone:focus, .BtnImport:focus, .BtnArchive:focus, .BtnGo:focus, .BtnContinue:focus, .BtnUpdateQty:focus, .BtnUnlock:focus, .BtnActivate:focus, .BtnResendActivateEmail:focus, .BtnSynch:focus, .BtnPreview:focus, .BtnReportShow:focus, .BtnReportExport:focus, .BtnSchedule:focus, .BtnSend:focus, .BtnSendTest:focus, .BtnSendStop:focus, .BtnClearUnsent:focus, .BtnConfirm:focus, .BtnBack:focus, .BtnSelect:focus, .BtnAssign:focus, .BtnClose:focus, .BtnCheck:focus, .BtnSet:focus, .BtnInvite:focus, .BtnRemind:focus, .BtnClear:focus, .BtnCloseOff:focus, .BtnRecalculate:focus, .BtnValidate:focus, .BtnRestore:focus, .BtnEdit:focus, .BtnLogin:focus {
        background-color: #bbd9de;
    }

/* Small buttons (short to fit normal line height) */
.BtnSmlAdd, .BtnSmlUpdate, .BtnSmlSearch, .BtnSmlContinue, .BtnSmlSendTest, .BtnSmlReportShow, .BtnSmlSelect, .BtnSmlClear, .BtnSmlAssign, .BtnSmlGo, .BtnSmlYes, .BtnSmlNo {
    margin: 0 5px 0 0;
    padding: 1px 15px 3px 15px;
    border: 0;
    height: 24px;
    font-size: 12px;
    color: #fff;
    background-color: #2d6570;
    cursor: pointer;
    border-radius: 3px;
}

    .BtnSmlAdd:hover, .BtnSmlYes:hover {
        background-color: #3f8f4b;
    }

    .BtnSmlNo:hover {
        background-color: #8f3f43;
    }

    .BtnSmlUpdate:hover, .BtnSmlSearch:hover, .BtnSmlContinue:hover, .BtnSmlSendTest:hover, .BtnSmlReportShow:hover, .BtnSmlSelect:hover, .BtnSmlClear:hover, .BtnSmlAssign:hover, .BtnSmlGo:hover {
        background-color: #000;
    }

    .BtnSmlAdd:focus, .BtnSmlYes:focus {
        background-color: #3f8f4b;
    }

    .BtnSmlNo:focus {
        background-color: #8f3f43;
    }

    .BtnSmlUpdate:focus, .BtnSmlSearch:focus, .BtnSmlContinue:focus, .BtnSmlSendTest:focus, .BtnSmlReportShow:focus, .BtnSmlSelect:focus, .BtnSmlClear:focus, .BtnSmlAssign:focus, .BtnSmlGo:focus {
        background-color: #bbd9de;
    }

/* custom button for the generic search at the top right of the screen */
.BtnSmlGoSearch {
    margin: 0 0 0 -7px;
    padding: 1px 5px 3px 5px;
    border: 0;
    height: 26px;
    font-size: 12px;
    color: #fff;
    background-color: #584b7a;
    background-image: linear-gradient(0deg, #584b7a, #bab3c9 90%);
    cursor: pointer;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

    .BtnSmlGoSearch:hover {
        background-color: #bbd9de;
    }

    .BtnSmlGoSearch:focus {
        background-color: #bbd9de;
    }

/* Generic - create a new item button */
.BtnAddNew {
    background-color: transparent;
    margin: 0;
    padding: 0 10px 0 8px;
    font-size: 12px;
    height: 100%;
    border: none;
    cursor: pointer;
    color: #222;
    font-weight: normal;
    float: right;
    border: 1px solid transparent;
}

    .BtnAddNew:hover, .BtnAddNew:focus {
        background-color: #b9faca;
        text-decoration: none;
        color: #222;
        border: 1px solid #57bd71;
    }

/* Make a button that looks like Text that then looks like a button on hover */
.BtnText {
    color: #333;
    font-size: 100%;
    border: 1px solid transparent;
    padding: 5px 10px;
    background-color: transparent;
    cursor: pointer;
    border-radius: 4px;
}

    .BtnText:hover, .BtnText:focus {
        border: 1px solid #333;
        background-color: #fff !important;
    }
/* Update Shopping Cart Qty - make it  more obvious */
.BtnTextShow {
    border: 1px solid #191e92;
    color: #fff;
    background-color: #191e92;
    animation-name: UpdateCartQty;
    animation-duration: 2s;
    animation-iteration-count: 20;
    -webkit-animation-name: UpdateCartQty;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 20;
}

    .BtnTextShow:hover, .BtnTextShow:focus {
        color: #90c6fc;
    }

/* SHOPPING BASKET */
.ImgBtnBacketQtyUpdate
.ImgBtnBacketQtyUpdateAlert {
    border: 1px solid #f00;
    background-color: #f3f3f3;
}

.ImgBtnBacketQtyUpdate:hover, .ImgBtnBacketQtyUpdate:focus {
    color: #522e91;
    border: 1px solid #999;
    background-color: #ddd;
}

/* A HREF Buttons
===================== */

.ButtonOrangeLge {
    background-color: #ff9c2b;
    text-align: center;
    padding: 4px 20px 4px 20px;
    margin: 10px 6px 10px 6px;
    border-radius: 4px;
    font-size: 16px;
    white-space: nowrap;
    transition: all .2s ease;
}

a.ButtonOrangeLge:link, a.ButtonOrangeLge:visited {
    color: #fff;
    text-decoration: none;
}

a.ButtonOrangeLge:hover, a.ButtonOrangeLge:active {
    background-color: #ffae52;
}

.ButtonA {
    background-color: #e9e9e9;
    text-align: center;
    padding: 3px 15px 3px 15px;
    margin: 0 6px;
    border-radius: 3px;
    transition: all .2s ease;
}

a.ButtonA:link, a.ButtonA:visited {
    color: #393b4a;
    text-decoration: none;
}

a.ButtonA:hover, a.ButtonA:active {
    color: #7a7a7a;
    background-color: #d7d7d7;
    text-decoration: none;
}

.ButtonHomeLarge {
    background-color: #fff;
    text-align: center;
    padding: 14px 30px 14px 30px;
    margin: 0 6px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    transition: all .2s ease;
}

a.ButtonHomeLarge:link, a.ButtonHomeLarge:visited {
    color: #00a2a9;
    text-decoration: none;
}

a.ButtonHomeLarge:hover, a.ButtonHomeLarge:active {
    color: #ff9c2b;
    background-color: #fff;
    text-decoration: none;
    transform: translateY(-2px) !important;
}

/* Button Base */
/* New direction for standardising buttons */
.BtnBase {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .BtnBase a {
        display: block;
    }

.BtnLarge {
    font-size: 1.3rem;
    padding: 0.5rem 1.3rem;
}

/* Image Buttons
===================== */
/* EVENT */
/* IC:these were created/scheduled for conversion while ago, and finally put to use now. I got them updated with correct sizes and new path (/cpd/) */
.ImgBtnEventAdd {
    width: 165px;
    height: 42px;
    background: url(/assets/images/cpd/button_add_event.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnEventRemove {
    width: 165px;
    height: 42px;
    background: url(/assets/images/cpd/button_remove_event.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnEventFind {
    width: 67px;
    height: 33px;
    background: url(/assets/images/cpd/button_find_events.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnReportFind {
    width: 133px;
    height: 33px;
    background: url(/assets/images/cpd/button_find_report.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnEventBook {
    width: 125px;
    height: 33px;
    background: url(/assets/images/button_booknow.svg) no-repeat 0px 0px;
    margin: 10px 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

    .ImgBtnEventBook:hover {
        opacity: .8;
    }

.ImgBtnEventBookLge {
    width: 193px;
    height: 51px;
    background: url(/assets/images/button_booknow_lge.svg) no-repeat 0px 0px;
    margin: 20px 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

    .ImgBtnEventBookLge:hover {
        opacity: .8;
    }

/* EVENT MULTIPLE LOCATIONS */
.EventGridTable {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 30px;
    background-color: #f6f7f5;
}

    .EventGridTable th {
        background-color: #666;
        color: #fff;
        font-size: 12px;
        line-height: 15px;
        padding: 6px 5px;
    }

    .EventGridTable td {
        color: #000;
        font-size: 11px;
        font-size: 13px;
        padding: 3px;
        border-bottom: 1px solid #cfcfcf;
    }

/* RUGBY SEARCH */
.ImgBtnSearchGo {
    width: 33px;
    height: 35px;
    background: url(/assets/images/button_search_go.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnSearchGoLarge {
    width: 36px;
    height: 28px;
    background: url(/assets/images/button_go_lge.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

/* FEEDBACK BUTTONS */
.ImgBtnFeedbackSubmit {
    width: 186px;
    height: 38px;
    background: url(/assets/images/button_submit_feedback.svg) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnFeedbackIconPlus {
    width: 24px;
    height: 24px;
    background: url(/assets/images/icon_plus_feedback.svg) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

    .ImgBtnFeedbackIconPlus:hover {
        background: url(/assets/images/icon_plus_feedback_on.svg) no-repeat 0px 0px;
    }

.ImgBtnFeedbackIconPicture {
    width: 24px;
    height: 24px;
    background: url(/assets/images/icon_picture_feedback.svg) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

    .ImgBtnFeedbackIconPicture:hover {
        background: url(/assets/images/icon_picture_feedback_on.svg) no-repeat 0px 0px;
    }

/* CHECKOUT */
.BacktoCheckoutLink {
    background-color: #069;
    color: #fff;
    padding: 8px 20px;
    text-align: center;
    font-size: 12px;
    border-radius: 4px;
}

a.BacktoCheckoutLink:link, a.BacktoCheckoutLink:visited {
    color: #fff;
    text-decoration: none;
    display: block;
}

a.BacktoCheckoutLink:hover, a.BacktoCheckoutLink:active {
    color: #fff;
    text-decoration: none;
    background-color: #333;
    pointer: cursor;
}

/* MISC BUTTONS */
.ImgBtnSubmit {
    width: 101px;
    height: 29px;
    background: url(/assets/images/button_submit.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

    .ImgBtnSubmit:hover {
        opacity: .8;
    }

.ImgButtonCloseBox {
    width: 101px;
    height: 31px;
    background: url(/assets/images/button_closebox.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnFind {
    width: 66px;
    height: 24px;
    background: url(/assets/images/button_find.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnTop {
    width: 72px;
    height: 104px;
    background: url(/assets/images/button_top.svg)no-repeat 0px 0px;
    margin: 20px 0 20px 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-size: 10px;
}

    .ImgBtnTop a:link {
        text-decoration: none;
        display: block;
        width: 72px;
        height: 104px;
        margin: 0;
    }

    .ImgBtnTop:hover {
        background: url(/assets/images/button_top_on.svg) no-repeat 0px 0px;
        transition: all 0.9s ease;
    }

.IconButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background-color: #eaeaea;
    padding: 8px 16px 8px 8px;
}

    .IconButton:hover {
        cursor: pointer;
    }

/* IC:these are new classes, out of full ImageButton conversion */
.ImgBtnCPDPdfDownload {
    width: 186px;
    height: 68px;
    background: url(/assets/images/icon_download_report_pdf.svg) no-repeat 0px 0px;
    margin: 0 auto;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

    .ImgBtnCPDPdfDownload:hover {
        width: 186px;
        height: 68px;
        background: url(/assets/images/icon_download_report_pdf_on.svg) no-repeat 0px 0px;
        margin: 0 auto;
        padding: 0;
        border: none;
        background-color: transparent;
        cursor: pointer;
        display: inline-block;
        transition: all 0.2s ease;
    }

.ImgBtnCPDAddNew {
    width: 48px;
    height: 18px;
    background: url(/assets/images/CPD/button_addnew.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnLoginFeature {
    width: 101px;
    height: 29px;
    background: url(/assets/images/button_login.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

/* A special link on the logged in user membership pages for a user to link through to the cancel tab */
.btn-cancel-membership {
    padding: 20px 40px 10px 0;
    text-align: right;
}


/* ======================================================================================== */
/* ======================================================================================== */
/* Modules - Shared */
/* ======================================================================================== */
/* ======================================================================================== */

/* Home Feature Controls
===================== */
.NewsHomeFeatureHead {
    padding: 5px;
    background-color: #ccc;
}
/* usercontrol\front\homepage\News.ascx */
.EventsHomeFeatureHead {
    padding: 5px;
    background-color: #ccc;
}
/* usercontrol\front\homepage\Events.ascx */
.CaseStudyFeatureHead {
    padding: 5px;
    background-color: #ccc;
}
/* usercontrol\front\homepage\CaseStudy.ascx */
.HomeEvents {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.HomeCaseStudy {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.FriendsPanel {
    padding: 2px;
}

.FriendsPanelHeader {
    padding: 3px 5px;
    background-color: #e6e6e6;
    font-size: 11px;
}

/* Homepage Hero */
.HeroPosition {
    margin: 0 auto;
}

/* HERO - STATIC 
===================== */
.HeroPanel {
    width: 60%;
    margin: 100px auto;
    color: #fdfdfd; /*background-color:rgba(40, 40, 40, 0.8);*/
    padding: 1rem 2rem;
    position: relative;
}

    .HeroPanel h3 {
        color: #fff;
    }

/* Homepage Main Button */
.HeroStaticButton {
    background-color: #00a2a9;
    position: relative;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    margin: 30px auto 20px auto;
    text-align: center;
    display: block;
    width: 180px;
    transition: all .2s ease;
}

    .HeroStaticButton a:link, .HeroStaticButton a:visited {
        text-decoration: none !important;
        color: #fff;
        display: block;
        padding: 14px 30px;
    }

    .HeroStaticButton:hover {
        text-decoration: none !important;
        background-color: #ff9c2b;
        transform: translateY(-2px);
    }

    .HeroStaticButton:active {
        background-image: none;
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25);
    }

/* Homepage Secondary Button */
.HeroStaticButtonAlt {
    background: linear-gradient(90deg, rgba(252,243,189,1) 27%, rgba(245,217,48,1) 93%);
    position: relative;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    font-weight: 300;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    margin: 10px auto;
}

    .HeroStaticButtonAlt a:link, .HeroStaticButtonAlt a:visited {
        text-decoration: none !important;
        color: #005058 !important;
    }

    .HeroStaticButtonAlt a:hover {
        text-decoration: none !important;
        color: #005058;
    }

    .HeroStaticButtonAlt a:active {
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25);
    }

/* Citation */
.HomepageHeroStatic_Citation_Outer {
    max-width: 100%;
}

.HomepageHeroStatic_Citation {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    line-height: 1.4;
    opacity: 0.6;
}

    .HomepageHeroStatic_Citation i {
        font-family: Material Icons;
        font-size: 1em;
        font-style: normal;
        vertical-align: middle;
    }

        .HomepageHeroStatic_Citation i::before {
            content: "\E88F"
        }

    .HomepageHeroStatic_Citation span {
        font-size: 12px;
        font-style: italic;
        color: #fff;
        text-decoration: none;
    }

    .HomepageHeroStatic_Citation a {
        font-size: 12px;
        font-style: italic;
        color: #fff;
        text-decoration: none;
    }

        .HomepageHeroStatic_Citation a:hover {
            text-decoration: underline !important;
        }
/* Background Image */
.HeroImageStatic {
    min-height: 300px;
    margin-top: 0;
    background-repeat: no-repeat;
    background-size: cover; /*contain;*/
    background-position: 50% 50%;
    overflow: hidden; /*background-attachment:fixed;*/
}

    .HeroImageStatic h1 {
        font-weight: 700;
        line-height: 1.6;
        font-size: 2.4em;
        margin: 0.5em 0;
        color: #fff;
    }

    .HeroImageStatic h2 {
        font-weight: 700;
        color: #fff;
        text-align: center;
        text-shadow: 4px 4px 8px #000000;
    }

    .HeroImageStatic h3 {
        color: #fff;
        text-align: center;
        text-shadow: 4px 4px 8px #000000;
    }

    .HeroImageStatic hr {
        border-color: #bdbebf;
        margin: 20px 0;
    }

/* Product Listings 
===================== */
/*** THIS BLOCK OF CSS NEEDS TO BE FULLY REWORKED - IT WAS COPIED WITHOUT THOUGHT IS IS WAY, WAY, WAY OVER COMPLICATED FOR WHAT IT DOES ***/
.TableHeadProductList {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #666;
    padding: 3px 3px 3px 6px;
    text-align: left;
}

#ProductList, #ProductList ul, .ProductList, .ProductList ul {
    list-style: none;
    line-height: 14px;
    padding: 0;
    margin: 0;
    background-color: #e5e5e5;
}

    #ProductList .sel, .ProductList .sel {
        background-color: #fff;
        background-image: url(/assets/images/arrow_prod_toplevel_on.gif);
    }

    #ProductList a, .ProductList a {
        font-weight: normal;
        display: block;
        text-decoration: none;
        color: #000;
    }

    #ProductList li, .ProductList li {
        margin: 0;
        padding: 0;
        background: url(/assets/images/arrow_prod_toplevel.gif) 3px 6px no-repeat;
        list-style: none;
        border-bottom: 1px solid #f7f7f7;
    }

        #ProductList li a, .ProductList li a {
            width: 146px;
            width: 126px;
            padding: 4px 5px 3px 15px;
            background: url(/assets/images/arrow_prod_toplevel.gif) 3px 6px no-repeat;
            color: #878c9c;
        }

        #ProductList li ul, .ProductList li ul {
            border-width: 0;
        }

        #ProductList li li .sel, .ProductList li li .sel {
            background-color: #fff;
            color: #c00;
            background-image: url(/assets/images/arrow_prod_level2_on.gif);
        }

        #ProductList li li, .ProductList li li {
            margin: 0;
            padding: 0;
            background: url(/assets/images/arrow_prod_level2.gif) 10px 6px no-repeat;
            background-color: #f7f7f7;
            border-bottom: 1px solid #fff;
        }

            #ProductList li li a:hover, .ProductList li li a:hover {
                color: #c00;
                background-image: url(/assets/images/arrow_prod_level2_on.gif);
            }

            #ProductList li li a, .ProductList li li a {
                width: 146px;
                width: 116px;
                padding: 4px 5px 3px 25px;
                background: url(/assets/images/arrow_prod_level2.gif) 10px 6px no-repeat;
            }

    #ProductList a:hover, .ProductList a:hover {
        color: #c00;
        background-image: url(/assets/images/arrow_prod_toplevel_on.gif);
    }

.ProductVariationTable {
    width: 100%;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
}

    .ProductVariationTable th {
        padding: 3px 2px;
        font-size: 11px;
        background-color: #fafafa;
    }

    .ProductVariationTable td {
        padding: 3px 2px;
        font-size: 11px;
    }

.ProductHeader {
    border-radius: 4px;
    color: #fff;
    text-align: center;
    padding: 16px 0;
    background-color: #425d91;
    font-size: 18px;
    line-height: 20px;
    font-weight: 400;
    margin: 20px auto;
}

    .ProductHeader h3 {
        margin: 0;
        color: #fff;
    }

/* Image Album 
===================== */
.AlbumImagePopup {
    background-color: #fff;
    border-collapse: collapse;
    margin: 0px;
    padding: 0px;
    width: 955px;
}

.AlbumImagePopupCellHeader {
    vertical-align: top;
    font-size: 12px;
    height: 40px;
    background-image: url(/assets/images/tile_stripe.jpg);
    background-repeat: repeat-x;
    color: #fff;
    font-weight: bold;
}

.AlbumImagePopupCellImage {
    vertical-align: middle;
    text-align: center;
    padding: 0px 5px 5px 5px;
    width: 740px;
}

.AlbumImagePopupCellThumbs {
    vertical-align: top;
    text-align: left;
    width: 225px;
}

.AlbumImageScrollerMainImage {
    width: 100%;
    text-align: left;
    padding: 10px;
}

.AlbumImageScrollerThumbnails {
    width: 100%;
}

.AlbumImageLargeImage {
    width: 700px;
    height: 100%;
}

.AlbumImageThumbnailImageBorder {
    margin: 0px 5px 5px 0px;
    width: 90px;
    height: 90px;
}

    .AlbumImageThumbnailImageBorder td {
        border: 1px solid #ccc;
    }

        .AlbumImageThumbnailImageBorder td:hover, .AlbumImageThumbnailImageBorder .AlbumImageThumbnailSelected {
            border: 2px solid #f60;
        }

    .AlbumImageThumbnailImageBorder img {
        padding-top: 3px;
        margin-left: auto;
        margin-right: auto;
    }

.AlbumImageFileDescriptionBox {
    display: none;
    position: absolute;
    margin: 0px;
    padding: 0px;
    float: left;
    border: 1px solid #ccc;
    background-color: #ddd;
    text-align: left;
    width: 400px;
}

    .AlbumImageFileDescriptionBox p {
        padding: 5px;
        margin: 0px;
    }

/* Image Rotator 
===================== */
.RotatorImageList {
    margin-left: auto;
    margin-right: auto;
}

.AlbumImageRotatorImageBorder {
    margin: 0px 5px 5px 0px;
    width: 90px;
    height: 78px;
}

    .AlbumImageRotatorImageBorder td {
        border: 1px solid #ccc;
    }

        .AlbumImageRotatorImageBorder td:hover {
            border: 2px solid #f60;
        }

    .AlbumImageRotatorImageBorder img {
        padding-top: 3px;
    }

.RadRotator li {
    list-style: none;
}

/* Comments 
===================== */
.CommentHeader {
    border-bottom: 3px solid #666;
    color: #000;
    font-weight: bold;
    padding: 6px 0;
}

.CommentAvatar, .CommentAvatarAlt {
    border-bottom: 1px solid #808080;
    padding: 5px;
}

.CommentText, .CommentTextAlt {
    background-color: #fff;
    border-bottom: 1px solid #808080;
    color: #000;
    font-size: 12px;
    padding: 10px 5px 8px;
}

.CommentItemNumber {
    color: #333;
    font-size: 12px;
}

.CommentTextUserName {
    color: #333;
    font-size: 12px;
    font-weight: bold;
}

.CommentTextDate {
    color: #999;
    font-size: 11px;
}

.CommentTextTime {
    color: #999;
    font-size: 11px;
}

/* Ratings 
===================== */
.filledRatingStar {
    background-image: url(/assets/images/FilledStar.png);
}

.ratingStar {
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 12px;
    margin: 0;
    padding: 0;
    width: 13px;
}

.emptyRatingStar {
    background-image: url(/assets/images/EmptyStar.png);
}

.savedRatingStar {
    background-image: url(/assets/images/SavedStar.png);
}

/* Feedback 
===================== */
.FeedbackTable {
    width: 850px;
}

.feedbackPosition {
    position: fixed;
    bottom: 40px;
    right: 0px;
}

.FeedbackMenu {
    padding: 20px 0 0 0;
}

    .FeedbackMenu img {
        margin: 5px 0;
    }

.FeedbackSlider {
    width: 400px;
}

    .FeedbackSlider td {
        padding: 12px 0;
    }

/* Shop - Shared 
===================== */
.PriceText {
    Color: #333;
    font-size: 16px;
    font-weight: bold;
}

.PriceTextHasOnSale {
    Color: #333;
    font-size: 14px;
    text-decoration: line-through;
}

.PriceTextOnSale {
    Color: #333;
    font-size: 16px;
    font-weight: bold;
}

.PriceGroup {
    color: #999;
    font-size: 12px;
    font-style: italic;
    padding-left: 6px;
}

/* Search Form */
.SearchProductsBtn {
    height: 68px;
    width: 23%;
    float: left;
    background: url(/assets/images/btn_search_products.jpg) top center no-repeat;
    margin: 0 !important;
    padding: 0;
    border-bottom-right-radius: 1em;
    border-top-right-radius: 1em;
    border: 1px solid #97060f;
}

    .SearchProductsBtn:hover {
        opacity: .8;
    }

.SearchProductsTextBox {
    float: left;
    width: 72%;
    background-color: #fff;
    padding: 0;
    font-size: 20px;
    line-height: normal;
    color: #666 !important;
    height: 66px;
    border-left: 1px solid #333;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    border-right: 1px solid #97060f;
}

/*----------------------------------------------*/
/* Grid Layout -  Responsive Columns */

/* ----Generic handling----*/

/* Make the active area the same size as the contained DIV */
.PanelItemGrid {
    padding: 0 5px;
}

    .PanelItemGrid > article {
        float: left;
        position: relative;
        background-color: #fff;
    }

        .PanelItemGrid > article > a {
            display: block;
            text-decoration: none;
        }

            /* Set the primary content container, including a visual border and hover effect for the panel */
            .PanelItemGrid > article > a > div {
                border: 1px solid #eeeeee;
                overflow: hidden;
            }

                .PanelItemGrid > article > a > div:hover {
                    box-shadow: 0 0 15px 1px #e3e3e3;
                }

                /* Manage design of each ELEMENT within the panel */
                .PanelItemGrid > article > a > div > div {
                    width: 90%;
                    margin: 15px auto;
                    text-align: center;
                }

                    .PanelItemGrid > article > a > div > div > img {
                        max-height: 180px;
                        margin: 5px auto;
                        z-index: 50;
                        transition: transform 1s;
                        border: 0;
                    }

                .PanelItemGrid > article > a > div:hover > div > img {
                    transform: scale(0.9,0.9);
                }

                .PanelItemGrid > article > a > div > div h2 {
                    font-size: 18px !important;
                    line-height: 22px;
                    color: #4ccdd9;
                    margin: 20px 0 5px 0;
                }

                .PanelItemGrid > article > a > div > div p {
                    font-size: 14px !important;
                    line-height: 18px;
                    color: #333;
                    margin: 0;
                }

                    .PanelItemGrid > article > a > div > div p:hover {
                        cursor: pointer;
                    }

    /* Layer in special markers such as 'NEW' */
    .PanelItemGrid aside:nth-of-type(1) {
        position: absolute;
        z-index: 150;
        top: 10px;
        left: 0;
    }

    /* Layer in ADD TO BASKET button */
    .PanelItemGrid aside:nth-of-type(2) {
        position: absolute;
        z-index: 150;
        bottom: 10px;
        left: 0;
        right: 0;
    }

        .PanelItemGrid aside:nth-of-type(2) a {
            display: block;
            width: calc(90% - 16px);
            margin: 0 auto;
            text-align: center;
            padding: 8px 5px;
            border: 3px solid #fff;
        }

/* ----Case handling----*/

/* Downloads - 3 columns */
.PanelItemGrid3ColDownloads > article {
    width: 31%;
    min-width: 180px;
    margin: 0 1% 14px 1%;
}

    .PanelItemGrid3ColDownloads > article > a > div {
        height: 380px;
    }

/* Video - 3 columns */
.PanelItemGrid3ColVideo > article {
    width: 31%;
    min-width: 300px;
    margin: 0 1% 14px 1%;
}

    .PanelItemGrid3ColVideo > article > a > div {
        height: 350px;
    }

/* Generic - 4 columns */
.PanelItemGrid4Col > article {
    width: 23%;
    min-width: 130px;
    margin: 5px 1% 20px 1%;
}

    .PanelItemGrid4Col > article > a > div {
        height: 300px;
    }

/* Products Categories - 4 columns */
.PanelItemGrid4ColProds > article {
    width: 23%;
    min-width: 220px;
    margin: 5px 1% 20px 1%;
}

    .PanelItemGrid4ColProds > article > a > div {
        height: 380px;
    }

/* Image Gallery - 4 columns */
.PanelItemGrid4ColImages {
    margin-top: 20px;
}

    .PanelItemGrid4ColImages > article {
        width: 23%;
        min-width: 200px;
        margin: 5px 1% 20px 1%;
    }

        .PanelItemGrid4ColImages > article > a > div {
            height: 180px;
            padding: 0;
            border: 1px solid #e1e1e1;
            box-shadow: none;
            background-color: #fcfcfc;
        }

            .PanelItemGrid4ColImages > article > a > div:hover {
                border: 1px solid #b7b7b7;
                box-shadow: none;
            }

            .PanelItemGrid4ColImages > article > a > div > img {
                margin: 0 auto;
                height: 100%;
                width: auto;
                max-width: 480px;
            }

        .PanelItemGrid4ColImages > article .ImgInfo {
            z-index: 51;
            overflow: hidden;
            background-color: #2b2b2b;
            color: #fff;
            opacity: 0.9;
            position: absolute;
            top: 40px;
            height: 0;
            width: 100%;
            -webkit-transition: -webkit-transform 0s, height 0.7s;
            transition: transform 0s, height 0.7s;
        }

        .PanelItemGrid4ColImages > article:hover .ImgInfo {
            transform: translate(0,0);
            -webkit-transform: translate(0,0);
            height: 110px;
            border-bottom: 2px solid #eee;
        }

    .PanelItemGrid4ColImages .ImgTitle {
        font-size: 13px;
        line-height: 15px;
        text-align: center;
        margin-top: 10px;
        font-weight: bold;
    }

    .PanelItemGrid4ColImages .ImgDesc {
        text-align: center;
        padding: 5px 10px 0px 10px;
        font-size: 12px;
        line-height: 14px;
    }

    .PanelItemGrid4ColImages .ImgRelatedProducts {
        text-align: left;
        padding: 5px 0px 0px 5px;
        font-size: 12px;
        line-height: 14px;
    }


/* Login Dashboard - usercontrol\front\customer\cust_login_dashboard.ascx
===================== */
.LoginField {
    padding: 3px;
    width: 120px;
    background-color: #f4f4f4;
    border: 2px solid #069;
}

.ProfileBoxTable {
    width: 160px;
    border: 0;
    color: #666;
    font-size: 11px;
}

.ProfileInnerTable {
    width: 130px;
    margin-left: auto;
    margin-right: auto;
    border: 0;
}

.ProfileBoxTile {
    background-image: url(/assets/images/profile_box_tile.gif);
    background-repeat: repeat-y;
    background-color: #fff;
    padding-left: 4px;
    padding-right: 3px;
}

.ProfileCountColumn {
    color: #666;
    font-size: 10px;
    text-align: right;
    padding-right: 3px;
}

.ProfileIcon {
    padding: 4px 8px 4px 8px;
    text-align: center;
}

.LoginPanelProfile {
    z-index: 1000;
    position: absolute;
    right: 10px;
    top: 35px;
    background-color: #fff;
    width: 250px;
}

    .LoginPanelProfile a:link, .LoginPanelProfile a:visited {
        color: #69646c;
    }

    .LoginPanelProfile a:hover, .LoginPanelProfile a:active {
        color: #ff8c0a;
    }

.LoginPanelProfileHeader {
    color: #fff;
    background-color: #384f7b;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: bold;
}

.LoginPanelProfileSelect {
    font-size: 12px;
    padding: 3px 10px;
}

.LoginPanelCancel {
    background-color: #ccc;
    font-size: 11px;
    text-align: center;
    padding: 2px 8px;
    margin: 0 10px 6px 0;
}

a.LoginPanelCancel:link, a.LoginPanelCancel:visited {
    text-decoration: none;
}

a.LoginPanelCancel:hover, a.LoginPanelCancel:active {
    color: #fff;
    background-color: #06c;
}

/* Dashboard */
.DashboardProfileBox {
    width: 95%;
    margin: 30px 0 30px 0;
    border: 1px solid #d9d9d9;
    font-size: 14px;
    padding: 2px 10px 10px 20px; /*background-color:#f5f5f5;*/
}

    .DashboardProfileBox h2 {
        margin: 10px 0;
    }

    .DashboardProfileBox h3 {
        margin: 10px 0;
    }

.DashboardAvatar {
    float: left;
    width: 50px;
    height: 50px;
}

    .DashboardAvatar img {
        border: 1px solid #e1e1e1;
        margin: 4px auto;
        border-radius: 50%;
    }

.DashboardProfileName {
    font-size: 14px;
    font-weight: normal;
    color: #000;
    float: left;
    padding-top: 16px;
    position: relative;
    left: 18px;
}

.DashboardButtonRow {
    padding: 26px 0;
}

.DashboardCompanyInfo {
    width: 95%;
    margin: 30px 0 30px 0;
    border: 1px solid #d9d9d9;
    font-size: 14px;
    padding: 2px 10px 10px 20px; /*background-color:#f5f5f5;*/
}

.DashboardTable {
    width: 100%;
    margin: 50px auto;
    background-color: #fafafa;
}

    .DashboardTable th {
        padding: 12px 10px;
        color: #384f7b;
        background-color: #eee;
    }

    .DashboardTable td {
        padding: 5px 10px;
        color: #000;
        border-bottom: 1px solid #e6e6e6;
    }

.DashboardTableSub {
    background-color: #DEDEDE !important;
}

.DashboardShell {
    width: 94%;
}
/* Nice spacing to separate graphs from main dashboard content */

.DashCard {
    border-radius: 20px;
    margin: 0 6px;
    background-color: #eff4f4;
    padding: 18px 25px;
    min-height: 220px;
}

    .DashCard h4 {
        font-size: 18px;
        color: #2d6570;
    }

    .DashCard p {
        font-size: 12px;
        line-height: 14px;
        color: #2d6570;
    }

    .DashCard:hover {
        background-color: #faf2ce;
    }

.DashGraph {
    padding: 10px 0 20px 0;
    border: 1px solid #dbeaec;
    margin: 20px 0px 10px 0;
    text-align: center;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

.DashGraphPDHoursHeading {
    display: block;
    padding: 10px 0px 0px 0px;
    font-size: 11px;
}

.DashGraphPDHours {
    color: #f0a047;
    font-size: 26px;
    padding: 5px 0px 20px 1px;
    display: block;
}

.DashGraphPDHoursLine {
    width: calc(100% - 20px);
    border-top: 1px solid #dbeaec;
    margin: 0px auto;
}

.DashGraphPDHoursPoint {
    width: 24px;
    height: 24px;
    background-color: #f0a047;
    display: block;
    border-radius: 20px;
    position: relative;
    top: -12px; /*left: calc(100% - 20px);*/
}

.DashGraphPDHoursCycle {
    font-size: 11px;
    display: inline;
    float: left;
    padding-left: 20px;
}

.DashGraphPDHoursCycleGoal {
    font-size: 11px;
    display: inline;
    float: right;
    padding-right: 20px;
}

.DashGraphPDHoursEditGoal {
    min-height: 100px;
    background-color: #80808021;
    padding: 10px;
}

/* Force the width of the plot area to fill the space available. When Telerik chart is set to a wdith of 100% it leaves a margin at the right (expecting a legend at the right??). Note. Unable to find a Telerik property to address this properly. Also note that a CSS media query applies different when a viewport of 1200px width. */
.DashGraph .RadHtmlChart {
    width: calc(100%) !important;
}


.Graph_PointsByYear g text {
    font-size: 10px !important;
    fill: #666 !important;
}

.Graph_PointsByYear g g:nth-child(2) path {
    stroke: #f5f5f5 !important;
}

.Graph_PointsByYear g g:nth-child(1) path {
    stroke: #ccc !important;
}

.ManageLink {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #e9f3f4;
    float: right;
    margin-top: 10px;
    font-size: 18px;
    line-height: 22px;
}


/*.ButtonManageLink { font-weight: 700; text-align: center; display: block; width: 32px; height: 32px; }
	.ButtonManageLink a:link, a:visited { color: #2d6570; }
	.ButtonManageLink:hover { background-color: #abd1d6; color: #fff; border-radius: 50%; }*/

.DashIconLarge {
    float: left;
}

.DashQuickLinks {
    min-height: 70px;
}

.DashActivitiesLink {
    margin: 10px auto;
}

.DashActivitiesText {
    color: #306091;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
}

.IconLargeCentered {
    height: 70px;
    width: 70px;
    margin: 8px auto;
    border-radius: 50%;
    overflow: hidden;
    padding: 10px;
    position: relative; /*background-color:#2b5886;*/
    background-image: linear-gradient(-44deg,#0e3256,#2b5886);
    box-shadow: 0 15px 40px -25px rgba(0,0,0,.16);
}

    .IconLargeCentered em {
        margin: 10px;
        color: #fff;
    }

.ChecklistPanel {
    width: 98%;
    border-radius: 20px;
    border: 3px solid #f7ebb1;
    padding: 20px 0;
    background-color: #fff;
    margin: 24px auto 10px auto;
}

    .ChecklistPanel a:link, .ChecklistPanel a:visited {
        color: #74cad7;
    }

    .ChecklistPanel a:hover, .ChecklistPanel a:active {
        color: #f0a047;
    }

.ChecklistProgress {
    padding: 0 15px 0 25px;
}

    .ChecklistProgress h5 {
        font-size: 17px;
    }

.ChecklistInfo {
    padding: 0 15px;
}

.ChecklistTable {
    width: 100%;
    font-size: 12px;
    line-height: 17px;
}

    .ChecklistTable td {
        padding: 5px;
    }

.TaskComplete {
    color: #4ccdd9;
}

.TaskNull {
    color: #ebda86;
}

.subscription-panel-pdsystem {
    width: 98%;
    border-radius: 20px;
    border: 2px solid #deeaec;
    padding: 0 0 10px 0;
    background-color: #fff;
    margin: 34px auto 20px auto;
}

    .subscription-panel-pdsystem > table {
        width: 94%;
        margin: 10px auto 30px auto;
    }

        .subscription-panel-pdsystem > table tr > th:nth-of-type(1) {
            width: 30%;
        }

        .subscription-panel-pdsystem > table tr > th:nth-of-type(2) {
            width: 40%;
        }

        .subscription-panel-pdsystem > table tr > th:nth-of-type(3) {
            width: 30%;
        }

        .subscription-panel-pdsystem > table tr:nth-of-type(1) h3 {
            font-weight: 600;
        }

        .subscription-panel-pdsystem > table tr:nth-of-type(2) th {
            border: 2px solid #00a2a9;
            border-left: none;
            border-right: none;
            padding: 15px 3px 20px 3px;
            text-align: left;
        }

        .subscription-panel-pdsystem > table tr:nth-last-of-type(2) td {
            padding-bottom: 20px;
        }

        .subscription-panel-pdsystem > table tr > td {
            padding: 6px 3px;
        }

        .subscription-panel-pdsystem > table tr:nth-of-type(1) td {
            text-align: center;
        }

        .subscription-panel-pdsystem > table tr:not(:last-of-type) td:nth-of-type(1) {
            font-weight: 600;
        }

        .subscription-panel-pdsystem > table tr:last-of-type td {
            font-size: 12px;
            line-height: initial;
            border-top: 2px solid #00a2a9;
            padding-top: 20px;
        }

            .subscription-panel-pdsystem > table tr:last-of-type td p {
                margin: 0;
            }


.DashboardOverviewTable {
    width: 90%;
    margin: 0 auto;
    font-size: 13px;
    line-height: 14px;
}

    .DashboardOverviewTable th {
        text-align: center;
        padding: 12px;
        border-bottom: 2px solid #deeaec;
    }

    .DashboardOverviewTable td {
        padding: 6px 12px;
    }

.BlueLink a:link, .BlueLink a:visited {
    color: #74cad7;
}

.BlueLink a:hover, .BlueLink a:active {
    color: #f0a047;
}

/* Wizard */
.WizardButtons {
    padding: 20px 10px;
    border-top: 2px solid #ccc;
    margin-top: 20px;
}

.WizardPrev {
    float: left;
    text-align: left;
}

.WizardNext {
    float: right;
    text-align: right;
}

.WizardSteps {
    padding: 5px;
}

    .WizardSteps > div {
        float: left;
        margin: 0 10px 10px 0;
        padding: 8px 8px 8px 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        width: 15%;
        min-width: 100px;
        text-align: center;
        white-space: nowrap;
    }

    .WizardSteps i, .WizardSteps span {
        vertical-align: middle !important; /*margin:0 !important;*/
        line-height: normal;
        padding: 0;
    }

    .WizardSteps aside {
        font-size: 0.8em;
    }

    .WizardSteps > .StepSel {
        color: #fff;
        background-color: #384f7b;
        border: 1px solid #384f7b;
    }

/* CRM Chat
===================== */
.CRMChatOuter {
    width: 100%;
}

.CRMChatPanel {
    padding: 20px 0 15px 0;
    border: 1px solid #ddd;
}

.CRMChat_Item {
    clear: both;
    padding: 8px;
}

.CRMChat_Right {
    Width: 90%;
    border-radius: 8px;
    float: right;
    border: 1px solid #aaa;
    background-color: #e6eefc;
    padding: 6px 10px;
}

.CRMChat_Left {
    Width: 90%;
    border-radius: 8px;
    float: left;
    border: 1px solid #aaa;
    background-color: #f4f4f4;
    padding: 6px 10px;
}

.CRMChat_FileNote {
    Width: 90%;
    border-radius: 8px;
    float: left;
    border: 1px solid #aaa;
    background-color: #ffea00;
    padding: 3px 6px;
}

.CRMComm_Left_NotRead {
    width: 32px;
    height: 32px;
    float: left;
}

.CRMComm_Right_NotRead {
    width: 32px;
    height: 32px;
    float: right;
}

.CRMChat_ItemDateTime {
    text-align: right;
    color: #999;
    font-size: 10px;
}

.ChatBoxPanel {
    background-color: #f0f0f0;
    border: 1px solid transparent;
}

.ChatBoxPanelInput {
    margin: 15px 10px 0 10px;
}

.ChatBox {
}

.ChatBoxButton {
    float: right;
    margin: 2px 30px 10px 0;
    overflow: hidden;
}

.CRMChat_AttachedFile {
    Margin-top: 5px;
}

.CRMChat_ChatSubject {
    color: #888;
    display: block;
}

/* Learning */
.QualStandout {
    border: 3px solid #cbcbcb;
    padding: 15px 10px;
    background-color: #f8f4de;
}

.CourseDetailBox {
    border: 1px solid #ccc;
    padding: 20px;
}

.TableInfoHeader {
    background-color: #ccc;
    font-size: 18px;
    color: #333;
    padding: 12px 18px;
}

    .TableInfoHeader h1 {
        margin: 0;
    }

/* ======================================================================================== */
/* ======================================================================================== */
/* Static */
/* ======================================================================================== */
/* ======================================================================================== */
.ShrinkWrap {
    display: block;
}

.ShrinkWrapInline {
    display: inline-block;
}

.nobr {
    display: inline;
    white-space: nowrap;
}

.BackgroundWhite {
    background-color: #fff;
}

.BackgroundGrey {
    background-color: #ccc;
}

.BackgroundTransparent {
    background-color: transparent;
}

.Hidden {
    visibility: hidden;
}

.NoDisplay {
    display: none;
}

.FloatLeft {
    float: left;
}

.FloatRight {
    float: right;
    overflow: hidden;
}

.OverflowHidden {
    overflow: hidden;
}

.Rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.Rotate270 {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.AlignLeft {
    text-align: left;
}

.AlignRight {
    text-align: right;
}

.AlignCenter {
    text-align: center;
}

.AlignTop {
    vertical-align: top;
}

.AlignBottom {
    vertical-align: bottom;
}

.AlignCenterImage {
    margin-left: auto;
    margin-right: auto;
}

.AlignCenterObject {
    margin-left: auto;
    margin-right: auto;
}

.AlignLeftImage {
    float: left;
}

.AlignRightImage {
    float: right;
}

.AlignVertMiddle {
    vertical-align: middle;
}

.AlignVertMiddle2 {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

.RemovePadding {
    padding: 0 !important;
}

.Padding2 {
    padding: 2px;
}

.Padding3 {
    padding: 3px;
}

.Padding4 {
    padding: 4px;
}

.Padding5 {
    padding: 5px;
}

.Padding10 {
    padding: 10px;
}

.Padding20 {
    padding: 20px;
}

.Padding25 {
    padding: 25px;
}

.Padding30 {
    padding: 30px;
}

.PaddingBottom6 {
    padding-bottom: 6px;
}

.PaddingBottom10 {
    padding-bottom: 10px;
}

.PaddingBottom20 {
    padding-bottom: 20px;
}

.PaddingTop5 {
    padding-top: 5px;
}

.PaddingTop6 {
    padding-top: 6px;
}

.PaddingTop8 {
    padding-top: 8px;
}

.PaddingTop20 {
    padding-top: 20px;
}

.PaddingTopBot2 {
    padding: 2px 0;
}

.PaddingRight2 {
    padding-right: 2px
}

.PaddingRight3 {
    padding-right: 3px
}

.PaddingRight5 {
    padding-right: 5px
}

.PaddingRight10 {
    padding-right: 10px
}

.PaddingRight15 {
    padding-right: 15px
}

.PaddingLeft10 {
    padding-left: 10px;
}

.PaddingLeft20 {
    padding-left: 20px;
}

.PaddingLeft50 {
    padding-left: 50px;
}

.PaddingLeft100 {
    padding-left: 100px;
}

.Margin5 {
    margin: 5px;
}

.Margin10 {
    margin: 10px;
}

.Margin20 {
    margin: 20px;
}

.MarginTop3 {
    margin-top: 3px;
}

.MarginTop5 {
    margin-top: 5px;
}

.MarginTop10 {
    margin-top: 10px;
}

.MarginTop20 {
    margin-top: 20px;
}

.MarginTopBot2 {
    margin-top: 2px;
    margin-bottom: 2px;
}

.MarginLeft5 {
    margin-left: 5px;
}

.MarginLeft7 {
    margin-left: 7px;
}

.MarginLeft12 {
    margin-left: 12px;
}

.MarginLeft20 {
    margin-left: 20px;
}

.MarginBottom3 {
    margin-bottom: 3px;
}

.MarginBottom5 {
    margin-bottom: 5px;
}

.MarginBottom7 {
    margin-bottom: 7px;
}

.MarginBottom20 {
    margin-bottom: 20px;
}

.MarginRight6 {
    margin-right: 6px;
}

.MarginRight20 {
    margin-right: 20px;
}

.Border1Purple {
    border: 1px solid #e9dcf2;
}

.Border1Grey {
    border: 1px solid #ccc;
}

.Border3White {
    border: 3px solid #fff;
}

.BorderRightGrey {
    border-right: 1px solid #ccc;
}

.BorderLeftGrey {
    border-left: 1px solid #ccc;
}

.BorderTopGrey {
    border-top: 1px solid #ccc;
}

.BorderBottomGrey {
    border-bottom: 1px solid #ccc;
}

.BorderTop {
    border-top: 3px solid #ccc;
}

.DividerLine {
    margin: 10px 0;
    background-color: #ccc;
    height: 4px;
}

.Border3Grey {
    border: 3px solid #e2dbe6;
}

.Border1Black {
    border: 1px solid #000;
}

.BorderNone {
    border: none;
}

.BackgroundHighlight {
    background-color: #edf4f4;
}

.BackgroundGreyLight {
    background-color: #e5e5e5;
}

.BackgroundGreyMid {
    background-color: #ccc;
}

.BackgroundDark {
    background-color: #333;
}

.Headline {
    padding: 20px;
    text-align: center;
    background-color: #eee;
}
/* Style Guide Presentation */

/* % WIDTH SETTINGS
===================== */
.Width1 {
    width: 1%;
}

.Width2 {
    width: 2%;
}

.Width3 {
    width: 3%;
}

.Width4 {
    width: 4%;
}

.Width5 {
    width: 5%;
}

.Width6 {
    width: 6%;
}

.Width7 {
    width: 7%;
}

.Width8 {
    width: 8%;
}

.Width9 {
    width: 9%;
}

.Width10 {
    width: 10%;
}

.Width12 {
    width: 12%;
}

.Width15 {
    width: 15%;
}

.Width17 {
    width: 17%;
}

.Width19 {
    width: 19%;
}

.Width20 {
    width: 20%;
}

.Width25 {
    width: 25%;
}

.Width30 {
    width: 30%;
}

.Width33 {
    width: 33%;
}

.Width34 {
    width: 34%;
}

.Width35 {
    width: 35%;
}

.Width40 {
    width: 40%;
}

.Width40Responsive {
    width: 40%;
}

.Width45 {
    width: 45%;
}

.Width50 {
    width: 50%;
}

.Width50Responsive {
    width: 50%;
}

.Width55 {
    width: 55%;
}

.Width55Responsive {
    width: 55%;
}

.Width60 {
    width: 60%;
}

.Width60Responsive {
    width: 60%;
}

.Width65 {
    width: 65%;
}

.Width65Responsive {
    width: 65%;
}

.Width70 {
    width: 70%;
}

.Width70Responsive {
    width: 70%;
}

.Width75 {
    width: 75%;
}

.Width75Responsive {
    width: 75%;
}

.Width80 {
    width: 80%;
}

.Width80Responsive {
    width: 80%;
}

.Width85 {
    width: 85%;
}

.Width90 {
    width: 90%;
}

.Width95 {
    width: 95%;
}

.Width96 {
    width: 96%;
}

.Width97 {
    width: 97%;
}

.Width98 {
    width: 98%;
}

.Width99 {
    width: 99%;
}

.Width100 {
    width: 100%;
}

.Height250 {
    height: 250px;
}

.Height500 {
    height: 500px;
}

.MinHeight200 {
    min-height: 200px;
}

.MinHeight400 {
    min-height: 400px;
}

.Zindex9 {
    z-index: 9000;
}

.Zindex7 {
    z-index: 7000;
}

.Zindex5 {
    z-index: 5000;
}

.Zindex3 {
    z-index: 3000;
}

.Zindex1 {
    z-index: 1000;
}

/* IMAGE SIZES
===================== */
.ImageBasic {
    border: 0px;
}

.ImageBorderWhite1 {
    border: 1px solid #fff;
}

.ImageBorderWhite2 {
    border: 2px solid #fff;
}

.ImageBorderWhite3 {
    border: 3px solid #fff;
}

.ImageBorderWhite10 {
    border: 10px solid #fff;
}

.ImageBorderGrey1 {
    border: 1px solid #ccc;
}

.ProductImage {
    margin: 5px auto !important;
}

/* Used for square images */
.Image16 {
    width: 16px;
    height: 16px;
}

.Image18 {
    width: 18px;
    height: 18px;
}

.Image24 {
    width: 24px;
    height: 24px;
}

.Image32 {
    width: 32px;
    height: 32px;
}

.Image40 {
    width: 40px;
    height: 40px;
}

.Image48 {
    width: 48px;
    height: 48px;
}

.Image72 {
    width: 72px;
    height: 72px;
}

.Image128 {
    width: 128px;
    height: 128px;
}

.Image256 {
    width: 256px;
    height: 256px;
}

.ImgItem {
    border: 1px solid #bbb;
}

.Rounded {
    border-radius: 50%;
}


/* COLORS
===================== */
.Red {
    color: #f00;
}

.Green {
    color: #093;
}

.Black {
    color: #000;
}

.White {
    color: #fff;
}

.Orange {
    color: #f60;
}

.Yellow {
    color: #FFC300
}

.GreyLight {
    color: #ccc;
}

.GreyDark {
    color: #333;
}

.Teal {
    color: #00a2a9;
}

.TealDark {
    color: #0a454d;
}

/* ======================================================================================== */
/* ======================================================================================== */
/* Responsive Layouts */
/* ======================================================================================== */
/* ======================================================================================== */

/* For Help with the responsive grid system, follow the link below */
/* http://www.responsivegridsystem.com */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Custom */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Apply this style directly within an 'img' tag to create images that automatically resize as the parent space shrinks */
.responsive-image img {
    height: auto !important;
    max-width: 100% !important;
    width: 100% !important;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Column system  */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*  GRID COLUMN SETUP   ==================================================================== */
.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}

    .col:first-child {
        margin-left: 0;
    }

.colMargin_0 {
    display: block;
    float: left;
    margin: 0;
}
    /* Tight Columns */
    .colMargin_0:first-child {
        margin-left: 0;
    }

/*  GRID OF TWO   ============================================================================= */
.span_2_of_2 {
    width: 100%;
}

.span_1_of_2 {
    width: 49.2%;
}

/*  GRID OF THREE   ============================================================================= */
.span_3_of_3 {
    width: 100%;
}

.span_2_of_3 {
    width: 66.13%;
}

.span_1_of_3 {
    width: 32.26%;
}

/*  GRID OF FOUR   ============================================================================= */
.span_4_of_4 {
    width: 100%;
}

.span_3_of_4 {
    width: 74.6%;
}

.span_2_of_4 {
    width: 49.2%;
}

.span_1_of_4 {
    width: 23.8%;
}

/*  GRID OF FIVE   ============================================================================= */
.span_5_of_5 {
    width: 100%;
}

.span_4_of_5 {
    width: 79.68%;
}

.span_3_of_5 {
    width: 59.36%;
}

.span_2_of_5 {
    width: 39.04%;
}

.span_1_of_5 {
    width: 18.72%;
}

/*  GRID OF SIX   ============================================================================= */
.span_6_of_6 {
    width: 100%;
}

.span_5_of_6 {
    width: 83.06%;
}

.span_4_of_6 {
    width: 66.13%;
}

.span_3_of_6 {
    width: 49.2%;
}

.span_2_of_6 {
    width: 32.26%;
}

.span_1_of_6 {
    width: 15.33%;
}

/*  GRID OF SEVEN   ============================================================================= */
.span_7_of_7 {
    width: 100%;
}

.span_6_of_7 {
    width: 85.48%;
}

.span_5_of_7 {
    width: 70.97%;
}

.span_4_of_7 {
    width: 56.45%;
}

.span_3_of_7 {
    width: 41.94%;
}

.span_2_of_7 {
    width: 27.42%;
}

.span_1_of_7 {
    width: 12.91%;
}

/*  GRID OF EIGHT   ============================================================================= */
.span_8_of_8 {
    width: 100%;
}

.span_7_of_8 {
    width: 87.3%;
}

.span_6_of_8 {
    width: 74.6%;
}

.span_5_of_8 {
    width: 61.9%;
}

.span_4_of_8 {
    width: 49.2%;
}

.span_3_of_8 {
    width: 36.5%;
}

.span_2_of_8 {
    width: 23.8%;
}

.span_1_of_8 {
    width: 11.1%;
}

/*  GRID OF NINE   ============================================================================= */
.span_9_of_9 {
    width: 100%;
}

.span_8_of_9 {
    width: 88.71%;
}

.span_7_of_9 {
    width: 77.42%;
}

.span_6_of_9 {
    width: 66.13%;
}

.span_5_of_9 {
    width: 54.84%;
}

.span_4_of_9 {
    width: 43.55%;
}

.span_3_of_9 {
    width: 32.26%;
}

.span_2_of_9 {
    width: 20.97%;
}

.span_1_of_9 {
    width: 9.68%;
}

/*  GRID OF TEN   ============================================================================= */
.span_10_of_10 {
    width: 100%;
}

.span_9_of_10 {
    width: 89.84%;
}

.span_8_of_10 {
    width: 79.68%;
}

.span_7_of_10 {
    width: 69.52%;
}

.span_6_of_10 {
    width: 59.36%;
}

.span_5_of_10 {
    width: 49.2%;
}

.span_4_of_10 {
    width: 39.04%;
}

.span_3_of_10 {
    width: 28.88%;
}

.span_2_of_10 {
    width: 18.72%;
}

.span_1_of_10 {
    width: 8.56%;
}

/*  GRID OF ELEVEN   ============================================================================= */

.span_11_of_11 {
    width: 100%;
}

.span_10_of_11 {
    width: 90.76%;
}

.span_9_of_11 {
    width: 81.52%;
}

.span_8_of_11 {
    width: 72.29%;
}

.span_7_of_11 {
    width: 63.05%;
}

.span_6_of_11 {
    width: 53.81%;
}

.span_5_of_11 {
    width: 44.58%;
}

.span_4_of_11 {
    width: 35.34%;
}

.span_3_of_11 {
    width: 26.1%;
}

.span_2_of_11 {
    width: 16.87%;
}

.span_1_of_11 {
    width: 7.63%;
}

/*  GRID OF TWELVE   ============================================================================= */
.span_12_of_12 {
    width: 100%;
}

.span_11_of_12 {
    width: 91.53%;
}

.span_10_of_12 {
    width: 83.06%;
}

.span_9_of_12 {
    width: 74.6%;
}

.span_8_of_12 {
    width: 66.13%;
}

.span_7_of_12 {
    width: 57.66%;
}

.span_6_of_12 {
    width: 49.2%;
}

.span_5_of_12 {
    width: 40.73%;
}

.span_4_of_12 {
    width: 32.26%;
}

.span_3_of_12 {
    width: 23.8%;
}

.span_2_of_12 {
    width: 15.33%;
}

.span_1_of_12 {
    width: 6.86%;
}


/* Image Crop - Keep this so the refrence point of the selector is the immediate container, and NOT <BODY>.  Refer the _ReadMe file with this tool.
===================== */
#MyImgAreaSelect {
    position: relative;
}


/* Expanding Panels  (FAQ's or Attach a File Link)
===================== */
/* Format our link that will be used to trigger the toggle */
.TriggerText {
    font-size: 20px;
    width: 95%;
    color: #333;
    padding: 15px 10px 15px 10px;
}

.CRMAttchFile .TriggerText {
    font-size: 16px;
    width: 95%;
    color: #666;
    padding: 15px 10px 5px 10px;
}

div.TriggerText:hover {
    color: #f0a047;
    text-decoration: none;
    cursor: pointer;
}

/* Set the container DIV that will be transitioned */
.Outer {
    height: 0;
    position: relative;
    overflow: hidden;
    width: auto
}

/* Set the inner DIV(s), that hold the real content.  *** THIS MUST HAVE A BORDER OR PADDING APPLIED!  Otherwise the dynamic height calc may fail due to not recognising margin values */
.Inner {
    padding: 5px 5px 5px 30px;
    width: auto;
}



/* ======================================================================================== */
/* ======================================================================================== */
/* Custom */
/* ======================================================================================== */
/* ======================================================================================== */


/*Example Generic Table Handling*/
.TableStd {
    width: 90%;
    border-collapse: collapse;
    max-width: 1000px;
}

    .TableStd > tbody {
        border: 1px solid #ccc;
    }

    .TableStd caption {
        text-align: left;
        font-size: 14px;
        color: #4c6465;
        font-weight: bold;
        padding: 10px 5px 4px 10px;
        border-color: #ccc;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        background-color: #fff;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .TableStd th {
        font-weight: bold;
        text-align: left;
        vertical-align: bottom;
        padding: 10px 5px 4px 5px;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
    }

    .TableStd td {
        vertical-align: bottom;
        line-height: 30px;
        border-top: 1px solid transparent;
        padding: 0 5px;
    }

    .TableStd > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

    .TableStd > tbody > tr:nth-child(even) {
        background-color: #fefefe;
    }

    .TableStd > tbody > tr:hover td {
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
        background-color: #fcf4e6;
    }

    .TableStd > tbody > tr > td > a {
        display: block;
        text-decoration: none;
        position: relative;
    }

        .TableStd > tbody > tr > td > a:hover, .TableStd > tbody > tr > td > a:active {
            text-decoration: underline;
            color: #f63;
            cursor: pointer;
        }

/*Apply additional custom rendering per table*/
/*Customer Profile Table*/
.TableCustProf > thead {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
    /*Set matching left and right borders in the heading row*/
    .TableCustProf > thead > tr > th:nth-of-type(3), .TableCustProf > tbody > tr > td:nth-of-type(3) {
        text-align: right;
    }
    /*Make the number in the 3rd column align right*/
    .TableCustProf > thead > tr > th:nth-of-type(4), .TableCustProf > tbody > tr > td:nth-of-type(4) {
        text-align: center;
    }
/*Make the size / button in the 4th column align in the middle*/
.TableCustProf > tbody > tr > td:first-of-type {
    font-weight: bold;
}
/*Make the text in the first column bold*/
.TableCustProf > tbody > tr > td > a.ABtnStd {
    display: inline-block;
    text-decoration: none;
    width: 75px;
}
/*Override the A tag handling that the table handling applies over the standard button*/


/*Site wide button style from an Anchor tag */
.ABtnStd {
    text-align: center;
    padding: 4px 12px;
    margin: 3px;
    font-size: 14px;
    line-height: normal;
    display: inline-block;
}

a.ABtnStd:link, a.ABtnStd:visited {
    text-decoration: none;
}

a.ABtnStd:hover, a.ABtnStd:active {
    text-decoration: none;
    color: #fff !important;
    background-color: #f08c3d;
    border-radius: 3px;
}

/* Rounded Button */
.BtnRounded {
    text-align: center;
    font-weight: 400;
    padding: 6px 18px;
    margin: 3px;
    font-size: 12px;
    line-height: normal;
    display: inline-block;
    border-radius: 14px;
    background-color: #fff;
    border: 1px solid #4ba0a7;
}

a.BtnRounded:link, a.BtnRounded:visited {
    text-decoration: none;
    color: #0a454d;
}

a.BtnRounded:hover, a.BtnRounded:active {
    text-decoration: none;
    color: #fff !important;
    background-color: #0a454d;
    transition: all 0.3s ease;
}

.BtnGroup {
    display: inline-block;
}

/*video list icons*/
.ib_gallery img {
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #f5f5f5;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.ib_gallery_on img {
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #fb9d18;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.ib_brief img {
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #f5f5f5;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.ib_brief_on img {
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #fb9d18;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.ib_list img {
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #f5f5f5;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.ib_list_on img {
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #fb9d18;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

/*----------------------------------------------*/
/* List Grid Layout -  Responsive Columns */

/*Containers */
.ListItem {
}

    .ListItem article {
        border-top: 1px solid #e3e3e3;
        padding: 10px 5px;
        overflow: hidden;
    }

        .ListItem article > div:nth-of-type(1) {
            float: left;
            margin: 0 20px 0 0;
            vertical-align: top;
        }

        .ListItem article > div:nth-of-type(2) {
            float: left;
            width: 50%;
            vertical-align: top;
        }

/* Responsive News */

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

.NewsNavCont {
    border: 1px solid #ccc;
    padding: 0 0 0 10px;
    border-radius: 4px;
    width: 100%; /*max-width:600px;*/
}

#NewsNav {
    position: relative;
    top: 0;
    height: 40px;
    background-color: #fafafa;
}

    #NewsNav > nav {
        line-height: 40px;
    }

        #NewsNav > nav > article {
            float: left;
        }

        #NewsNav > nav > aside {
            float: right;
            background-color: #777;
            border-radius: 4px;
            color: #fff;
            font-weight: 600;
            font-size: 16px;
            width: 40px;
            height: 40px;
            text-align: center;
        }

    #NewsNav:hover {
    }

        #NewsNav:hover > nav > aside {
            background-color: #555;
        }

    #NewsNav a {
        display: block;
        padding: 5px 8px;
        text-decoration: none;
        color: #222;
        border-radius: 5px;
        font-size: 18px;
        border: 1px solid transparent;
    }

        #NewsNav a:nth-child(odd) {
            background-color: #fff;
            color: #000;
            border: 1px solid #ccc;
        }

        #NewsNav a:nth-child(even) {
            background-color: #f7f7f7;
            color: #000;
            border: 1px solid #ccc;
        }

        #NewsNav a:hover {
            background-color: #fcf6e8;
            color: #000;
            border: 1px solid #e6d39e;
        }

    #NewsNav > div {
        border: 1px solid #666;
        border-radius: 4px;
        margin: 0;
        overflow: hidden;
        width: 100%;
        position: absolute;
        top: 40px;
        left: -10px;
        max-height: 0;
        opacity: 0;
        transition: max-height 2.0s, opacity 0.75s;
        -webkit-transition: max-height 2.0s, opacity 0.75s;
        font-weight: 200;
        color: #333;
        background-color: #fff;
        z-index: 500;
        text-align: left;
    }

        #NewsNav > div > div {
            padding: 7px 7px;
            background-color: #e0e0e0;
        }

    #NewsNav:hover > div {
        max-height: 600px;
        opacity: 1.0;
        overflow: visible;
        overflow-y: scroll;
    }

.NewsMenuDate {
    font-size: 12px;
    color: #999;
}

.NewsMenuTitle {
    font-weight: 700;
}

.NewsMenuTeaser {
    font-size: 12px;
    color: #666;
}

.NewsTeaser {
    font-size: 14px;
    color: #666;
}

.CommentCount {
    font-size: 10px;
    color: #333;
    padding: 1px 5px;
    background-color: #f7f7f7;
    margin-left: 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.NewsMenuViewCount {
    font-size: 10px;
    color: #333;
    padding: 1px 5px;
    background-color: #f7f7f7;
    margin-left: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.NewsPrevNext {
    text-decoration: none !important;
    display: block;
    float: right;
    overflow: hidden;
    padding: 0 10px;
    background-color: #fff;
    border-radius: 10px;
}

    .NewsPrevNext div {
        display: block;
        float: left;
        line-height: 40px;
        margin: 0 3px;
    }

    .NewsPrevNext:hover {
        background-color: #ddd;
        color: #fff;
    }

.NewsArrow {
    font-weight: bold;
    font-size: 30px;
}

.NewsArrowLeft {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.NewsArrowRight {
    float: right;
}

.NewsList {
    padding-left: 24px;
    background-image: url(/assets/images/bullet_arrow_circle.gif);
    background-repeat: no-repeat;
    line-height: 22px;
}

.NewsHeader {
    height: 42px;
    padding-left: 12px;
}


/* News Navigation */

.related-list {
    display: flex;
    gap: 30px;
    list-style: none;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap;
}

    .related-list li {
        flex: 1;
        text-align: center;
        max-width: 420px;
        min-width: 250px;
    }

    .related-list img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

    .related-list a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #4ccdd9;
        font-weight: bold;
        text-align: center;
        line-height: normal;
    }

    .related-list p {
        font-size: 0.9rem;
        color: #666;
        margin-top: 0.5rem;
        text-align: center;
        max-width: 90%;
        font-weight: 300;
    }

/* Product Keyword Search */
.SearchPanel .RadComboBox input[type="text"] {
    line-height: normal !important;
    border: 0 !important;
    margin: 0;
}

.SearchPanel .RadComboBox_Default .rcbInputCell, .SearchPanel .RadComboBox_Default .rcbArrowCell {
    background-image: none !important;
    padding: 0 !important;
}

.SearchPanel {
}

.SearchPanelCol1 {
    float: left;
    width: 80%;
}

    .SearchPanelCol1 input[type="text"] {
        width: 95% !important;
        margin-right: 4px;
    }

.SearchPanelCol2 {
    float: left;
    width: 15%;
    padding: 3px 0;
}

/*
	Support for the 'Auto Complete' search handling, which is based on "Typeahead". On GIT: https://github.com/twitter/typeahead.js
	'Typeahead' is the 'UI' view. Find documentation here: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names
	'Bloodhound' is a paired component that is the 'suggstion engine'.
*/
.typeahead, .tt-query, .tt-hint {
    height: 26px !important;
    padding: 8px 0 8px 12px !important;
    font-size: 18px !important;
    border: 2px solid #ccc;
    border-radius: 2px;
    outline: none;
    width: 100%;
}

.typeahead {
    background-color: #fff;
}

    .typeahead:focus {
        border: 1px solid #0097cf;
    }

.tt-query {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    color: red !important;
}

.tt-hint {
    color: #bbb !important;
}
/* This is the text that shows after the cursor within the form field. */
.tt-menu {
    width: 420px;
    margin: 0;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
    color: #000;
}
    /* This is the text that shows as the suggestions below the form field. */
    .tt-suggestion:hover {
        cursor: pointer;
        color: #fff;
        background-color: #0097cf;
    }
    /* .tt-suggestion.tt-cursor				{color:#fff; background-color:#0097cf;  color:purple !important;} */
    .tt-suggestion p {
        margin: 0;
    }

.gist {
    font-size: 14px;
    color: yellow !important;
}


/* Modal pop-up styles - Used to replace JavaScript Alert/Confirm dialogues*/
@keyframes ModalPopup_ModalContent {
    from {
        top: -100px;
        opacity: 0;
    }

    to {
        top: 0px;
        opacity: 1;
    }
}

.ModalPopup_ModalOuter {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 10s ease-in;
    transition: opacity 2s ease-in;
    display: none;
}

    .ModalPopup_ModalOuter:target {
        opacity: 1;
        display: block;
    }

    .ModalPopup_ModalOuter > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 5px;
        background: #fff;
        box-shadow: 0 0 10px 5px #555;
        animation-name: ModalPopup_ModalContent;
        animation-duration: 0.8s;
        text-align: left;
    }

.ModalPopup_ModalCloser {
    background: #606061;
    color: #fff;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 12px;
    box-shadow: 1px 1px 3px #000;
}

    .ModalPopup_ModalCloser:hover, .ModalPopup_ModalCloser:link, .ModalPopup_ModalCloser:visited {
        text-decoration: none;
        color: #fff;
    }

    .ModalPopup_ModalCloser:hover {
        background: #00d9ff;
    }


/* EFFECTS */
/* Many of these effects come from here:http://ianlunn.github.io/Hover/  */
/*----------------------------------------------*/

/* STREAMSWEET PRODUCTS - HOVER TEXT */
.streamSweet-item {
    height: auto;
    float: left;
    position: relative;
}

    .streamSweet-item:hover .img-title {
        opacity: 0.8;
    }

.img-title {
    position: absolute;
    top: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    opacity: 0;
    background-color: #fff;
    transition: all 1.0s ease;
}

    .img-title p {
        position: absolute;
        color: #333;
        top: 30%;
        width: 100%;
        text-align: center;
    }

/* Shadow */
.BtnShadow {
    -webkit-transition: box-shadow 0.3s;
    transition: box-shadow 0.3s;
}

    .BtnShadow:hover, .BtnShadow:focus, .BtnShadow:active {
        box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    }

/* Shrink */
.HoverShrink {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

    .HoverShrink:hover, .HoverShrink:focus, .HoverShrink:active {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

/* Grow */
.HoverGrow {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

    .HoverGrow:hover, .HoverGrow:focus, .HoverGrow:active {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

/* Hover Fade */
.HoverFade {
}

    .HoverFade:hover {
        opacity: 0.8;
    }


/* 'Lazy Load' Animations
===================== */
.AnimateShell {
    overflow: hidden;
}

.animation-element {
    opacity: 0;
    position: relative;
}

    /*animation element sliding from the LEFT*/
    .animation-element.slide-left {
        opacity: 0;
        -webkit-transition: all 1200ms linear;
        transition: all 1200ms linear;
        -webkit-transform: translate(-300px, 0px);
        transform: translate(-300px, 0px);
    }

        .animation-element.slide-left.in-view {
            opacity: 1;
            -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
        }

    /*animation element sliding from the RIGHT*/
    .animation-element.slide-right {
        opacity: 0;
        -webkit-transition: all 1200ms linear;
        transition: all 1200ms linear;
        -webkit-transform: translate(300px, 0px);
        transform: translate(300px, 0px);
    }

        .animation-element.slide-right.in-view {
            opacity: 1;
            -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
        }

    /*animation element sliding from the bottom UP*/
    .animation-element.slide-up {
        opacity: 0;
        -webkit-transition: all 1200ms linear;
        transition: all 1200ms linear;
        -webkit-transform: translate(0px, -300px);
        transform: translate(0px, -300px);
    }

        .animation-element.slide-up.in-view {
            opacity: 1;
            -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
        }

    /*animation element sliding from the top DOWN*/
    .animation-element.slide-up {
        opacity: 0;
        -webkit-transition: all 1200ms linear;
        transition: all 1200ms linear;
        -webkit-transform: translate(0px, 300px);
        transform: translate(0px, 300px);
    }

        .animation-element.slide-up.in-view {
            opacity: 1;
            -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
        }

/* QUILL EDITOR CONTENT PRESENTED IN THE WEB FORMS PUBLIC INTERFACE. NOTE. ASSUMES THE SPACER ROWS (<p><br></p>) ARE ALREADY STRIPPED BEFORE PUSHING TO THE DISPLAY */
/* ----------------------------------------------------------------------------------------------------------------------  */

.quill-edited-content {
    line-height: 1.3 !important;
}

    /* Set default values */
    .quill-edited-content :is(h1, h2, h3, ul, ol, blockquote) {
        line-height: normal !important;
        font-weight: 400 !important;
    }

    .quill-edited-content h1 {
        font-size: 1.4em;
        margin: 1.0em 0 0 0;
    }

    .quill-edited-content h2 {
        font-size: 1.2em;
        margin: 0.8em 0 00;
    }

    .quill-edited-content h3 {
        font-size: 1.1em;
        margin: 0.6em 0 0 0;
    }

    .quill-edited-content p {
        margin: 0.8em 0 0 0;
    }

    .quill-edited-content :is(ol, ul) {
        margin: 0.6em 0 0 0;
    }

    .quill-edited-content li:not(:first-of-type) {
        margin-top: 0.2em;
    }

    .quill-edited-content blockquote {
        border-left: 4px solid #81bdb7;
        margin: 10px 10px;
        padding: 5px 10px;
        background-color: #e9efef;
    }

    /* Drop the margin if the element is the first inside the container. */
    .quill-edited-content :first-child:is(h1, h2, h3, ul, ol, p) {
        margin-top: 0;
    }
    /* If an h tag or a p tag directly follows an h tag, then set explicit top margin. */
    .quill-edited-content :is(h1, h2, h3) + :is(h1, h2, h3, p) {
        margin: 0.2em 0 0 0;
    }
    /* Drop the stupid spacer row that is created within the Quill editing space (<p><br></p>), so the display handling works as if it doesn't exist. */
    .quill-edited-content p:has(br:only-child) {
        display: none;
    }

    /* Mirror extended 'snow' template handling for the list items. */
    .quill-edited-content :is(ol, ul) {
        padding-left: 0.8em;
    }

    .quill-edited-content ol > li, .quill-edited-content ul > li {
        list-style-type: none;
        padding-left: 1.5em;
    }

    .quill-edited-content ol li {
        counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
        counter-increment: list-0;
    }

    .quill-edited-content li::before {
        margin-left: -1.5em;
        margin-right: 0.3em;
        text-align: right;
        display: inline-block;
        white-space: nowrap;
        width: 1.2em;
    }

    .quill-edited-content ol li:before {
        content: counter(list-0, decimal) '. ';
    }

    .quill-edited-content ul > li::before {
        content: '\2022';
    }



/* USEFUL SNIPPETS */
/* ----------------------------------------------------------------------------------------------------------------------  */
/* Download */
.DownloadFeature {
    background-color: #f2f9fb;
    padding: 8px 10px;
    color: #6c6c6c;
    border-bottom: 3px solid #e5f4f7;
    border-top: 3px solid #e5f4f7;
    margin: 30px auto;
}

    .DownloadFeature img {
        margin: 6px auto;
    }

/* Editor Images */
.FloatLeftImage {
    float: left;
    margin: 20px 20px 20px 0;
}

.FloatRightImage {
    float: right;
    margin: 20px 10px 20px 20px;
}

.CaptionRight {
    width: 45%;
    float: right;
    margin: 0 10px 20px 20px;
    padding: 20px;
}

    .CaptionRight img {
        margin-bottom: 14px;
    }

/* TABLE NO BORDER */
.TableNoBorder {
    margin-bottom: 20px;
    line-height: 1.5;
    border-top: 1px solid #bdbebf;
    background-color: #fff;
}

    .TableNoBorder th {
        background-color: #f5f5f5;
        font-weight: 300;
        color: #939598;
        padding: 10px;
    }

    .TableNoBorder tr {
        border-bottom: 1px solid #bdbebf;
    }

        .TableNoBorder tr:hover {
            background-color: #f2f9fb;
        }

    .TableNoBorder td {
        font-size: 14px;
        padding: 8px; /*vertical-align:top;*/
    }

.TableNoBorderSubHead {
    color: #939598;
    font-weight: bold;
}

/* TABLE WITH BORDER */
.TableWithBorder {
    margin-bottom: 20px;
    line-height: 1.5;
    border: 1px solid #ccc;
    background-color: #fff;
}

    .TableWithBorder th {
        background-color: #f5f5f5;
        font-weight: 300;
        padding: 10px;
    }

    .TableWithBorder tr {
        border-bottom: 1px solid #bdbebf;
    }

        .TableWithBorder tr:hover {
            background-color: #f2f9fb;
        }

    .TableWithBorder td {
        font-size: 14px;
        padding: 8px; /*vertical-align:top;*/
    }

.TableWithBorderSubHead {
    background-color: #deeeef;
    font-weight: bold;
}

/* FEATURE TABLE */
.TableFeature {
    margin-bottom: 20px;
    line-height: 1.5;
    border-top: 1px solid #bdbebf;
    background-color: #fff;
}

    .TableFeature th {
        background-color: #f5f5f5;
        font-weight: 300;
        color: #939598;
        padding: 10px;
    }

    .TableFeature tr {
        border-bottom: 1px solid #bdbebf;
    }

        .TableFeature tr:hover {
            background-color: #f2f9fb;
        }

    .TableFeature td {
        font-size: 14px;
        padding: 8px; /*vertical-align:top;*/
    }

.TableFeatureSubHead {
    color: #939598;
    font-weight: bold;
}

/* KEYNOTE */
.Keynote {
    margin: 20px auto;
    width: 90%;
    padding: 25px 30px;
    border-left: 4px solid #BCCEE0;
    font-size: 16px;
    line-height: 24px;
    display: block
}

/* Vote */
.VotePanel {
    text-align: center;
    max-width: 160px;
    color: #ccc;
    margin: 8px auto;
}

.VoteHeading {
    font-size: 18px;
    margin: 0;
    color: #333;
}

.VoteSelect {
    text-align: center;
}

.VoteCountLge {
    font-size: 34px;
    line-height: 34px;
    padding: 5px;
}

    .VoteCountLge p {
        margin: 0 0 4px 0;
        color: #666;
    }

.VoteUp {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.VoteDown {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* Ratings */
.RatingHeading {
    padding: 10px 0;
    color: #666;
    font-size: 14px;
    font-weight: bold;
}

.RatingContainer {
    padding: 16px 0;
}

.RatingContainerIndividual {
    padding: 8px 0;
}
/* Reduce vertical space a bit */

.SocialCount {
    color: #ccc;
    font-weight: normal;
}

.SocialTextSmall {
    font-size: 12px;
    color: #909090;
}


/* A lead banner that introduces the content below */
.section-info-top-banner {
    background-color: #fff;
}

    .section-info-top-banner *, .section-info-top-banner *::before, .section-info-top-banner *::after {
        box-sizing: border-box;
    }

    .section-info-top-banner > div {
        max-width: 1380px;
        margin: 0 auto;
        padding: 60px 50px 40px 50px;
        background-color: #0a454d;
    }

    .section-info-top-banner h1, .section-info-top-banner h2, .section-info-top-banner h3, .section-info-top-banner p {
        color: #fff;
    }

    .section-info-top-banner > div > div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 30px 20px 0 20px;
    }

        .section-info-top-banner > div > div > p {
            width: 30%;
        }

/* Info Pages. Using this CSS on a container element gives rows with alternating background colours and left/right layouts. */
.section-info-2col-alternating {
    margin-top: 50px;
}
    /* Override some values within this space.  */
    .section-info-2col-alternating *, .section-info-2col-alternating *::before, .section-info-2col-alternating *::after {
        box-sizing: border-box;
    }

    .section-info-2col-alternating h2 {
        margin: 0;
        font-size: 34px;
        font-weight: 700;
        line-height: initial;
    }

    .section-info-2col-alternating h3 {
        margin: 15px 0 0 0;
        font-size: 22px;
        line-height: initial;
    }

    .section-info-2col-alternating p {
        margin: 10px 0 0 0;
        line-height: initial;
    }

    .section-info-2col-alternating img {
        max-width: 90%;
        height: auto;
    }
    /* The <article> tag is used for each row and goes full screen width. */
    .section-info-2col-alternating > article { /*background-color: #fff;padding: 70px 0; */
    }

        .section-info-2col-alternating > article:nth-of-type(even) { /*background-color: #f0edf3;*/
        }
        /* A <div> within the <article> is the container for the content. It has 2 nested <div> tags for the columns. */
        .section-info-2col-alternating > article > div {
            max-width: 1380px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 0 40px;
            margin: 0 auto;
        }

        .section-info-2col-alternating > article:nth-of-type(even) > div {
            flex-direction: row-reverse;
        }

        .section-info-2col-alternating > article > div > div {
            width: 45%;
        }

/* A panel that teases to more information */
.section-info-read-more {
    background-color: #00a2a9;
    margin: 30px 0 100px 0;
}

    .section-info-read-more *, .section-info-read-more *::before, .section-info-read-more *::after {
        box-sizing: border-box;
    }

    .section-info-read-more h3 {
        font-size: 16px;
    }

    .section-info-read-more p {
        font-size: 14px;
    }

    .section-info-read-more h1, .section-info-read-more h2, .section-info-read-more h3, .section-info-read-more p, .section-info-read-more a {
        color: #fff;
    }

    .section-info-read-more > div {
        max-width: 1380px;
        margin: 0 auto;
        padding: 20px 20px 40px 20px;
        background-color: #0a454d;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

        .section-info-read-more > div > div {
            width: 25%;
            color: #fff;
            border-radius: 8px;
            padding: 10px;
        }

            .section-info-read-more > div > div:hover {
                background-color: #0d606b;
            }

            .section-info-read-more > div > div > a {
                text-decoration: none;
                border-radius: 3px;
                padding: 3px 10px;
                border: 1px solid transparent;
                display: block;
            }

                .section-info-read-more > div > div > a:hover {
                    border: 1px solid #fff;
                }

/* ----------------------------------------------------------------------------------------------------------------------  */
/* Media Queries - MUST ALWAYS BE THE LAST BLOCK OF CSS - Always work with biggest screen to smallest.  */
/* ----------------------------------------------------------------------------------------------------------------------  */

/* 1600px */
@media screen and (max-width: 1600px) {
    .mega-menu > div {
        width: 23%;
    }

        .mega-menu > div:nth-last-of-type(1) {
            display: none;
            width: 0;
        }

    .mega-menu-sub-head > img {
        height: 60px;
        margin: 10px 0 0 0;
    }
}

/* 1400px */
@media only screen and (max-width:1400px) {
    .header-content > div:nth-child(2) {
        width: 270px;
    }

    .header-content > div:nth-child(3) {
        width: calc(100% - 470px);
    }

        .header-content > div:nth-child(3) > nav {
            width: calc(100% - 130px);
        }

        .header-content > div:nth-child(3) > div {
            width: 130px;
        }

    .btn-nav-startfree {
        padding: 9px 15px;
    }

    .DashGraph .RadHtmlChart {
        width: 100% !important;
    }
}

/* 1200px*/
@media screen and (max-width: 1200px) {
    .header-content > img, .header-content > a:nth-child(1) > img {
        height: 70px;
    }

    .header-content > div:nth-child(2) {
        width: 220px;
    }

    .header-content > div:nth-child(3) {
        width: calc(100% - 400px);
    }

        .header-content > div:nth-child(3) > nav {
            width: calc(100% - 130px);
        }

        .header-content > div:nth-child(3) > div {
            width: 130px;
        }

    .mega-menu {
        justify-content: space-evenly;
    }

    .mega-menu-show {
        max-height: 1500px;
    }

    .mega-menu > div {
        width: 45%;
        margin: 20px 0 0 0 !important;
        max-width: 1000px;
    }

    .mega-menu-sub-head > img {
        height: 76px;
        margin: 0;
    }
}

/* 1080px*/
@media only screen and (max-width:1080px) {
    /* Use most of the width of the screen */
    /*.ShellLogoMenuHome .SectionWrapper  {width:100%;}*/

    /* Panel grid */
    .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article {
        width: 31%;
        margin: 0 1% 14px 1%;
    }

    .landing-page-40-responsive {
        width: 100%;
    }

    .landing-page-60-responsive {
        width: 100%;
    }
}

/* 1000px*/
@media only screen and ( max-width:1000px) {

    /* Logo / header rows. Smaller for smaller screen + smaller on scroll */
    .ShellLogoMenuHome, .ShellLogoMenu {
        height: 60px;
        padding: 6px 0;
    }

    .header-content > img, .header-content > a:nth-child(1) > img {
        height: 48px;
    }

    .header-content > div:nth-child(2) {
        display: none;
    }

    .header-content > div:nth-child(3) {
        flex-flow: row-reverse;
        width: calc(100% - 100px);
    }

        .header-content > div:nth-child(3) > nav {
            width: 150px;
            padding: 0 20px 0 0;
            text-align: right;
        }

        .header-content > div:nth-child(3) > div {
            width: calc(100% - 150px);
            text-align: right;
        }

    .btn-nav-startfree {
        padding: 5px 15px;
        font-size: 12px;
        margin: 9px 0 0 0;
    }

    .btn-nav-dashboard {
        margin: 5px 0 0 0;
    }

    /* Menu icon / menu row */
    #nav {
    }

        #nav > a {
            color: #009FDA;
        }

            #nav > a:hover {
                text-decoration: none;
                color: #222;
            }

        #nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {
            display: inline-block;
        }

        #nav .menuicon {
            font-size: 40px;
            line-height: 40px;
            color: #0a454d;
        }

        /* First level */
        #nav > ul {
            display: none;
            position: fixed;
            top: 62px;
            left: 0;
            right: 0;
            border: 0;
            height: auto;
            max-height: 90vh;
            overflow-y: auto;
        }

        #nav:target > ul {
            display: block;
        }

        #nav > ul > li {
            display: block;
            border-bottom: 1px solid #ddd;
        }

            #nav > ul > li:first-child {
                border-top: 1px solid #ddd;
                display: block;
            }

            #nav > ul > li > a {
                padding: 10px 15px;
                font-size: 16px;
                background-color: #fff;
            }

            #nav > ul > li.NavParent > a:after {
                content: "\25BC";
                font-size: 14px;
                color: #888;
                position: absolute;
                top: 8px;
                right: 10px;
            }
            /*  ? = &#9660; = \25BC  || For special chars, convert entity code to CSS hex here: http://www.evotech.net/articles/testjsentities.html */

            /* Second level */
            #nav > ul > li > ul {
                width: 100%;
                position: static;
            }

            #nav > ul > li:hover > ul {
                padding: 5px 0 15px 0;
                border: none;
                border-top: 1px solid #efefef;
            }

            #nav > ul > li > ul > li > a {
                padding: 8px 20px;
                font-size: 14px;
            }

            #nav > ul > li > ul > li.NavParent > a:after {
                content: "\25BC";
                font-size: 12px;
                color: #555;
                position: absolute;
                top: 8px;
                right: 20px;
            }
            /*  ? = &#9660; = \25BC  || For special chars, convert entity code to CSS hex here: http://www.evotech.net/articles/testjsentities.html */

            /* Third level */
            #nav > ul > li > ul > li > ul {
                width: 100%;
                position: static;
            }

            #nav > ul > li > ul > li:hover > ul {
                padding: 5px 0 15px 0;
                border: none;
                border-top: 1px solid #efefef;
                max-height: 800px;
            }

            #nav > ul > li > ul > li > ul > li > a {
                padding: 8px 25px;
                font-size: 12px;
            }

    .HdrSmaller .btn-nav-startfree {
        padding: 4px 8px;
        font-size: 12px;
        margin: 8px 0 0 0;
    }

    .HdrSmaller .btn-nav-dashboard {
        margin: 4px 0 0 0;
    }

    .HdrSmaller #nav {
        top: 0;
    }

    .HdrSmaller .menuicon {
        margin: 0 10px 0 0;
    }

    .HdrSmaller #nav > ul {
        top: 46px;
    }

        .HdrSmaller #nav > ul > li > a {
            padding: 7px 20px;
        }

    .FormSetHor > div > div:nth-of-type(1), .FormSetHor > section > div > div:nth-of-type(1), .FormSetFilter > div > div:nth-of-type(1) {
        width: 100%;
        display: block;
        padding: 0 0 3px 0;
    }

    .FormSetHor > div > div:nth-of-type(2), .FormSetHor > section > div > div:nth-of-type(2), .FormSetFilter > div > div:nth-of-type(2) {
        width: 100%;
        display: block;
        padding: 0 0 5px 0;
    }

    .PriceType1 {
        float: left;
        width: 98%;
        margin: 30px 1%;
    }

    .PriceType2 {
        float: left;
        width: 98%;
        margin: 30px 1%;
    }

    .PriceBox {
        width: 47%;
        margin: 30px 1%;
    }

    .GetStartedLink {
        display: none;
    }

    .ResponsiveCellLeft55 {
        width: 100%;
    }

    .ResponsiveCellLeft50 {
        width: 100%;
    }

    .ResponsiveCellLeft60 {
        width: 80%;
    }

    .ResponsiveCellLeft45 {
        width: 100%;
    }

    .ResponsiveCellLeft40 {
        width: 20%;
    }

    .Pricing_span_1_of_5 {
        width: 48%;
    }

    .Pricing_col {
        margin: 1% 1% 1% 1%;
    }
}

/* 900px */
@media only screen and (max-width:900px) {
    .PDsystemCol1 {
        width: 100%;
    }

    .PDsystemCol2 {
        display: none;
    }

    .pdsys-grid-container {
        grid-template-columns: 1fr;
    }

    .pdsys-item-content {
        flex-direction: column;
    }

    .pdsys-item-image {
        margin-bottom: 0;
    }

        .pdsys-item-image img {
            margin: 10px;
        }

    .pdsys-item-text {
        flex-direction: column;
    }

    .pdsys-features-panel {
        padding-left: 0;
        margin-top: 0;
    }

    .pdsys-text-content {
        margin-right: 20px;
    }

    .related-list {
        flex-direction: column;
        align-items: center;
    }

    .landing-page-Width40-responsive {
        width: 100%;
    }

    .landing-page-Width60-responsive {
        width: 100%;
    }
}

/* 800px A new responsive break point introduced by Jim - 9 Sep 2024 */
@media only screen and (max-width:800px) {
    .Show800 {
        display: block;
    }

    .Hide800 {
        display: none;
    }
}


/* 768px */
@media only screen and (max-width:768px) {
    .PanelItemGrid3Col > article, .PanelItemGrid3ColNarrow > article, .PanelItemGrid3ColDownloads > article, .PanelItemGrid3ColVideo > article, .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article {
        width: 48%;
        margin: 0 1% 14px 1%;
    }

    .FloatRightImage {
        float: none !important;
        margin: 30px 0 !important;
    }

    .FloatLeftImage {
        float: none !important;
        margin: 30px 0 !important;
    }

    .CaptionRight {
        width: 100%;
        float: none;
        margin: 20px auto;
    }

    .OuterShadowBox {
        width: 98%;
    }

    .FooterNavText {
        text-align: center;
        line-height: 26px !important; /*border-bottom:1px solid #666;*/
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .MenuBotL1 {
        text-align: center;
    }

    .MenuBotL2 {
        text-align: center;
    }

    .ShellFooter hr {
        border-top-width: 1px;
        border-top-style: solid;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        border-top-color: #fff;
        margin-right: 0px;
        margin-left: 0px;
        text-align: center;
    }

    .ShellFooter img {
        margin: 20px auto;
    }

    .FooterSocialIcons {
        float: none;
    }

    .HeroPanel {
        width: 70% !important;
        margin: 50px auto;
        float: none !important;
    }

    .span_1_of_4Footer {
        width: 100%;
    }

    .span_1_of_3Footer {
        width: 100%;
    }

    .SearchPanelCol1 {
        float: left;
        width: auto;
    }

    /* Pricing Table at Narrow Width */

    .PricingTable th {
        border-bottom: 2px solid #00a2a9;
        padding: 10px 3px 10px 3px;
        font-size: 11px;
        line-height: 15px;
    }


    .PricingTableCol1 {
        display: none;
    }

    .PricingTableCol2 {
        width: 60%;
        font-size: 14px;
        line-height: 17px;
    }

    .PricingTableCol3 {
        width: 20%;
        text-align: center;
    }
    /* Ticks */
    .PricingTableCol4 {
        width: 20%;
        text-align: center;
    }
    /* Ticks */

    /* Specs Table Link */
    .RegisterLinkSpecs {
        text-align: center;
        font-weight: 400;
        padding: 8px 15px;
        font-size: 14px;
        line-height: 14px;
        display: block;
        border-radius: 4px;
        z-index: 10009;
        background-color: #ff9c2b;
        margin: 10px auto;
    }

    a.RegisterLinkSpecs:link, a.RegisterLinkSpecs:visited {
        text-decoration: none;
        color: #fff;
    }

    a.RegisterLinkSpecs:hover, a.RegisterLinkSpecs:active {
        text-decoration: none;
        color: #ff9c2b;
        background-color: #0a454d;
        transition: all 0.3s ease;
    }


    .Width35Responsive {
        width: 100%;
    }

    .Width40Responsive {
        width: 100%;
    }

    .Width45Responsive {
        width: 100%;
    }

    .Width50Responsive {
        width: 100%;
    }

    .Width55Responsive {
        width: 100%;
    }

    .Width60Responsive {
        width: 100%;
    }

    .Width65Responsive {
        width: 100%;
    }

    .Width70Responsive {
        width: 100%;
    }

    .Width75Responsive {
        width: 100%;
    }

    .Width80Responsive {
        width: 100%;
    }

    .PDListCol1 {
        width: 70%;
    }

    .PDListCol2 {
        width: 30%;
    }

    .ContactPanel {
        padding: 40px 0;
    }

    .PDsysFeaturesPanel {
        padding: 40px 0;
    }


    .section-info-top-banner > div {
        padding: 20px 20px 30px 20px;
    }

        .section-info-top-banner > div > div {
            display: none;
        }

    .section-info-2col-alternating {
        margin-top: 20px;
    }

        .section-info-2col-alternating > article:nth-of-type(even) > div {
            flex-direction: column;
        }

        .section-info-2col-alternating > article > div {
            flex-direction: column;
            padding: 0 20px;
        }

            .section-info-2col-alternating > article > div > div {
                width: 100%;
            }

    .section-info-read-more > div {
        flex-direction: column;
        padding: 20px;
    }

        .section-info-read-more > div > div {
            width: 100%;
        }
}

/* 720px*/
@media only screen and (max-width:720px) {
    .FormWidthLong {
        width: 100px;
    }

    .PriceBox {
        width: 98%;
        margin: 20px 1%;
    }

    .ShellContentStd {
        padding: 0;
    }

    .PDsystemSubNav {
        display: none;
    }

    .PDsystemSnapshotCol1 {
        width: 35%;
    }

    .PDsystemSnapshotCol2 {
        width: 65%;
    }

    .subscription-panel-pdsystem tr:nth-child(n+2):nth-child(-n+9) th:first-of-type, .subscription-panel-pdsystem tr:nth-child(n+2):nth-child(-n+9) td:first-of-type {
        display: none;
    }

    .subscription-panel-pdsystem > table tr > th:nth-of-type(1) {
        width: 50%;
    }

    .subscription-panel-pdsystem > table tr > th:nth-of-type(2) {
        width: 50%;
    }
}

/* 640px */
@media only screen and (max-width:640px) {

    h1 {
        font-size: 32px;
        line-height: 40px;
    }

    h2 {
        font-size: 26px;
        line-height: 30px;
        font-weight: 700;
        color: #1f2533;
        margin: 24px 0px 10px 0px;
    }

    h3 {
        font-size: 19px;
        line-height: 24px;
        font-weight: 500;
        color: #1f2533;
        margin: 18px 0px 8px 0px;
    }

    h4 {
        font-size: 19px;
        line-height: 21px;
        font-weight: 500;
        color: #1f2533;
        margin: 20px 0px 2px 0px;
    }

    h5 {
        font-size: 12px;
        line-height: 16px;
        font-weight: bold;
        color: #1f2533;
        margin: 10px 0px 2px 0px;
    }

    h6 {
        font-size: 12px;
        line-height: 16px;
        font-weight: bold;
        color: #1f2533;
        margin: 10px 0px 2px 0px;
    }

    .header-content > div:nth-child(3) > nav {
        width: 75px;
    }

    .header-content > div:nth-child(3) > div {
        width: calc(100% - 100px);
    }

    .btn-nav-startfree {
        padding: 4px 8px;
        font-size: 12px;
        margin: 12px 0 0 0;
    }

    .btn-nav-dashboard {
        margin: 6px 0 0 0;
    }


    #nav .menuicon {
        margin: 3px 10px 3px 0;
    }

    .HdrSmaller #nav .menuicon {
        margin: 0 10px 0 0;
    }

    .PanelItemGrid > article > a > div {
        height: auto;
    }

    .PanelItemGrid3Col > article, .PanelItemGrid3ColNarrow > article, .PanelItemGrid3ColVideo > article, .PanelItemGrid3ColDownloads > article, .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article {
        width: 98%;
        float: none;
        margin: 0 auto 10px auto;
    }

        .PanelItemGrid4ColProds > article > a > div {
            padding-bottom: 60px;
        }
        /* Give white space for the layered, bottom positioned 'Buy Now' button, now the height changes to auto. */
        .PanelItemGrid4ColImages > article .ImgInfo {
            top: 100%;
        }

    /* Control images when they have more space to display */
    .responsive-image img {
        height: auto !important;
        max-width: 80% !important;
        width: 80% !important;
    }

    /* Navigation */
    .cNavSub {
        display: none;
    }

    .streamSWEETLogo {
        float: none;
        margin: 10px auto !important;
    }

    /* Position the flydown login panel for smaller screens  */
    .PanelLoginCont {
        right: 5vw;
    }

    .DashboardShell {
        width: 100%;
    }

    .AlignRightImage {
        float: none;
        margin: 0 auto;
    }


    /* Grid Column Handling */
    .col {
        margin: 1% 0 1% 0%;
    }

    .span_2_of_2 {
        width: 100%;
    }

    .span_1_of_2 {
        width: 100%;
    }

    .span_3_of_3 {
        width: 100%;
    }

    .span_2_of_3 {
        width: 100%;
    }

    .span_1_of_3 {
        width: 100%;
    }

    .span_4_of_4 {
        width: 100%;
    }

    .span_3_of_4 {
        width: 100%;
    }

    .span_2_of_4 {
        width: 100%;
    }

    .span_1_of_4 {
        width: 100%;
    }

    .span_5_of_5 {
        width: 100%;
    }

    .span_4_of_5 {
        width: 100%;
    }

    .span_3_of_5 {
        width: 100%;
    }

    .span_2_of_5 {
        width: 100%;
    }

    .span_1_of_5 {
        width: 100%;
    }

    .span_6_of_6 {
        width: 100%;
    }

    .span_5_of_6 {
        width: 100%;
    }

    .span_4_of_6 {
        width: 100%;
    }

    .span_3_of_6 {
        width: 100%;
    }

    .span_2_of_6 {
        width: 100%;
    }

    .span_1_of_6 {
        width: 100%;
    }

    .span_7_of_7 {
        width: 100%;
    }

    .span_6_of_7 {
        width: 100%;
    }

    .span_5_of_7 {
        width: 100%;
    }

    .span_4_of_7 {
        width: 100%;
    }

    .span_3_of_7 {
        width: 100%;
    }

    .span_2_of_7 {
        width: 100%;
    }

    .span_1_of_7 {
        width: 100%;
    }

    .span_8_of_8 {
        width: 100%;
    }

    .span_7_of_8 {
        width: 100%;
    }

    .span_6_of_8 {
        width: 100%;
    }

    .span_5_of_8 {
        width: 100%;
    }

    .span_4_of_8 {
        width: 100%;
    }

    .span_3_of_8 {
        width: 100%;
    }

    .span_2_of_8 {
        width: 100%;
    }

    .span_1_of_8 {
        width: 100%;
    }

    .span_9_of_9 {
        width: 100%;
    }

    .span_8_of_9 {
        width: 100%;
    }

    .span_7_of_9 {
        width: 100%;
    }

    .span_6_of_9 {
        width: 100%;
    }

    .span_5_of_9 {
        width: 100%;
    }

    .span_4_of_9 {
        width: 100%;
    }

    .span_3_of_9 {
        width: 100%;
    }

    .span_2_of_9 {
        width: 100%;
    }

    .span_1_of_9 {
        width: 100%;
    }

    .span_10_of_10 {
        width: 100%;
    }

    .span_9_of_10 {
        width: 100%;
    }

    .span_8_of_10 {
        width: 100%;
    }

    .span_7_of_10 {
        width: 100%;
    }

    .span_6_of_10 {
        width: 100%;
    }

    .span_5_of_10 {
        width: 100%;
    }

    .span_4_of_10 {
        width: 100%;
    }

    .span_3_of_10 {
        width: 100%;
    }

    .span_2_of_10 {
        width: 100%;
    }

    .span_1_of_10 {
        width: 100%;
    }

    .span_11_of_11 {
        width: 100%;
    }

    .span_10_of_11 {
        width: 100%;
    }

    .span_9_of_11 {
        width: 100%;
    }

    .span_8_of_11 {
        width: 100%;
    }

    .span_7_of_11 {
        width: 100%;
    }

    .span_6_of_11 {
        width: 100%;
    }

    .span_5_of_11 {
        width: 100%;
    }

    .span_4_of_11 {
        width: 100%;
    }

    .span_3_of_11 {
        width: 100%;
    }

    .span_2_of_11 {
        width: 100%;
    }

    .span_1_of_11 {
        width: 100%;
    }

    .span_12_of_12 {
        width: 100%;
    }

    .span_11_of_12 {
        width: 100%;
    }

    .span_10_of_12 {
        width: 100%;
    }

    .span_9_of_12 {
        width: 100%;
    }

    .span_8_of_12 {
        width: 100%;
    }

    .span_7_of_12 {
        width: 100%;
    }

    .span_6_of_12 {
        width: 100%;
    }

    .span_5_of_12 {
        width: 100%;
    }

    .span_4_of_12 {
        width: 100%;
    }

    .span_3_of_12 {
        width: 100%;
    }

    .span_2_of_12 {
        width: 100%;
    }

    .span_1_of_12 {
        width: 100%;
    }

    .ForumAvatar {
        width: 128px;
        height: 128px;
        margin: 10px auto;
    }
}

/* 480px */
@media only screen and (max-width:480px) {
}





/*MegaMenu*/
.megamenu .NavParent a {
    -webkit-transition: color 0.2s linear, background 0.2s linear;
    -moz-transition: color 0.2s linear, background 0.2s linear;
    -o-transition: color 0.2s linear, background 0.2s linear;
    transition: color 0.2s linear, background 0.2s linear;
}

.megamenu .submenu > ul {
    max-width: 1000px;
    background: white;
    margin: 0px auto !important; /*-webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;*/
}

.megamenu .NavParent > .submenu {
    display: none;
    background: #fff !important;
    position: fixed;
    top: 115px;
    left: 0px;
    margin: 0px auto;
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 20px 0px 10px 0px;
}
/*.megamenu .NavParent {*/
.megamenu ul.links > li {
    background-color: #f5f6f8;
    border-radius: 5px 5px 0px 0px;
    margin-right: 10px;
}

    .megamenu ul.links > li:hover {
        background-color: #fff;
        border-radius: 5px 5px 0px 0px;
    }

.megamenu .NavParent:hover > .submenu {
    display: inline-block;
}

.megamenu .NavParent a:hover > .submenu {
    display: inline-block;
}

.NavChild > a {
    font-size: 20px;
    padding-bottom: 10px;
}

li.NavChild {
    width: 32%;
    display: block;
    float: left;
    background: #fff;
}

.ShellLogoMenuLoggedin .LogoMain {
    height: 60px;
    top: -3px;
}

.megamenu ul.links > li > a {
    padding: 21px 20px !important;
    text-transform: uppercase;
}

.submenucol ul li.NavSubChild a {
    padding-top: 10px;
}

    .submenucol ul li.NavSubChild a:hover {
        font-weight: bold;
    }

.submenucol ul li.NavSubChild {
    height: 38px;
    margin-bottom: 10px;
    overflow: hidden;
    padding-left: 45px;
}
    /*Mega Menu Icons */
    .submenucol ul li.NavSubChild.catid12909 {
        background: url(/ImagesCust/imagescont/CMS/Menu/icon_conference.svg) no-repeat;
    }

    .submenucol ul li.NavSubChild.catid12910 {
        background: url(/ImagesCust/imagescont/CMS/Menu/icon_meettings.svg) no-repeat;
    }

    .submenucol ul li.NavSubChild.catid11907 {
        background: url(/ImagesCust/imagescont/CMS/Menu/icon_reading_general.svg) no-repeat;
    }

    .submenucol ul li.NavSubChild.catid11908 {
        background: url(/ImagesCust/imagescont/CMS/Menu/icon_books.svg) no-repeat;
    }

    .submenucol ul li.NavSubChild.catid11910 {
        background: url(/ImagesCust/imagescont/CMS/Menu/icon_media.svg) no-repeat;
    }

    .submenucol ul li.NavSubChild.catid12913 {
        background: url(/ImagesCust/imagescont/CMS/Menu/icon_workshop_seminar.svg) no-repeat;
    }

    .submenucol ul li.NavSubChild.catid11915 {
        background: url(/ImagesCust/imagescont/CMS/Menu/icon_online_module.svg) no-repeat;
    }

    .submenucol ul li.NavSubChild.catid11913 {
        background: url(/ImagesCust/imagescont/CMS/Menu/icon_certification.svg) no-repeat;
    }

    .submenucol ul li.NavSubChild.catid11914 {
        background: url(/ImagesCust/imagescont/CMS/Menu/icon_shortcourse.svg) no-repeat;
    }

    .submenucol ul li.NavSubChild.catid11911 {
        background: url(/ImagesCust/imagescont/CMS/Menu/icon_publishing.svg) no-repeat;
    }

    .submenucol ul li.NavSubChild.catid11912 {
        background: url(/ImagesCust/imagescont/CMS/Menu/icon_teach_present.svg) no-repeat;
    }

/*Cost Calculator*/
.cost-calculator {
    margin: 20px;
    padding: 10px 10px 20px 10px;
    border-radius: 8px;
    background-color: #dfe4f0;
}

    .cost-calculator table {
        width: 90%;
        margin: 0 auto;
    }

    .cost-calculator .title {
        text-align: center;
        font-weight: bold;
        font-size: 15px;
        padding: 15px 0 0 0;
    }

    .cost-calculator .currency {
        text-align: center;
        font-size: 13px;
        padding: 0 0 15px 0;
    }

    .cost-calculator .jsStaffNumber {
        font-size: 15px;
        font-weight: bold;
        width: 60px;
        padding: 3px;
    }

    .cost-calculator .left-column {
        padding: 4px 0 4px 0;
        width: 50%;
        font-size: 13px;
    }

    .cost-calculator .right-column {
        padding: 4px 0 4px 0;
        font-size: 13px;
    }

/* TELERIK RAD WINDOW Transparency overrides */
div.RadWindow.RadWindow_Stream .rwCorner,
div.RadWindow.RadWindow_Stream .rwTitlebar,
div.RadWindow.RadWindow_Stream .rwStatusbarRow,
div.RadWindow.RadWindow_Stream .rwFooterCenter 
{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity:100; -moz-opacity:100; display:none; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}

div.RadWindow.RadWindow_Stream .rwTitlebar .rwIcon	{display:none;}

div.RadWindow.RadWindow_Stream .rwWindowContent div	{width:100%;}

div.RadWindow.RadWindow_Stream .rwWindowContent .CloseButton	{margin-right:5px;}
div.RadWindow.RadWindow_Stream	{background-color:#ced7e5; border-width:3px; border-style:solid; border-color:#5176B5; padding:3px;}

/* RadEditor Overrides */
.RadEditor	{height:100%;}

/* RadToolTip Overrides */
div.RadToolTip_ImagePopup .rtWrapperTopLeft,
div.RadToolTip_ImagePopup .rtWrapperTopCenter,
div.RadToolTip_ImagePopup .rtWrapperTopRight,
div.RadToolTip_ImagePopup .rtWrapperLeftMiddle,
div.RadToolTip_ImagePopup .rtWrapperRightMiddle,
div.RadToolTip_ImagePopup .rtWrapperBottomLeft,
div.RadToolTip_ImagePopup .rtWrapperBottomCenter,
div.RadToolTip_ImagePopup .rtWrapperBottomRight
{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity:100; -moz-opacity:100; display:none; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}