/* ---m--- Capita: Brand Font for Web Use ---s--- */

/* font-family: Capita, Neuton, "Sitka Text", Georgia, serif; */

@font-face {
    font-family: "Capita";
    src: url("https://cdn.hslda.org/fonts/capita/CapitaXLig-webfont.eot");
    src: url("https://cdn.hslda.org/fonts/capita/CapitaXLig-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/capita/CapitaXLig-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/capita/CapitaXLig-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/capita/CapitaXLig-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/capita/CapitaXLig-webfont.svg#capitaextralight") format("svg");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Capita";
    src: url("https://cdn.hslda.org/fonts/capita/CapitaXLigIta-webfont.eot");
    src: url("https://cdn.hslda.org/fonts/capita/CapitaXLigIta-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/capita/CapitaXLigIta-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/capita/CapitaXLigIta-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/capita/CapitaXLigIta-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/capita/CapitaXLigIta-webfont.svg#capitaextralight_italic") format("svg");
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: "Capita";
    src: url("https://cdn.hslda.org/fonts/capita/CapitaLig-webfont.eot");
    src: url("https://cdn.hslda.org/fonts/capita/CapitaLig-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/capita/CapitaLig-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/capita/CapitaLig-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/capita/CapitaLig-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/capita/CapitaLig-webfont.svg#capitalight") format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Capita";
    src: url("https://cdn.hslda.org/fonts/capita/CapitaLigIta-webfont.eot");
    src: url("https://cdn.hslda.org/fonts/capita/CapitaLigIta-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/capita/CapitaLigIta-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/capita/CapitaLigIta-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/capita/CapitaLigIta-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/capita/CapitaLigIta-webfont.svg#capitalight_italic") format("svg");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Capita";
    src: url("https://cdn.hslda.org/fonts/capita/CapitaMed-webfont.eot");
    src: url("https://cdn.hslda.org/fonts/capita/CapitaMed-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/capita/CapitaMed-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/capita/CapitaMed-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/capita/CapitaMed-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/capita/CapitaMed-webfont.svg#capitamedium") format("svg");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Capita";
    src: url("https://cdn.hslda.org/fonts/capita/CapitaMedIta-webfont.eot");
    src: url("https://cdn.hslda.org/fonts/capita/CapitaMedIta-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/capita/CapitaMedIta-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/capita/CapitaMedIta-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/capita/CapitaMedIta-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/capita/CapitaMedIta-webfont.svg#capitamedium_italic") format("svg");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Capita";
    src: url("https://cdn.hslda.org/fonts/capita/CapitaBol-webfont.eot");
    src: url("https://cdn.hslda.org/fonts/capita/CapitaBol-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/capita/CapitaBol-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/capita/CapitaBol-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/capita/CapitaBol-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/capita/CapitaBol-webfont.svg#capitabold") format("svg");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Capita";
    src: url("https://cdn.hslda.org/fonts/capita/CapitaBolIta-webfont.eot");
    src: url("https://cdn.hslda.org/fonts/capita/CapitaBolIta-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/capita/CapitaBolIta-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/capita/CapitaBolIta-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/capita/CapitaBolIta-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/capita/CapitaBolIta-webfont.svg#capitabold_italic") format("svg");
    font-weight: 700;
    font-style: italic;
}

/* ---m--- Foro Sans: Brand Font for Web Use ---s--- */

/* font-family: "Foro Sans", Roboto, Corbel, Verdana, sans-serif; */

