/* Global font */
@font-face {
    font-family: 'HCo Gotham';
    src: url('GothamFonts/woff2/Gotham-Book_Web.woff2') format('woff2'), url('GothamFonts/woff/Gotham-Book_Web.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/*
- Default is typically 16px. rem reads off of this value. Hence, always use REM for font-size to be consistent.
Use em for padding and margin
*/
:root {
    font-size: 16px;
}

/* Main Website */
body {
    font-family: "HCo Gotham";
    font-style: normal;
    font-weight: 400;
    background: #fafafa;
    font-size: 0.83rem; /* 10pt */
}

#container {
    min-height: 100%;
    margin-bottom: -280px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Global Link */
a {
    color: #000000;
}

/*
Old Site (em is based on 16px)
H1: 2.57143em (But we used all our titles as h2)
H2: 2.14286em
H3: 1.4em
H4: 1.14286em
H5: 2.14286em
H6: ???
*/

h1 {
    font-size: 2.00rem;
    margin-top: 0.625rem; /* 10px */
}

h2 {
    font-size: 1.85rem;
    margin-top: 0.625rem; /* 10px */
}

h3 {
    font-size: 1.65rem;
    margin-top: 0.625rem; /* 10px */
}

h4 {
    font-size: 1.40rem;
    margin-top: 0.625rem; /* 10px */
}

h5 {
    font-size: 1.15rem;
    margin-top: 0.625rem; /* 10px */
}

h6 {
    font-size: 0.90rem;
    margin-top: 0.625rem; /* 10px */
}

thead,
th {
    background-color: #caebcc !important;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    color: #000;
    text-align: center;
    text-vertical: center;
    line-height: 1em;
    padding: 13px 10px;
    font-family: "HCo Gotham";
    font-style: normal;
    font-weight: 400;
    font-size: 9.5pt;
}

td {
    border-style: solid;
    border-width: 1px;
    font-family: "HCo Gotham";
    font-style: normal;
    font-weight: 400;
    font-size: 9.5pt;
}

.radiobtnSpace input[type="radio"] {
    margin-left: 25px;
    margin-right: 1px;
}

.chkChoice input {
    margin-left: 20px;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* WCAG default values */
.wcagHeader {
}

.wcagWrapper {
}

.wcagMain {
}

.wcagFooter {
}

.wcagNavigationHeader {
}

.wcagNavigationFooter {
}

/*WCAG: Hides the Skip link off the screen.*/
.visuallyHidden {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.skip-link {
    left: -999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999;
}

    .skip-link:focus, a.skip-link:active {
        color: #fff;
        background-color: #000;
        left: auto;
        top: auto;
        width: 30%;
        height: auto;
        overflow: auto;
        margin: 10px 35%;
        padding: 5px;
        border-radius: 15px;
        border: 4px solid yellow;
        text-align: center;
        font-size: 1.2em;
        z-index: 999;
    }


/*CONTENT STYLES*/
.container {
    max-width: 65rem; /* 1040px */
}

.titleRow {
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 1.25rem; /* 20px */
}

.checkboxleft input[type="checkbox"] {
    margin-left: 15px;
}

/* ALERT MESSAGES */
.alert {
    font-size: 0.83rem; /* 10pt */
    display: flex;
    flex-direction: row;
}

    .alert .fas {
        margin-top: 0.625rem; /* 10px */
        margin-right: 0.625rem; /* 10px */
    }

.span-example .alert .fas {
    align-self: center;
}

.alert div,
.alert span {
}

/* BUTTONS ON THE SITE */
/* Purple buttons */
.btn-primary, .btn-primary:hover, .btn-primary:active {
    background-color: #443e66 !important;
    color: #fff;
    text-transform: uppercase;
    font-family: "HCo Gotham";
    font-style: normal;
    font-weight: 400;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#5e5582), to(#443e66));
    background-image: -webkit-linear-gradient(#5e5582, #443e66);
    background-image: linear-gradient(#5e5582, #443e66);
}
/* Green buttons */
.btn-secondary, .btn-secondary:hover, .btn-secondary:active {
    background-color: #caebcc !important;
    color: #000;
    text-transform: uppercase;
    font-family: "HCo Gotham";
    font-style: normal;
    font-weight: 400;
}
/* Used in the nav bar on top. Should be in the menuNavBar.css, but easier to handle all buttons here */
.menuButton {
    font-size: 0.83rem; /* 10pt */
    width: 12.5rem; /* 200px */
    margin-bottom: 0.625rem; /* 10px */
    padding-top: 0.625rem; /* 10px */
    padding-bottom: 0.625rem; /* 10px */
}


/* Menu on the main page below the carousel */
.subMenuMainPage {
    background: #caebcc;
    text-align: center;
    font-size: 1rem;
}

.subMenuMainPageLink {
    color: #000; /* Was white, but failed Level AA */
}

/* Form Attributes*/
.error {
    color: #ae0101;
}
/* Normal forms should use this */
.formFieldNormalLabel {
    font-size: 0.83rem; /* 10pt */
}

.validationsummarycss {
    padding-bottom: 1.25rem; /* 20px */
}

.required-asterisk {
    color: #ae0101;
    margin: 0px;
    padding: 0px;
    display: inline;
}

.labelright {
    text-align: right;
    padding-right: 10px;
}

/* SIDE MENU ON THE SITE */
.sideMenu_Top {
    background: #caebcc;
    text-align: left;
}

.sideMenu_Title {
    color: #ffffff;
    text-decoration: none;
    padding-left: 0.625rem; /* 10px */
}

/* User Edit has table to select*/
#content .groupingPanel table {
    width: 100% !important;
    vertical-align: top !important;
}

    #content .groupingPanel table .operations {
        width: 295px;
    }

    #content .groupingPanel table td {
        vertical-align: top !important;
    }

/* For New Template Changes */
#landing .wrap, #landing header[role="main"], header[role="main"] #landing, #landing header[role="main"] .drop-down nav, header[role="main"] .drop-down .generic-landing-page #landing nav {
    /*    .generic-landing-page #landing .wrap, .generic-landing-page #landing header[role="main"] .users, header[role="main"] .generic-landing-page #landing .users, .generic-landing-page #landing header[role="main"] .drop-down nav, header[role="main"] .drop-down .generic-landing-page #landing nav*/
    height: 0;
    padding-bottom: 47%;
    width: 90%;
}

.wrap, header[role="main"] .users, header[role="main"] .drop-down nav {
    width: 100%;
    max-width: 1040px;
    margin: 0px auto;
    position: relative;
}

.entry-landing {
    width: 90%;
    max-width: 1040px;
    background: #fff;
    margin: -130px auto 55px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px 30px;
    position: relative;
    z-index: 10;
}

.wysiwyg {
    font-size: 10pt;
    line-height: 20px;
    font-family: "HCo Gotham";
    font-style: normal;
    font-weight: 400;
}

.generic-landing-page .columns {
    padding-bottom: 20px;
}

.columns {
    overflow: hidden;
    padding: 0px;
}

    .columns.two .column {
        width: 50%;
    }

    .columns.four .column {
        width: 25%;
    }

    .columns .column {
        float: left;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 5px 25px 5px 0;
    }

.title, .wysiwyg h2.title {
    font-weight: 400;
    font-size: 1.42857em;
    border-bottom: 1px solid #dfdfdf;
    line-height: 1.1em;
    padding-bottom: 11px;
    margin-bottom: 0.9em;
}

header, section, article, hgroup, aside, footer {
    display: block;
}

.columns .column p {
    margin-bottom: 0.9em;
}

.more {
    font-family: "HCo Gotham";
    font-style: normal;
    font-weight: 400;
    color: #000;
    font-size: 10pt;
}

    .more:after {
        color: #ff922e;
        font-family: 'FontAwesome';
        content: "\f054";
        display: inline-block;
        margin-left: 0.4em;
        font-size: 10px;
        vertical-align: baseline;
    }

#landing img {
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: auto;
    z-index: 0
}

#content {
    width: 100%;
    min-height: 535px;
}