@font-face {
    font-family: "Foro Sans";
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosansxlig-webfont.eot?#iefix");
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosansxlig-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxlig-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxlig-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxlig-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxlig-webfont.svg#foro_sansextralight") format("svg");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Foro Sans";
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosansxligita-webfont.eot?#iefix");
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosansxligita-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxligita-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxligita-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxligita-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxligita-webfont.svg#foro_sansextralight_italic") format("svg");
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: "Foro Sans";
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosanslig-webfont.eot?#iefix");
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosanslig-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/foro-sans/forosanslig-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/foro-sans/forosanslig-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/foro-sans/forosanslig-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/foro-sans/forosanslig-webfont.svg#foro_sanslight") format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Foro Sans";
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosansligita-webfont.eot?#iefix");
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosansligita-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/foro-sans/forosansligita-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/foro-sans/forosansligita-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/foro-sans/forosansligita-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/foro-sans/forosansligita-webfont.svg#foro_sanslight_italic") format("svg");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Foro Sans";
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosansmed-webfont.eot?#iefix");
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosansmed-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/foro-sans/forosansmed-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/foro-sans/forosansmed-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/foro-sans/forosansmed-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/foro-sans/forosansmed-webfont.svg#foro_sansmedium") format("svg");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Foro Sans";
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosansmedita-webfont.eot?#iefix");
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosansmedita-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/foro-sans/forosansmedita-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/foro-sans/forosansmedita-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/foro-sans/forosansmedita-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/foro-sans/forosansmedita-webfont.svg#foro_sansmedium_italic") format("svg");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Foro Sans";
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosansxbol-webfont.eot?#iefix");
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosansxbol-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxbol-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxbol-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxbol-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxbol-webfont.svg#foro_sansextrabold") format("svg");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Foro Sans";
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosansxbolita-webfont.eot?#iefix");
    src: url("https://cdn.hslda.org/fonts/foro-sans/forosansxbolita-webfont.eot?#iefix") format("eot"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxbolita-webfont.woff2") format("woff2"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxbolita-webfont.woff") format("woff"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxbolita-webfont.ttf") format("truetype"), url("https://cdn.hslda.org/fonts/foro-sans/forosansxbolita-webfont.svg#foro_sansextrabold_italic") format("svg");
    font-weight: 700;
    font-style: italic;
}

html {
    box-sizing: border-box;
    overflow: hidden;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

html,
body {
    height: 100%;
    width: 100%;
    margin: 0px;
    font-family: "Foro Sans", Roboto, Corbel, Verdana, sans-serif;
    background-color: #ECF3F5;
}

ul {
    list-style: none;
    padding: 0;
}

    ul.dialogMessage {
    }

h1 {
    font-size: 28px;
    font-weight: 400;
    margin: 10px 0 5px;
}

h2 {
    font-family: Capita, Neuton, "Sitka Text", Georgia, serif;
    font-size: 24px;
    font-weight: 500;
    color: #00587C;
    margin: 20px 0 10px 0;
}

h4 {
    font-size: 15px;
    margin: 0 0 3px;
}

p {
    font-family: Capita, Neuton, "Sitka Text", Georgia, serif;
    font-size: 16px;
    line-height: 22px;
    color: #333333;
}

strong {
    font-weight: 600;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-X: hidden;
}

.stepContainer {
    position: relative;
    height: 100%;
}

.panel {
    height: 100%;
    width: 100%;
    position: absolute;
    transform: none;
    transition: transform .233s cubic-bezier(0, 0, .21, 1);
    will-change: transform;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #ECF3F5;
}

    .panel.hideLeft {
        transform: translateX(-100%);
    }

    .panel.hideRight {
        transform: translateX(100%);
    }

.hideRight > .panelInner, .hideRight > .panelWrap > .panelInner {
    display: none;
}

.panelInner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.title {
    color: #000;
    max-width: 360px;
    margin: 0 auto;
    padding: 24px 0;
}

.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-end {
    justify-content: flex-end;
}

.margin-bottom {
    margin-bottom: 10px;
}

.margin-bottom-more {
    margin-bottom: 20px;
}

.margin-top {
    margin-top: 10px;
}

.margin-top-more {
    margin-top: 25px;
}

.margin-right {
    margin-right: 10px;
}

.radio-wrapper.margin-right {
    margin-right: 5px;
}

.flex-form {
    display: flex;
    flex-wrap: wrap;
}

    .flex-form.gift-membership-code {
        margin-top: 0;
    }

    .flex-form > div {
        margin-right: 2%;
    }

    .flex-form > .checker {
        margin-right: 1%;
    }

    .flex-form > div:last-child {
        margin-right: 0;
    }

li.flex-form, .form-list li.flex-form {
    margin: 0;
}

.flex-form .grow {
    flex-grow: 1;
    margin-bottom: 10px;
}

    .flex-form .grow.internationalAddress {
        width: 100%;
        margin-bottom: 10px;
        margin-right: 0;
    }

.flex-form .k-numerictextbox {
    width: 100%;
}

.title-drop {
    width: 100px;
}

.form {
    /*    max-width: 360px;*/
    width: 100%;
    margin: 0 auto;
    padding: 10px;
}

    .form .label {
        font-size: 14px;
        font-weight: 600;
        color: #373e42;
        display: block;
        line-height: 17px;
        margin: 3px 0 3px;
    }

        .form .label.question {
            font-size: 15px;
            font-weight: 600;
            margin-top: 20px;
        }

        .form .label.description {
            font-weight: 400;
            color: #000;
        }

    .form input[type="email"] {
        height: 42px;
        background-color: #fff;
        border: 1px solid #bebd9a;
        border-radius: 3px;
        display: block;
        width: 100%;
    }

    .form input {
        height: 42px;
        font-family: "Foro Sans", Roboto, Corbel, Verdana, sans-serif;
        font-size: 18px;
        font-weight: 400;
        background-color: #fff;
        border: 1px solid #B4B9BB !important;
        border-radius: 3px;
        display: block;
        width: 100%;
        padding: 6px 8px;
        color: #000;
    }

        .form input[disabled] {
            background-color: transparent;
            color: #999;
            /*-webkit-text-fill-color: #000 !important; is being set in ApplicationWizard.ascx*/
        }

::-webkit-input-placeholder {
    color: #999;
}
/* Webkit */
:-moz-placeholder {
    color: #999;
}
/* Firefox <= 18 */
::-moz-placeholder {
    color: #999;
}
/* Firefox >= 19 */
:-ms-input-placeholder {
    color: #999;
}
/* Internet Explorer */

.form textarea {
    min-height: 110px;
    font-family: "Foro Sans", Roboto, Corbel, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 400;
    background-color: #fff;
    border: 1px solid #B4B9BB;
    border-radius: 3px;
    display: block;
    width: 100%;
    padding: 6px 8px;
    color: #000;
}

.form button.actionButton {
    width: 42px;
    height: 42px;
    position: absolute;
    right: 2%;
    border-radius: 100%;
}

.form button {
    width: 100%;
    height: 48px;
    margin: 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background-color: #00587C;
    border: 1px solid #00587C;
    border-radius: 32px;
    cursor: pointer;
    transition: background-color 0.3s, border 0.3s;
    will-change: background-color, border;
}

    .form button:hover {
        background-color: #40829D;
        border-color: #40829D;
    }

    .form button.link {
        background: none;
        height: auto;
        width: auto;
        text-transform: none;
        text-decoration: underline;
        border-radius: 0;
        box-shadow: none;
        color: #22A0D6;
        font-size: inherit;
        font-weight: inherit;
        margin: 0;
        padding: 0;
        border: none;
    }

        .form button.link:hover {
            background: none;
            box-shadow: none;
            text-decoration: underline;
        }

.termsHeader {
    background: #182e4b;
    padding: 5px 20px;
}

.form.terms {
    background: #ffffff;
    margin: 0;
}

    .form.terms .pop-content {
        padding: 0 20px 20px;
    }

.hero-image-wrapper {
    margin: 0px 20px;
}

    .hero-image-wrapper > div {
        margin-left: 0px;
    }

    .hero-image-wrapper img {
        width: 100%;
    }

.printable-application-links {
    text-align: right;
    display: inherit;
}

.welcome-screen-text {
    margin: 0 30px;
}

    .welcome-screen-text > p {
        font-family: "Foro Sans", Roboto, Corbel, Verdana, sans-serif;
        font-size: 17px;
        font-weight: 400;
        line-height: 22px;
        margin-bottom: 0.75em;
    }

    .welcome-screen-text .membership-pricing p,
    .welcome-screen-text .frequently-asked-questions p {
        font-size: 16px;
        font-weight: normal;
        line-height: 22px;
    }

    .welcome-screen-text p a {
        color: #22A0D6;
    }

    .welcome-screen-text .membership-pricing p {
        margin-bottom: 10px;
        font-family: Capita, Neuton, "Sitka Text", Georgia, serif;
    }

.welcome.form {
    padding: 0px 20px 20px;
}

.welcome h2 {
    font-family: "Foro Sans", Roboto, Corbel, Verdana, sans-serif;
    font-weight: 400;
    font-size: 26px;
}

.welcome p {
    font-size: 18px;
    margin: 0.75em 0;
}

.welcome button {
    padding: 16px 10px 35px;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    margin: 20px auto 0;
}

    .welcome button::after {
        content: '';
        width: 20px;
        height: 12px;
        background: url(../images/right-chevron.svg) 50% 50% no-repeat;
        background-size: contain;
        display: inline-block;
        position: relative;
        top: 3px;
        left: 3px;
    }
/* @media (min-width: 600px) {
    .form button {
        display: inline-block;
        width: auto;
        padding: 0 19px;
    }
} */
.expanding-section-title {
    background-image: url('../images/icons/PLUSicon.png');
    background-position: 0px 50%;
    background-size: auto;
    background-repeat: no-repeat;
    color: #22A0D6;
    font-family: Capita, Neuton, "Sitka Text", Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    padding: 6px 0px 6px 30px;
    transition-duration: .4s;
    cursor: pointer;
}

    .expanding-section-title.open {
        background-image: url('../images/icons/MINUSicon.png');
        color: #000000;
    }

.expanding-section {
    max-height: 1500px;
    overflow: hidden;
    transition-duration: 1s;
    padding-left: 30px;
}

    .expanding-section.closed {
        max-height: 0px;
    }

.printable-application-links {
    font-family: "Foro Sans", Roboto, Corbel, Verdana, sans-serif;
    font-size: 13px;
    text-align: right;
    display: inherit;
    margin-bottom: 30px;
}

    .printable-application-links a {
        color: #22A0D6;
    }

.membership-pricing {
    font-family: "Foro Sans", Roboto, Corbel, Verdana, sans-serif;
    font-size: 14px;
}

    .membership-pricing table {
        border-collapse: collapse;
    }

    .membership-pricing tr:nth-child(odd) {
        background-color: #ffffff;
    }

    .membership-pricing tr td:first-child {
        color: #00587C;
        font-weight: 500;
    }

    .membership-pricing tr td {
        padding: 7px 10px;
    }

.expanding-section ul {
    list-style: disc;
    margin-top: 0;
    font-family: Capita, Neuton, "Sitka Text", Georgia, serif;
}

.expanding-section li {
    font-size: 16px;
    line-height: 20px;
    margin: 0 0 4px 20px;
}

.expanding-section span {
    margin-left: 20px;
    font-size: 13px;
    font-style: italic;
    line-height: 35px;
}

.frequently-asked-questions h3 {
    font-family: "Foro Sans", Roboto, Corbel, Verdana, sans-serif;
    font-weight: 500;
    font-size: 17px;
    color: #00587C;
    margin-bottom: -10px;
}

.frequently-asked-questions ul {
    font-family: Capita, Neuton, "Sitka Text", Georgia, serif;
    font-size: 14px;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, .20), rgba(0, 0, 0, 0.1));
    margin: 10px 0px;
}

.form button.no-style {
    background: none;
    border: none;
    color: #22A0D6;
    border-radius: 0;
    box-shadow: none;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    width: auto;
    margin: 0;
    padding: 0;
    height: auto;
}

    .form button.no-style:hover {
        color: #000;
    }

.form button.help {
    border-radius: 50%;
    height: 22px;
    width: 22px;
    display: inline;
    padding: 0;
    margin: -3px 0 0 10px;
}

.checker {
    position: relative;
    top: -2px;
    margin-right: 2px;
}

    .checker .big-check {
        width: 30px;
        height: 30px;
        zoom: .65;
    }

.center-button {
    text-align: center;
}

    .center-button button {
        width: 80%;
        text-align: center;
    }

        .center-button button span:before {
            content: '';
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 5px;
            background: url(../images/lock.svg) 0 0 no-repeat;
            background-size: contain;
            position: relative;
            top: 1px;
        }

button.big {
    padding: 30px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    margin: 0 auto 20px auto;
    background-color: #48AE35;
    border: 1px solid #48AE35;
    transition: background-color 0.3s, border 0.3s;
    will-change: background-color, border;
}

    button.big:hover {
        background-color: #368227;
        border-color: #368227;
    }

    button.big span {
        margin: 0px auto 0px;
        font-family: "Foro Sans", Roboto, Corbel, Verdana, sans-serif;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: none;
    }

.pageTitle {
    position: absolute;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding-top: 35px;
    color: #535353;
}

.pageLabel {
    margin-bottom: 20px;
}