.columns .column img {
    max-width: 100%;
    height: auto;
}

.wysiwyg .alignnone {
    display: block;
    margin: 0 0 0;
}

.entry .main-column, .pre-enrollment-page .entry .main-column, .entry .main-column {
    /* padding: 0 0 26px; */
    padding-top: 10px;
    padding-right: 0;
    padding-left: 20px;
}

    .entry .main-column article, .pre-enrollment-page .entry .main-column article, .entry .main-column article {
        width: 70%;
        float: left;
        padding: 10px 0px 40px 0px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

header, section, article, hgroup, aside, footer {
    display: block;
}

.entry {
    width: 100%;
    max-width: 1040px;
    background: #fff;
    margin: 0px auto 55px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px 30px;
    position: relative;
    z-index: 10;
}

.wysiwyg h3 {
    font-family: "HCo Gotham";
    font-style: normal;
    font-weight: 400;
    font-size: 1.4em;
    margin-bottom: 0.7em;
    padding-top: 13px;
}

.error-404-page .entry, .entry, .blog-detail-page .entry, .blog-landing-page .entry, .pre-enrollment-page .entry, .generic-form-page .entry {
    margin: auto;
}

#leftColumn {
    width: 48%;
    float: left;
    /*height: 100%;
    height: 86%;*/
    padding: 0px 15px 20px 0px;
}

.grayVerticalRight {
    border-right-style: solid;
    border-right-color: #b1aea7;
    border-right-width: 1px;
}

#rightColumn {
    width: 46%;
    float: left;
    height: auto;
    padding: 0px 0px 20px 20px;
}

.wysiwyg p {
    margin-bottom: 1.2em;
}

.entry #sidebar {
    width: 24%;
    float: right;
    padding-bottom: 0;
    -webkit-box-shadow: #dedede 3px -3px 10px inset;
    box-shadow: #dedede 3px -3px 10px inset;
}

.entry .section {
    background: #caebcc;
    color: #000000;
    font-size: 1.16667em;
    display: block;
    padding: 17px 15px;
}

ul.subnav li li a {
    padding-left: 20px;
    color: #000000;
    text-decoration: none;
}

ul.subnav li a {
    display: block;
    padding: 17px 15px;
    text-decoration: none;
}

.accordion-body .subnav li a {
    color: #ffffff;
}

videosTextH3 {
    font-family: "HCo Gotham";
    font-style: normal;
    font-weight: 400;
    font-size: 1.4em;
    margin-bottom: 0.7em;
    padding-top: 13px;
}

#member-login:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: #caebcc;
}

.generic-landing-page #landing {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

#landing {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.generic-landing-page #landing img {
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: auto;
    z-index: 0;
}

#landing img {
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: auto;
    z-index: 0;
}

#landing #member-login {
    position: absolute;
    right: 0;
    font-size: 1.2em !important;
    overflow: hidden;
    top: 38%;
    z-index: 5;
    padding: 0;
}

#landing .tagline, #landing #member-login {
    /* position: relative; */
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    /* transform: translateY(-50%); */
}

#member-login {
    max-width: 280px;
    background: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e3e4e5));
    background-image: -webkit-linear-gradient(#ffffff, #e3e4e5);
    background-image: linear-gradient(#ffffff, #e3e4e5);
    border: 1px solid #fff;
    border-top: none;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px !important;
    font-size: 1.25em;
}

#landing #member-login h2 {
    padding: 15px 18px 5px;
    font-size: 1.5em;
}

#member-login h2 {
    font-weight: 400;
    font-size: 2.4em;
    line-height: 1em;
    margin-bottom: 0.4em;
    white-space: pre;
}

.slider {
    width: 400%;
    overflow: hidden;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

    .slider .step {
        width: -webkit-calc(100% / 4);
        width: calc(100% / 4);
        float: left;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 20px;
    }

#landing #member-login .slider .member {
    display: block;
}

.slider .inner-step {
    display: none;
}

.columns.three .column {
    width: 33%;
}

.error-404-page .entry .main-column, .entry .main-column, .blog-detail-page .entry .main-column, .blog-landing-page .entry .main-column, .pre-enrollment-page .entry .main-column, .generic-form-page .entry .main-column {
    border: 1px solid #eef0f2;
    background: #f8f9fa;
    overflow: hidden;
}

.with-blocks ul.subnav {
    padding-bottom: 10px;
}

ul.subnav {
    position: relative;
    font-family: "HCo Gotham";
    font-style: normal;
    font-weight: 400;
    line-height: 1em;
    margin: 0;
    padding-top: 15px;
    padding-bottom: 15px;
}

    ul.subnav li {
        list-style: none;
        margin-bottom: 0;
    }

.nobotmarg {
    font-weight: 400;
    font-size: 2.14286em;
    margin-bottom: 0px;
    padding-bottom: 3px;
}