.header-main {
    background: #00587C;
    display: flex;
    padding: 8px 10px;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
    z-index: 1;
}

    .header-main .logo {
        background: url(../images/hslda-logo-5.png) 50% 50% no-repeat;
        background-size: contain;
        width: 35px;
        height: auto;
    }

    .header-main h2, .header-main h6 {
        margin: 0;
    }

    .header-main h2 {
        font-size: 20px;
        line-height: 39px;
        font-weight: 600;
        color: #fff;
        margin-left: 10px;
        font-family: "Foro Sans", Roboto, Corbel, Verdana, sans-serif;
    }

    .header-main a {
        flex-grow: 1;
        text-align: right;
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .header-main h6 {
        color: #fff;
        font-weight: 100;
        font-size: 12px;
        letter-spacing: 0.4px;
        flex-grow: 1;
        margin-right: 4px;
        font-family: Capita, Neuton, "Sitka Text", Georgia, serif;
        font-style: italic;
    }

    .header-main a:after {
        content: '';
        width: 20px;
        height: 18px;
        display: inline-block;
        background: url(../images/message-icon.png) 50% 50% no-repeat;
        background-size: contain;
    }

.wizardHeader {
    display: flex;
    position: relative;
    z-index: 1;
    height: 48px;
    border-bottom: 1px solid #bebd9a;
    padding-top: 8px;
    padding-bottom: 52px;
    background: #ECEFF0;
    -webkit-box-shadow: 0px 5px 20px -5px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 5px 20px -5px rgba(0,0,0,0.35);
    box-shadow: 0px 5px 20px -5px rgba(0,0,0,0.35);
}

.wizardPanels {
    z-index: 2;
    display: flex;
    text-align: center;
    justify-content: center;
    width: 100%;
}

.headerLine {
    position: absolute;
    border-bottom: 1px solid #555;
    width: 100%;
    top: 10px;
    z-index: -1;
}

.headerButton {
    background-color: #B4B9BB;
    border: none;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    padding: 0px 10px;
    width: 28px;
    height: 28px;
    text-align: center;
    border-radius: 50%;
    /* position: absolute; */
    display: flex;
    cursor: default;
    transition: background-color 0.3s cubic-bezier(.25,.8,.25,1),transform 0.3s cubic-bezier(.25,.8,.25,1);
    will-change: transform,background-color;
    margin-left: 11%;
    margin-right: 11%;
    justify-content: center;
    position: relative;
    line-height: 25px;
}

    .headerButton span {
        position: absolute;
        bottom: -18px;
        left: 0;
        right: 0;
        text-align: center;
        color: #555;
        font-size: 13px;
        line-height: 14px;
        font-weight: normal;
        display: block;
        width: 80px;
        margin-left: -33px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

        .headerButton span:before {
            content: "\e61e";
            background: #48AE35;
            border-radius: 50%;
            position: absolute;
            right: calc(50% - 22px);
            top: -19px;
            padding: 5px;
            color: #fff;
            font-family: KendoUIGlyphs;
            speak: none;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            font-size: 1.4em;
            line-height: 1;
            opacity: 1;
            text-indent: 0;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background-image: none;
            font-size: 18px;
            margin-top: -13px;
        }

.wizardHeader .headerButton:first-child span {
    margin-left: -25px;
}

.wizardHeader .headerButton:last-child span {
    margin-left: -25px;
}

.wizardHeader .headerButton span.active {
    margin-left: -35px;
}

.wizardHeader .headerButton:first-child span.active {
    margin-left: -26px;
}

.wizardHeader .headerButton:last-child span.active {
    margin-left: -26px;
}

.wizardHeader .headerButton:first-child span:before,
.wizardHeader .headerButton:last-child span:before {
    right: calc(50% - 14px);
}

.headerButton.inComplete span {
    color: #999890;
}

    .headerButton.inComplete span:before, .headerButton.active span:before {
        display: none;
    }




/*.headerButton.headerLeftish {
		transform: translateX(calc(25vw - 50%));
	}

	.headerButton.headerRightish {
		transform: translateX(calc(75vw - 50%));
	}

	.headerButton.headerHideRight {
		transform: translateX(calc(100vw + 100%));
	}

	.headerButton.headerHideLeft {
		transform: translateX(calc(0vw - 100%));
	}*/

.headerButton.active {
    background-color: #22A0D6;
    color: #fff;
    /*transform: translateX(calc(50vw - 50%));*/
}

.headerButton.complete {
    background-color: #1565C0;
    color: #fff;
}

button:focus {
    outline: 0;
}

.wizardHeader:after {
    content: '';
    border-bottom: 4px solid #B4B9BB;
    display: block;
    width: 50%;
    position: absolute;
    top: 21px;
    left: 50%;
    margin-left: -25%;
}

/*.wizardFooter {
	display: flex;
	justify-content: center;
	background: #1565C0;
	width: 100%;
	height: 65px;
	padding: 20px;
}*/

.wizardFooter {
    display: flex;
    background: #00587C;
    width: 100%;
    height: 55px;
    padding: 7px 0;
    -webkit-box-shadow: 0px -5px 20px -5px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px -5px 20px -5px rgba(0,0,0,0.35);
    box-shadow: 0px -5px 20px -5px rgba(0,0,0,0.35);
}

    .wizardFooter button {
        flex-grow: 1;
        cursor: pointer;
    }

        .wizardFooter button[disabled="disabled"] {
            opacity: 0.3;
            cursor: default;
        }

        .wizardFooter button.forward,
        .wizardFooter button.back {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 16px;
            text-transform: uppercase;
        }

        .wizardFooter button.forward {
            border-left: 1px solid rgba(0,0,0,0.6);
        }

        .wizardFooter button.back {
        }

        .wizardFooter button.forward:after {
            content: '';
            width: 20px;
            height: 12px;
            background: url(../images/right-chevron.svg) 50% 50% no-repeat;
            background-size: contain;
            display: inline-block;
        }

        .wizardFooter button.back:before {
            content: '';
            width: 20px;
            height: 12px;
            background: url(../images/left-chevron.svg) 50% 50% no-repeat;
            background-size: contain;
            display: inline-block;
        }

.footerButton {
    border: none;
    font-weight: 500;
    border-radius: 100%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.5);
    color: #fff;
}

    .footerButton.isNotValid, .footerButton.inComplete {
        background: rgba(255, 255, 255, 0.25);
        color: #1565C0;
    }

    .footerButton.active {
        background-color: #fff;
        color: #1565C0;
    }

footer {
    text-align: center;
    font-size: 12px;
    font-weight: 100;
    padding: 7px 0;
}

    footer span {
        color: #989898;
    }

    footer a {
        color: #1565C0;
    }

.image-wrapper {
    display: flex;
    justify-content: center;
}

.radio-wrapper {
    display: flex;
    position: relative;
    height: 42px;
    margin-top: 6px;
}

    .radio-wrapper label {
        position: relative;
        padding: 0;
        margin: 0;
        display: block;
        cursor: pointer;
    }

    .radio-wrapper .label {
        padding: 0 0 0 14px;
        z-index: 1;
        font-weight: 400;
        font-size: 16px;
        color: #000;
        margin: 4px 0 0px;
    }

    .radio-wrapper .radio {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
    }

        .radio-wrapper .radio input {
            display: none;
        }

        .radio-wrapper .radio span {
            background: #ECEFF0;
            border-color: #B4B9BB;
            border-width: 1px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: none;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

    .radio-wrapper label:first-child .radio span {
        border-left-style: solid !important;
    }


    .radio-wrapper .radio span.checked {
        background: #fff;
    }

    .radio-wrapper label:first-child .radio span {
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
    }

    .radio-wrapper label:last-child .radio span {
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
    }

.form .radio span.checked {
    border-color: #9e9d7a !important;
    border-left-style: solid;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.25);
    z-index: 10;
}

.radio-wrapper .radio.disabled span.checked {
    background-color: #fff;
}

.radio-wrapper .radio.disabled span {
    background-color: #ECF3F5;
    opacity: 0.5;
    cursor: default;
    z-index: 100;
}

.form-list li {
    margin: 11px 0;
    clear: both;
}

    .form-list li:last-child {
        margin: 11px 0 0;
    }

    .form-list li.pageLabel {
        margin-bottom: 23px;
        display: block;
    }

.payments {
    margin: 20px 0 0;
    height: 40px;
    flex-direction: row;
    max-width: 800px;
}

    .payments img {
        width: auto;
        height: 30px;
    }

.payments-routing { /*added by Dd*/
    flex-direction: row;
    justify-content: space-around;
    max-width: 800px;
}

    .payments-routing img {
        width: 100%;
        height: auto;
        max-width: 359px;
    }

.payment-summary {
    background: #fff;
    padding: 10px 15px 0;
    margin: 0;
    position: relative;
    border: 1px solid #fff;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.25);
}

    .payment-summary li {
        margin-bottom: 10px;
    }

    .payment-summary h4 {
        border-bottom: 1px solid #ccc;
        font-size: 16px;
        text-transform: uppercase;
        margin: 5px 0;
        padding-bottom: 3px;
        letter-spacing: 2px;
    }

.total h5 {
    margin: 0 0 0 15px !important;
    font-size: 16px;
}

.subtotal h5 {
    margin: 0 10px 0 0;
    font-size: 16px;
}

.payment-summary .item {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

    .payment-summary .item.flex-end {
        justify-content: flex-end;
    }

    .payment-summary .item.visible {
        display: flex !important;
    }

.payment-summary hr {
    border: none;
    height: 1px;
    background: #ccc;
}

.subtotal {
    justify-content: flex-end;
}

.total h5 {
    font-size: 22px;
}

.thank-you-sign {
    background: url(../images/thank-you.svg) 0 0 no-repeat;
    background-size: contain;
    text-indent: -999999px;
    width: 90px;
    height: 32px;
    overflow: hidden;
    margin-right: -5px;
}

/* Animated spinner widget. Apply to div with spinner class*/
@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.spinner.hide::after,
.spinner.hide::before {
    opacity: 0;
}

.spinner.success::before {
    border: 2px solid #89BA3E;
}

.spinner.success::after {
    transform: rotate(45deg);
    border-right: 2px solid #89BA3E;
    border-bottom: 2px solid #89BA3E;
}

.spinner.fail::after {
    content: "\D7";
    color: red;
    font-size: 20px;
    top: 50%;
    left: 73%;
}

.spinner.fail::before {
    border: 2px solid red;
}

.spinner {
    display: block;
    position: relative;
    width: 30px;
    height: 30px;
    margin: 5px 0px 0px 10px;
}

    .spinner::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        top: 65%;
        left: 85%;
        width: 9px;
        height: 16px;
        margin-top: -15px;
        margin-left: -15px;
        border: 2px solid transparent;
        transition-property: opacity, animation, border;
        transition-duration: .5s;
    }

    .spinner::before {
        content: '';
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        margin-left: -15px;
        border-radius: 50%;
        border: 2px solid transparent;
        border-top-color: #0f5d99;
        animation: spinner .6s linear infinite;
        transition-property: opacity, animation, border;
        transition-duration: .5s;
    }

/* Kendo Overrides */

.ktb-var-accent,
.ktb-var-series-a,
.ktb-var-selected-text-color {
    color: #2e96e5
}

.k-calendar th,
.k-dropzone-hovered,
.k-footer-template td,
.k-grid-footer,
.k-group,
.k-group-footer td,
.k-grouping-header,
.k-pager-wrap,
.k-toolbar,
.k-widget .k-status, .k-widget.k-popup,
.k-grouping-row td,
.k-resize-handle-inner,
td.k-group-cell,
.k-block, .k-button,
.k-draghandle,
.k-grid-header,
.k-grouping-header,
.k-header,
.k-pager-wrap,
.k-toolbar,
.k-treemap-tile,
.km-pane-wrapper .k-header,
.k-calendar th,
.k-pager-wrap,
.k-editor-inline ::-moz-selection,
.k-editor-inline ::selection,
.k-editor-inline ::-moz-selection,
.k-calendar .k-today,
.k-panelbar .k-tabstrip-items .k-state-active,
.k-tabstrip-items .k-state-active,
.k-panelbar .k-grid-toolbar {
    background-color: #2e96e5;
}



    .k-button.k-state-active,
    .k-button:active,
    .k-draghandle.k-state-selected:hover,
    .k-ghost-splitbar-horizontal,
    .k-ghost-splitbar-vertical,
    .k-list > .k-state-highlight,
    .k-list > .k-state-selected,
    .k-marquee-color,
    .k-panel > .k-state-selected,
    .k-scheduler .k-scheduler-toolbar .k-state-selected,
    .k-scheduler .k-today.k-state-selected,
    .k-state-selected,
    .k-state-selected:link,
    .k-state-selected:visited,
    .k-popup > .k-group-header,
    .k-popup > .k-virtual-wrap > .k-group-header,
    .k-popup .k-list .k-item > .k-group,
    .k-marquee-text,
    .k-panelbar > li.k-state-default > .k-link.k-state-selected,
    .k-panelbar > li > .k-state-selected,
    .k-state-selected > .k-link,
    .k-radio:checked + .k-radio-label:after,
    .k-list > .k-state-selected.k-state-focused,
    .k-calendar .k-footer .k-nav-today,
    .k-overflow-container .k-button:focus,
    .k-overflow-container .k-button:focus:not(.k-state-disabled):not([disabled]),
    .k-split-wrapper .k-button:focus,
    .k-split-wrapper .k-button:focus:not(.k-state-disabled):not([disabled]),
    .km-pane-wrapper > .km-pane > .km-view > .km-content,
    .km-pane-wrapper > .km-pane .km-content .k-mobile-list > ul > li > .k-link,
    .k-spreadsheet-filter.k-state-active,
    .k-spreadsheet-formula-list .k-state-focused {
        color: #2e96e5;
    }

.k-autocomplete,
.k-button,
.k-draghandle,
.k-dropdown-wrap,
.k-grid-header,
.k-grouping-header,
.k-header,
.k-numeric-wrap,
.k-pager-wrap,
.k-panelbar .k-tabstrip-items .k-item,
.k-picker-wrap,
.k-progressbar,
.k-state-highlight,
.k-tabstrip-items .k-item, .k-textbox,
.k-toolbar,
.km-pane-wrapper > .km-pane > .km-view > .km-content {
    background-color: #ffffff;
}

    .k-draghandle,
    .k-draghandle:hover,
    .k-overflow-container .k-primary,
    .k-primary,
    .k-checkbox:checked + .k-checkbox-label:before,
    .k-checkbox:indeterminate + .k-checkbox-label:after,
    .k-checkbox:indeterminate:hover + .k-checkbox-label:after,
    .k-gantt-toolbar .k-button,
    .k-gantt > .k-header .k-link,
    .k-gantt > .k-header li,
    .k-grid .k-header .k-button,
    .k-scheduler .k-header .k-button,
    .k-scheduler .k-header .k-link,
    .k-scheduler .k-header li,
    .km-pane-wrapper .k-header .k-button,
    .k-gantt-toolbar .k-button,
    .k-scheduler .k-scheduler-toolbar .k-state-selected,
    .k-scheduler .k-scheduler-toolbar ul li.k-state-hover,
    .k-splitbar.k-state-focused,
    .k-state-selected .k-task-summary-complete,
    .k-state-selected.k-task-milestone,
    .k-task-milestone,
    .k-task-summary-complete,
    .k-progressbar .k-state-selected,
    .k-slider-selection,
    .k-flatcolorpicker .k-hue-slider .k-draghandle,
    .k-flatcolorpicker .k-transparency-slider .k-draghandle,
    .k-flatcolorpicker .k-hue-slider .k-draghandle:hover,
    .k-flatcolorpicker .k-transparency-slider .k-draghandle:hover,
    .k-draghandle.k-state-focused,
    .k-draghandle.k-state-focused:link,
    .k-flatcolorpicker .k-hue-slider .k-draghandle.k-state-focused,
    .k-flatcolorpicker .k-transparency-slider .k-draghandle.k-state-focused {
        border-color: #2e96e5;
        background-color: #2e96e5;
    }

.k-checkbox:indeterminate + .k-checkbox-label:before,
.k-radio:checked + .k-radio-label:before,
.k-radio:checked + .k-radio-label:hover:before,
.k-series-a {
    border-color: #2e96e5;
}

.k-ff .k-pager-numbers.k-state-expanded,
.k-ff .k-scheduler-toolbar > ul.k-scheduler-views.k-state-expanded,
.k-ie11 .k-pager-numbers.k-state-expanded,
.k-ie11 .k-scheduler-toolbar > ul.k-scheduler-views.k-state-expanded,
.k-safari .k-pager-numbers.k-state-expanded,
.k-safari .k-scheduler-toolbar > ul.k-scheduler-views.k-state-expanded,
.k-webkit .k-pager-numbers.k-state-expanded,
.k-webkit .k-scheduler-toolbar > ul.k-scheduler-views.k-state-expanded,
.k-ff .k-scheduler-toolbar > ul.k-scheduler-views.k-state-expanded,
.k-ie11 .k-scheduler-toolbar > ul.k-scheduler-views.k-state-expanded, .k-safari .k-scheduler-toolbar > ul.k-scheduler-views.k-state-expanded,
.k-webkit .k-scheduler-toolbar > ul.k-scheduler-views.k-state-expanded,
.k-chart .k-handle,
.k-spreadsheet-window .k-edit-field > input[type=radio]:checked + .k-orientation-label {
    background-color: #2e96e5;
}

.k-chart .k-navigator-hint .k-scroll {
    background: #2e96e5;
}

.k-autocomplete.k-state-default,
.k-dropdown-wrap.k-state-default,
.k-numeric-wrap.k-state-default,
.k-picker-wrap.k-state-default {
    background-color: #ECF3F5;
    border-color: #ECF3F5
}

.k-autocomplete.k-state-disabled,
.k-dropdown-wrap.k-state-disabled,
.k-multiselect.k-header.k-state-disabled,
.k-numeric-wrap.k-state-disabled,
.k-numeric-wrap.k-state-disabled .k-input,
.k-numeric-wrap.k-state-disabled .k-select,
.k-picker-wrap.k-state-disabled {
    background-color: transparent;
}

.k-pager-numbers .k-state-selected {
    border-color: #2e96e5 transparent transparent;
    color: #2e96e5;
}

.k-autocomplete.k-state-hover,
.k-dropdown-wrap.k-state-hover,
.k-numeric-wrap.k-state-hover,
.k-overflow-anchor:hover,
.k-picker-wrap.k-state-hover,
.k-textbox:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.k-widget {
    border: 0;
    background-color: #ECF3F5;
}

.k-window-titlebar.k-header {
    background-color: transparent;
    border: none;
    color: #0f5d99;
    padding-top: 16px;
    font-weight: 400;
}

.dialogMessage {
    font-weight: bold !important;
    color: #cc0000 !important;
}


    .dialogMessage,
    .dialogMessage p,
    .dialogMessage ul,
    .dialogMessage ol {
        font-size: 15px;
        font-family: Capita, Neuton, "Sitka Text", Georgia, serif;
        font-weight: normal;
        color: #444;
    }

        .dialogMessage ul {
            list-style-type: disc;
            padding-left: 20px;
        }

.dialogButtons {
    float: right;
}

    .dialogButtons .k-button {
        color: #555;
        background-color: #eee;
        border-radius: 3px;
        border: none;
        padding: 10px 15px;
        font-size: 16px;
        font-weight: 400;
        transition: background-color 0.3s;
        will-change: background-color;
        letter-spacing: 1px;
    }

        .dialogButtons .k-button.colorButton {
            background: #00587C;
            color: #fff;
            float: right;
            font-weight: 500;
        }

            .dialogButtons .k-button.colorButton:hover {
                background-color: #00587C;
            }

div.k-window-content {
    padding: 1.333em;
    padding-top: 0;
}

.k-autocomplete .k-input,
.k-dropdown-wrap .k-input,
.k-numeric-wrap .k-input,
.k-picker-wrap .k-input,
.k-selectbox .k-input,
.k-textbox > input {
    height: 40px;
    line-height: 2.214em;
    padding: 0;
    text-indent: .8em;
    border: 0;
    border-radius: 3px;
    margin: 0;
}

.k-dropdown-wrap .k-select,
.k-numeric-wrap .k-select,
.k-picker-wrap .k-select {
    min-height: inherit;
    line-height: 30px;
    border-radius: 3px;
}

.k-dropdown-wrap .k-input,
.k-numeric-wrap .k-input,
.k-picker-wrap .k-input,
.k-selectbox .k-input {
    font-size: 18px;
    color: #444;
    border-radius: 3px;
    font-weight: 400;
}

.k-numeric-wrap {
    display: flex;
    height: 40px;
}

.k-numerictextbox .k-link {
    height: 17px;
    line-height: 17px;
}

span.k-widget.k-numerictextbox {
    opacity: 1;
}

.radio-numeric {
    max-width: 64px;
}

    .radio-numeric .k-numeric-wrap {
        border: 1px solid #BABBBD;
    }

    .radio-numeric.k-input {
        background: #fff;
    }

/*.k-header {
	background: #1565C0;
}*/

.k-calendar .k-today {
    background: #1565C0;
}

.k-calendar .k-header .k-state-hover {
    background: #609de2;
}

.form input:hover, .form textarea:hover, .k-state-hover {
    box-shadow: 0 1px 7px rgba(0,0,0,0.25);
    transition: box-shadow 0.25s ease;
}

.form input[disabled]:hover, .form textarea[disabled]:hover {
    box-shadow: none;
}

.k-select .k-icon {
    position: relative;
    top: 4px;
}

.dropdown {
    width: 100%;
}

.k-dropdown {
    border: 1px solid #B4B9BB;
    border-radius: 3px;
    width: 100%;
}

.k-dropdown-wrap {
    border-color: transparent !important;
    border-radius: 0;
    border-width: 0;
    padding-bottom: 0 !important;
}

.k-dropdown .k-state-default {
    background-color: #fff;
}

.k-state-disabled {
    opacity: 0.3;
}

.third {
    width: 32%;
    display: inline-block;
    padding: 0;
    margin: 0;
}

    .third.right {
        float: right;
    }

.radio-wrapper .third {
    width: auto;
    max-width: 32%;
}

.half {
    width: 49%;
    display: inline-block;
    padding: 0;
    margin: 0;
}

    .half.right {
        float: right;
    }

.radio-wrapper .half {
    width: auto;
    max-width: 37%;
    /*    margin-left: -1px; */
}

.inline-label {
    display: flex;
    margin-right: 14px;
}

    .inline-label .label {
        line-height: 36px;
        display: inline-block;
        z-index: 11;
    }

/*.inline-label .radio {
		width: 20px;
	}*/

.inline, .form-list .inline {
    display: inline;
}

.card {
    padding: 6px 20px;
    /*border-bottom: */
}

.form-list .controls {
    padding: 0;
    margin: 0;
}

    .form-list .controls button {
        margin-left: 10px;
    }

.card-header {
    border-bottom: 2px solid #ccc;
    padding-bottom: 8px;
}

.card .name {
    font-size: 16px;
}

.center {
    text-align: center;
}

.right {
    float: right;
}

.form button.save {
    padding: 10px 20px;
    margin-top: 10px;
    width: 100%;
    line-height: 14px;
}

.checker input {
    width: auto;
    height: auto;
}

.label .checker {
    display: inline-block;
}

.form input.inline-check {
    display: inline-block;
    width: auto;
    height: auto;
}

.price-options h2 {
    margin-top: 10px;
}

.price-options h4 {
    font-size: 13px;
}

/* .price-options.grid {
    display: flex;
    flex-wrap: wrap;
} */

.price-options .form-list {
    margin: 0;
}

/* .price-options.grid > div {
    flex-grow: 1;
    margin-right: 1%;
}

.price-options.grid > div:last-child {
    margin-right: 0;
} */

.price-options .options {
    width: auto;
}

    .price-options .options > .invisible {
        display: block !important;
        max-height: 0;
        overflow: hidden;
        -webkit-transition: max-height 0.8s;
        -moz-transition: max-height 0.8s;
        transition: max-height 0.8s;
    }

    .price-options .options > .visible {
        max-height: 100px;
    }

    .price-options .options .checker {
        margin-right: 2px;
        top: 0px;
    }

        .price-options .options .checker input {
            height: auto;
            width: auto;
            margin-top: 0;
        }

    .price-options .options .wrapper {
        padding: 15px 10px 10px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 0px 0px 3px 3px;
    }

.terms-box {
    background: #ffffff;
    border-radius: 4px;
    padding: 20px;
}

    .terms-box h4 {
        font-weight: normal;
    }

@media(max-width: 1000px) {
    .price-options.grid > div {
        width: 100%;
        margin-right: 0;
    }
}

@media(max-width: 768px) {
    .k-numerictextbox .k-select {
        display: none;
    }

    .k-numeric-wrap {
        padding-right: 0;
    }

    .mobileHide {
        display: none;
    }

    /*
        The ID selector is simply to increase specificity, so this will overrule over, less specific CSS rules.
        We're using this to hide the lifetime and non-auto-renewing one-year membership options for mobile devices.
    */
    #membershipContainer li.membership-option-payment-plan[data-autorenew="false"],
    /* The prior selector will match the one-year manual renewal and lifetime buttons, but
       we need this second selector to match (and hide) the "Lifetime Membership" header */
    #membershipContainer div.membership-option[data-name="Lifetime Membership"] {
        /* Put "display: none" to hide these on mobile. We originally removed these and then added them back, see DevOps task #2128. */
    }
}