#landing #member-login .button {
    line-height: 1.3em;
    padding: 0.75em 1.5em;
}

#member-login a.button {
    text-decoration: none;
    font-size: 0.95em;
}

.button {
    background-color: #caebcc;
    text-align: center;
    color: #000;
    text-transform: uppercase;
    display: block;
    font-family: "HCo Gotham";
    font-style: normal;
    font-weight: 400;
    font-size: 1.41667em;
    line-height: 0.1em;
    padding: 1.8em 0px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    white-space: nowrap;
}

a.green-button {
    border: none;
    color: #000000;
    margin-bottom: 0px;
    padding: 1em 2em 0.8em;
    font-family: "HCo Gotham";
    font-style: normal;
    font-weight: 400;
    background-color: #caebcc;
    border-radius: 3px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.2em;
}

.showMobileView {
    display: none;
}

.accordion-button:focus {
    border-color: unset !important;
    box-shadow: unset !important;
}
/* For mobile screen */

@media screen and (max-width: 1023px) {
    #landing #member-login {
        right: 0;
        font-size: 1em;
    }

    .columns.four .column {
        width: 50%;
    }

    #landing #member-login h2 {
        font-size: 1.5em;
        padding-top: 22px;
    }
    .labelright {
        text-align: left;
    }
}

@media screen and (max-width: 767px) {
    #landing #member-login {
        padding: 0;
        width: 100%;
        position: relative;
        margin: 0;
        max-width: 100%;
        top: 0;
        left: 0;
        right: 0;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    #landing img {
        position: relative;
        width: 100%;
    }

    .columns {
        padding: 0px;
    }

    .entry-landing {
        width: 90%;
        max-width: 1040px;
        background: #fff;
        margin: 5px auto 55px;
        box-sizing: border-box;
        padding: 20px 30px;
        position: relative;
        z-index: 10;
    }

    .columns.four .column, .columns.three .column, .columns.two .column, .columns.one .column {
        width: 100%;
        padding: 0 !important;
        float: none;
        margin-bottom: 20px;
    }

    #landing .wrap, #landing header[role="main"] .users, header[role="main"]
    #landing .users, #landing header[role="main"] .drop-down nav, header[role="main"] .drop-down #landing nav {
        height: auto;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .page-title, .wysiwyg .page-title {
        font-size: 3.2em;
        line-height: 0.9em;
        padding: 13px 17px 5px;
    }

    .columns {
        padding: 0px;
    }
}

@media (max-width:62rem) {
    .showMobileView {
        display: block;
    }
}

.no-underline {
    text-decoration: none !important;
}
/* Report Page Styling starts*/
.maxWidth {
    width: 710px;
}

form input[type="text"], form input[type="submit"], form input[type="reset"], form input[type="button"], form select, form textarea {
    -webkit-appearance: none;
    font-family: "HCo Gotham";
    font-style: normal;
    font-weight: 400;
}

form input[type="text"], form input[type="email"], form input[type="password"], form textarea, form select {
    box-sizing: border-box;
    background: #f6f6f6;
    border: 1px solid #ccc;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 5px 10px;
    line-height: 1em;
    /* width: 90%; */
    display: inline-block;
    font-size: 10pt;
    clear: right;
    font-family: "HCo Gotham";
    font-style: normal;
    font-weight: 400;
}

.grpListBox {
    width: 295px;
    float: left;
}

.divReportFull {
    width: 710px;
    float: left;
    padding: 5px;
    padding-left: 0px !important;
}

.divReportRight {
    width: 450px;
    float: left;
    display: inline-block;
    vertical-align: top;
    padding: 5px;
    padding-left: 0px !important;
}

.divReportLeft {
    width: 450px;
    float: left;
    display: inline-block;
    vertical-align: middle;
    padding: 0px;
    font-weight: bold;
}

.midSelector {
    float: left;
    vertical-align: middle;
    width: 115px;
    text-align: center;
}

.btnSelectRemoveAll {
    height: 80px;
}

    .btnSelectRemoveAll input[type="submit"] {
        clear: both;
        float: left !important;
        width: 135px !important;
    }

form label {
    display: inline-block;
    font-size: 11px;
}

/*Report Page Styling Ends*/
/* End New Template Changes*/

@media screen and (max-width: 1023px) {
    ul.subnav li a {
        padding-top: 13px;
        padding-bottom: 10px;
    }
}