.price-options .membership-option {
    background: #fff;
    border-radius: 6px;
    box-sizing: border-box;
    border: 1px solid #8DB9CA;
    margin-bottom: 16px;
    /*transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    will-change: background,border,box-shadow;*/
}

    .price-options .membership-option h3 {
        padding-top: 0px;
        padding-left: 15px;
        margin: 0.7em 0 0.3em;
        font-size: 1.2em;
        color: #00587C;
    }

    .price-options .membership-option h4 {
        font-size: 26px;
        margin-top: -3px;
    }

        .price-options .membership-option h4 small {
            font-size: 17px;
            font-weight: normal;
        }

    .price-options .membership-option ul {
        margin: unset;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    .price-options .membership-option li {
        display: flex;
        flex-direction: row;
        padding: 15px 0px 10px 0px;
    }

        .price-options .membership-option li .label {
            font-size: 15px;
            font-weight: 400;
            text-transform: capitalize;
            color: #639CB3;
        }

        .price-options .membership-option li.selected .label {
            font-size: 15px;
            font-weight: 400;
            color: #40829D;
        }

        .price-options .membership-option li:first-child {
            padding-top: 10px;
        }

        .price-options .membership-option li.selected:first-child {
            padding-top: 15px;
        }

        .price-options .membership-option li:last-child {
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
        }

        .price-options .membership-option li:not(:last-child) {
            border-bottom: 2px solid #E1EDF1;
        }

        .price-options .membership-option li.selected {
            background: #E8F4E6;
            /*box-shadow: 0 5px 28px rgba(0,0,0,0.25), 0 7px 7px rgba(0,0,0,0.22);*/
        }

            .price-options .membership-option li.selected:not(:last-child) {
                padding-bottom: 8px;
            }

    .price-options .membership-option .description {
        display: block;
        font-size: 14px;
        font-weight: bold;
        font-style: italic;
        font-family: "Foro Sans", Roboto, Corbel, Verdana, sans-serif;
        line-height: 18px;
        color: rgba(0,0,0,0.7);
        max-height: 1px;
        overflow: hidden;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
        margin: 0px;
        max-width: 630px;
    }

    .price-options .membership-option li.expanded .description {
        max-height: 100px;
        margin: 10px 0px 0px;
    }

    .price-options .membership-option li.expanded:only-child .description {
        margin-top: 2px;
    }

    .price-options .membership-option .arrow {
        display: block;
        margin-right: 10px;
        margin-left: auto;
        /*align-self: center;*/
        padding-top: 3px;
        width: 27px;
        height: 27px;
        cursor: pointer;
        flex-shrink: 0;
    }

        .price-options .membership-option .arrow::before {
            content: '';
            transform: rotate(45deg);
            border-bottom: 4px solid rgba(0,0,0,0.25);
            border-right: 4px solid rgba(0,0,0,0.25);
            width: 15px;
            height: 15px;
            transition: transform 0.3s;
            display: block;
            border-radius: 2px;
        }

    .price-options .membership-option li.expanded .arrow {
        /*align-self: center;*/
        padding-top: 15px;
    }

        .price-options .membership-option li.expanded .arrow::before {
            transform: rotate(-135deg);
        }

li.selected button.no-style.invisible.visible {
    color: #77A170;
}

.price-options li.selected h2, .price-options li.selected h4 {
    color: #000;
}

.checkmark {
    display: block;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    text-align: center;
    height: 20px;
    width: 20px;
    line-height: 18px;
    border: 2px solid rgba(0,0,0,0.2);
    margin: 0px 20px;
    /*transition: padding 0.3s;*/
    cursor: pointer;
    flex-shrink: 0;
}

.selected .checkmark {
    padding: 2px;
    background: #77C368;
    height: 16px;
    width: 16px;
}

.gift-box {
    display: none; /* was block--but we were asked to completely remove this for now. Leaving here so we can easily add it back. */
    background: url(../images/gift-box.svg) 50% 50% no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    margin-left: 20px;
}

.indent,
.label.indent {
    margin-left: 25px;
}

li.indent {
    margin-left: 15px;
}

.indent .radio-wrapper {
    margin-top: 0px;
}

.indent .checker input {
    margin-left: 0px;
}

.spouse-wrapper {
    background: #ffffff;
    padding: 15px;
}

    .spouse-wrapper h2 {
        font-size: 18px;
        color: #000;
        margin: 0 0 10px;
    }

.conference {
    background: #FFF5DA;
    padding: 15px;
}

    .conference .gift-box {
        margin-left: 0;
        margin-right: 11px;
    }

    .conference h4 {
        font-size: 18px;
        font-weight: 400;
        margin-bottom: 5px;
    }

    .conference h4, .conference .label {
        color: #000;
    }


.thank-you .panelInner {
    background-color: #fff;
    width: 800px;
}

.thank-you {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
}

    .thank-you .image-wrapper {
        margin-top: 15px;
    }

.thank-you-wrapper {
    max-width: 100%;
    padding: 40px;
}

    .thank-you-wrapper.email-sent,
    .thank-you-wrapper.lifetime-member,
    .thank-you-wrapper.automatic-payment {
        background-color: #ECF3F5;
        margin: 0px;
        padding: 10px 30px 30px;
    }

.thank-you-content {
    margin-top: 50px;
    margin-bottom: 20px;
    text-align: center;
}

.thank-you-wrapper.email-sent .thank-you-content {
    margin-top: 25px;
}

.thank-you-wrapper.email-sent p {
    font-size: 16px;
    line-height: 20px;
    color: #000;
    font-weight: normal;
    margin-bottom: 30px;
}

.automatic-payment .thank-you-content h1,
.lifetime-member .thank-you-content h1,
.email-sent .thank-you-content h1 {
    font-size: 28px;
    margin: 20px 0 20px;
}

.automatic-payment .thank-you-content h3,
.lifetime-member .thank-you-content h3,
.email-sent .thank-you-content h3 {
    color: #0f5d99;
    font-size: 23px;
    font-weight: 400;
    margin-bottom: 20px;
}

.thank-you-content h1 {
    font-size: 30px;
    font-weight: 600;
    color: #143a64;
    margin: 20px 0;
}

.thank-you-content p {
    font-family: "Foro Sans", Roboto, Corbel, Verdana, sans-serif;
    font-size: 20px;
    line-height: 27px;
    color: #143a64;
    font-weight: 400;
}

.thank-you-content .confirmation {
    color: #89b846;
}

.thank-you-content .welcometohslda {
    margin-bottom: -15px;
}

.thankyou-well {
    width: 100%;
    margin-top: 20px;
    padding: 30px 20px 20px;
    float: left;
    border-radius: 4px;
    background-color: #ECF3F5;
}

    .thankyou-well.pull-right {
        float: right;
    }

    .thankyou-well h2 {
        text-align: left;
        font-size: 23px;
        line-height: 28px;
        margin-top: 10px;
    }

.thank-you-content .thankyou-well p {
    font-family: Capita, Neuton, "Sitka Text", Georgia, serif;
    text-align: left;
    font-size: 16px;
    line-height: 27px;
}

    .thank-you-content .thankyou-well p a {
        color: #22A0D6;
    }

.thankyou-well .form {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

    .thankyou-well .form textarea {
        padding: 6px 8px;
    }

.thankyou-well > div > button {
    width: 100%;
}

.number-long[type=number]::-webkit-inner-spin-button,
.number-long[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.noButtons .dialogButtons {
    display: none !important;
}

.label.required {
    text-align: right;
    margin-bottom: -20px;
    font-weight: bold;
}

.requiredButIncomplete {
    color: #cc0000 !important;
    font-weight: 600 !important;
    /*    background-color: #fff8c7 !important; */
}

.invisible {
    display: none !important;
}

.visible {
    display: block !important;
}

textarea.requiredButIncomplete {
    border: 1px solid #cc0000 !important;
    background-color: #fae9eb !important;
}









/*drawer transitions*/
.r-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    pointer-events: none;
    border: solid;
    display: flex;
}

    .r-drawer:before {
        height: 100%;
        width: 100%;
        background: #000;
        opacity: 0;
        content: "";
        display: block;
        position: absolute;
        transition: opacity 0.233s cubic-bezier(0, 0, 0.21, 1);
        will-change: opacity;
    }

    .r-drawer.r-prep {
        pointer-events: auto;
    }

        .r-drawer.r-prep:before {
            opacity: .3;
        }

    .r-drawer .r-drawer-content {
        position: absolute;
        transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1);
        will-change: transform;
        background-color: Blue;
        max-height: 100%;
        max-width: 100%;
        overflow-y: auto;
        overflow-x: auto;
    }

    .r-drawer.r-maximize {
        min-width: 667px;
    }

        .r-drawer.r-maximize .r-drawer-content {
            width: 80%;
            height: 100%;
        }

    .r-drawer.r-top .r-drawer-content {
        width: 100%;
        transform: translateY(-100%);
    }

    .r-drawer.r-bottom .r-drawer-content {
        bottom: 0px;
        width: 100%;
        transform: translateY(100%);
    }

    .r-drawer.r-right .r-drawer-content {
        right: 0px;
        height: 100%;
        transform: translateX(100%);
    }

    .r-drawer.r-left .r-drawer-content {
        height: 100%;
        transform: translateX(-100%);
    }

    .r-drawer.r-left.r-active .r-drawer-content,
    .r-drawer.r-right.r-active .r-drawer-content,
    .r-drawer.r-top.r-active .r-drawer-content,
    .r-drawer.r-bottom.r-active .r-drawer-content {
        transform: none;
    }
/*drawer transitions end*/




.r-drawer {
    border: 0;
}

    .r-drawer.r-prep:before {
        opacity: 0.45;
    }

    .r-drawer .r-drawer-content {
        max-width: 45%;
        min-width: 360px;
        background-color: #fff;
        -webkit-box-shadow: 0px 0px 0px 0px #333333;
        -moz-box-shadow: 0px 0px 0px 0px #333333;
        box-shadow: 0px 0px 0px 0px #333333;
        transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1), box-shadow 0.233s ease;
        padding: 0;
        overflow: hidden;
    }

        .r-drawer .r-drawer-content:after {
            content: '';
            background: #ffffff !important;
            position: absolute;
            bottom: 0px;
            left: 0;
            right: 0;
            height: 100px;
            width: 100%;
            z-index: -1;
            padding: 0 20px;
            pointer-events: none;
            -webkit-box-shadow: 0px -3px 35px rgba(0,0,0,0.25);
            -moz-box-shadow: 0px -3px 35px rgba(0,0,0,0.25);
            box-shadow: 0px -3px 35px rgba(0,0,0,0.25);
        }

    .r-drawer.r-active .r-drawer-content {
        transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1), box-shadow 0.8s ease;
        -webkit-box-shadow: 0px 0px 100px 20px #4e4e4e;
        -moz-box-shadow: 0px 0px 100px 20px #4e4e4e;
        box-shadow: 0px 0px 100px 20px #4e4e4e;
    }

    .r-drawer.r-maximize .r-drawer-content {
        max-width: 80%;
    }

    .r-drawer .form .k-widget {
        width: 100%;
    }

    .r-drawer .grid table {
        table-layout: fixed;
    }






.pop-wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.pop-content {
    padding: 20px;
}

.pop-wrapper > * {
    flex: 0 0 auto;
    overflow-y: auto;
    height: calc(100vh - 100px);
    overflow-x: hidden;
    padding-left: 20px;
    padding-right: 20px;
}

.r-drawer h2 {
    margin: 0;
}

.r-drawer h4 {
    font-size: 16px;
    line-height: 18px;
    margin: 25px 0 0;
}

.r-drawer p {
    line-height: 20px;
    margin: 10px 0;
    font-size: 15px;
}

.r-drawer ul,
.terms-and-conditions-wrapper ul {
    list-style-type: disc;
    margin: 15px 0px 15px 20px;
}

.r-drawer ol,
.terms-and-conditions-wrapper ol {
    margin: 15px 0px 15px 20px;
    padding-left: 10px;
}

.r-drawer li,
.terms-and-conditions-wrapper li {
    font-family: Capita, Neuton, "Sitka Text", Georgia, serif;
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 5px;
}

    .r-drawer li:last-child {
        margin-bottom: 0px;
    }

.r-drawer .label,
.terms-and-conditions-wrapper .label {
    color: #000000;
}

.r-drawer h2,
.terms-and-conditions-wrapper h2 {
    font-size: 25px;
}

.r-drawer h3,
.terms-and-conditions-wrapper h3 {
    margin-top: 30px;
    font-size: 19px;
}

.r-drawer h4,
.terms-and-conditions-wrapper h4 {
    margin-top: 20px;
    margin-bottom: 0px;
    font-size: 16px;
}

div.k-window {
    max-width: 500px;
    margin: 0 auto;
}







.button-footer {
    overflow: hidden !important;
    position: relative;
}

.button-tray {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin-top: 10px;
}

    .button-tray button:not([style*="display:none"]):not([style*="display: none"]):last-child, .button-tray a:not([style*="display:none"]):not([style*="display: none"]):last-child {
        margin-right: 0;
    }

    .button-tray button:last-child, .button-tray a:last-child {
        margin-right: 0;
    }

.button.green {
    background-color: #00587C;
    border-radius: 4px;
    font-size: 18px;
    transition: background-color 0.3s;
    will-change: background-color;
}

    .button.green:hover {
        background-color: #00587C;
    }

.button-tray button, .button-tray a {
    flex-grow: 1;
    margin-right: 5px;
    width: 50%;
    text-align: center;
}

.popupContainer .k-button, .radoloDialog .k-button, .popupContainer button, .radoloDialog button {
    margin-left: 10px;
    margin-top: 10px;
}

.button {
    font-size: 14px;
    color: #fff;
    padding: 20px 18px;
    border: 0;
    cursor: pointer;
    transition: background-color 0.5s ease, border-color 0.5s ease;
    border-bottom: 2px solid #333;
    background: #b9b9b9;
}


.cancel-actions {
    margin-top: 20px;
    text-align: center;
}

.cancel {
    color: #5A6570;
    text-decoration: underline;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

span.active {
    color: black !important;
    font-weight: 600 !important;
}


.k-loading-image {
    background: none !important;
    background-repeat: no-repeat;
    background-size: auto;
}

.k-loading-mask {
    position: absolute;
}

.k-loading-image:before, .k-loading-image:after {
    content: '';
    z-index: -1;
    border-radius: 50%;
    border: 3px solid #1565C0;
    position: absolute;
    height: auto;
    width: 100%;
    opacity: 1;
    transform: scale(.60);
    animation: fade 2s cubic-bezier(0,0,.21,1) infinite;
    top: calc(50% - 40px);
    bottom: 0;
    right: 0;
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
}

.k-loading-image:after {
    animation-delay: .5s;
}

.expand-padding {
    padding-right: 2px;
}

input[type="date" i], input[type="datetime-local" i], input[type="month" i], input[type="time" i], input[type="week" i] {
    font-family: "Foro Sans", Roboto, Corbel, Verdana, sans-serif;
}

.k-dropdown.k-widget {
    background-color: transparent;
}


@media (max-width: 400px) {
    .header-main h2 {
        font-size: 16px;
        line-height: 21px;
        margin: 9px;
    }

    .wizardHeader:after {
        width: 53%;
        margin-left: -26%;
    }

    .label.required {
        margin-bottom: -10px;
    }
}


@media (min-width: 800px) {
    .hero-image-wrapper {
        margin: 0px 30px;
    }

    .welcome.form {
        padding: 10px 30px 30px;
    }

    .membership-pricing tr:nth-child(odd) {
        background-color: #F2F6F7;
    }

    .welcome-screen-text p {
        font-size: 21px;
        line-height: 27px;
    }

    .expanding-section-title {
        font-size: 20px;
        padding: 8px 0px 8px 30px;
    }

    .frequently-asked-questions h3 {
        font-size: 16px;
    }

    .header-main {
        width: 800px;
        margin: 0 auto;
        box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .panel {
        background-color: #ECF3F5;
    }

    .intro-wrapper {
        width: 800px;
        margin: 0 auto;
        background: #ffffff;
    }

    .wizardStep {
        background-color: #fff;
    }

    .panelInner {
        width: 800px;
        background-color: #fff;
        margin: 0 auto;
    }

    .form {
        width: 740px;
        margin: 30px;
        padding: 20px 20px 5px;
        border-radius: 4px;
        background-color: #ECF3F5;
    }

    .wizardHeader,
    .wizardFooter {
        width: 800px;
        margin: 0 auto;
    }

    .form.terms {
        margin: 20px auto;
    }

    .thank-you-wrapper.email-sent,
    .thank-you-wrapper.lifetime-member,
    .thank-you-wrapper.automatic-payment {
        margin: 30px;
    }


        .thank-you-wrapper.email-sent p {
            margin: 0 auto 30px;
            width: 65%;
        }

    .thankyou-well {
        width: 47%;
    }

    .inline-label {
        margin-right: 18px;
    }

    .radio-wrapper .label {
        padding: 0 0 0 18px;
    }
}

@media (max-device-width: 900px) and (min-device-width: 500px) {
    .big-checkbox {
        transform: scale(2.75);
        margin: 10px;
        margin-right: 25px;
    }

    #autorenewcheckbox {
        margin-left: 20px;
        margin-top: 10px;
    }

    .mobile-text-large h4, .mobile-text-large .label {
        font-size: 18px;
    }
}

.k-i-checkmark:before {
    content: "\e61e";
    position: relative;
    top: -1px;
    left: -1px;
}

.k-i-arrow-60-down {
    background-position-y: -31px;
}

.k-state-active .k-i-arrow-60-down {
    background-position-y: 0px;
}