@charset "UTF-8";
@import url(//fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);

html[is-locked] {
    overflow: hidden !important;
    position: fixed;
}

body {
    background-color: #FCFBFC;
    color: #222;
    font: normal 14px/1.4 Roboto;
}

.clearfix:after {
    clear: both;
    content: "";
    display: table;
}

.container {
    margin-left: auto;
    margin-right: auto;
    outline: none;
}

.hide-text {
    overflow: hidden;
    padding: 0;
    text-indent: 101%;
    white-space: nowrap;
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.dfx-nav {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.dfx-nav ul.sub-nav {
  position: absolute;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  background: white;
  -webkit-box-shadow: 1px 1px 38px rgba(0,0,0,0.1);
          box-shadow: 1px 1px 38px rgba(0,0,0,0.1);
  left: -999em;
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 0 0 3px 3px;
}
.dfx-nav ul.sub-nav::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-box-shadow: 1px 1px 13px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 13px rgba(0,0,0,0.2);
    border-radius: 0 0 3px 3px;
}
.dfx-nav li {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  transition: all 0.2s;
}
.dfx-nav > li.is-active > a {}
.dfx-nav li div,
.dfx-nav li a {
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1em 1.25em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  white-space: nowrap;
  /*text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);*/
  font-size: 1.1em;
  letter-spacing: -0.025em;
  outline: none;
}

.dfx-nav li ul.sub-nav li + li {
  border-top: 1px solid #eee;
}

.dfx-nav li.is-active > ul.sub-nav {
  left: 0;
  min-width: 100%;
  z-index: 999;
}
.dfx-nav li.is-active > ul.sub-nav li.is-active > ul.sub-nav {
  top: 0;
  left: 100%;
}

.dfx-nav li.is-active.is-edge > ul.sub-nav {
  right: 0;
  left: auto;
  min-width: 100%;
}
.dfx-nav li.is-active.is-edge > ul.sub-nav li.is-active > ul.sub-nav {
  top: 0;
  right: 100%;
  left: auto;
}
.dfx-nav li ul.sub-nav li a {
  -webkit-box-pack: start;
    -ms-flex-pack: start;
        justify-content: flex-start;
  color: #767676;
  padding: 0.75em 1.25em;
  text-shadow: none;
  transition: all 0.2s;
}
.dfx-nav li ul.sub-nav li a:hover,
.dfx-nav li ul.sub-nav li a:focus {
    color: #212121;
    background: rgba(0,0,0,.1);
}
.dfx-nav .doc-user {
    display: none;
}
@media (min-width: 993px) and (max-width: 1199px) {
    .dfx-nav li div,
    .dfx-nav li a {
        padding: 1em;
    }
}
@media (max-width: 992px) {
    .dfx-nav .active-nav ul {
        position: initial;
    }
    .dfx-nav .doc-user {
        display: flex;
    }
}

.dfx-nav__secondary {
    background: white !important;
}

div.header-not-logged-in {
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.12),0 4px 6px rgba(0,0,0,.05);
            box-shadow: 0 5px 10px rgba(0,0,0,.12),0 4px 6px rgba(0,0,0,.05);
    padding: 20px;
    position: relative;
    z-index: 999;
}

    div.header-not-logged-in #Header img {
        max-width: 100%;
    }

div.header {
    height: 80px;
}

    div.header a {
        color: rgba(0,0,0,.7);
    }

    div.header .logged-in-user .user-settings {
        background-color: #fff !important;
        -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.24) !important;
                box-shadow: 0 2px 10px rgba(0,0,0,.24) !important;
        border: 1px solid rgba(0,0,0,.1) !important;
        border-radius: 4px !important;
        overflow: hidden;
    }

        div.header .logged-in-user .user-settings li {
            padding: 0 !important;
            background: #fff !important;
            border: none !important;
        }

            div.header .logged-in-user .user-settings li:hover {
                background: transparent !important;
            }

            div.header .logged-in-user .user-settings li a {
                color: #333;
                display: block !important;
                padding: 4px 10px;
            }

            div.header .logged-in-user .user-settings li span {
                color: #333;
                background-color: #e2e2e2;
                display: block !important;
                padding: 4px 10px;
            }

                div.header .logged-in-user .user-settings li a:hover {
                    color: #fff !important;
                    background: rgba(0,0,0,.23) !important;
                }

    div.header .settings-container {
        height: 80px;
        display: -moz-flex;
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
                flex-direction: row;
        -ms-flex-pack: center;
        -moz-justify-content: center;
        -webkit-box-pack: center;
                justify-content: center;
        -ms-flex-align: center;
        -moz-align-items: center;
        -webkit-box-align: center;
                align-items: center;
        margin-top: 0;
    }
        div.header .settings-container #pnlHeaderCurrentAccount {
            line-height: 12px;
        }

        div.header .settings-container .log-out,
        div.header .settings-container .logged-in-user,
        div.header .settings-container .logged-in-user-help,
        div.header .settings-container > div {
            /*color: rgba(0,0,0,.7);*/
            margin-top: 0;
            border: none !important;
            line-height: 40px;
            font-size: 14px;
        }

    div.header .settings-container .contact-info { line-height: normal; }

    div.header .settings-container .switch:hover,
    div.header .settings-container .switch:focus,
    div.header .settings-container .switch.focus-within,
    div.header .settings-container .messaging:hover,
    div.header .settings-container .messaging:focus,
    div.header .settings-container .messaging.focus-within,
    div.header .settings-container .messaging:hover a,
    div.header .settings-container .messaging:focus a,
    div.header .settings-container .messaging.focus-within a,
    div.header .settings-container .user-tools:hover,
    div.header .settings-container .user-tools:focus,
    div.header .settings-container .user-tools.focus-within,
    div.header .settings-container .log-out:hover,
    div.header .settings-container .log-out:focus,
    div.header .settings-container .log-out.focus-within,
    div.header .settings-container .logged-in-user-help:hover,
    div.header .settings-container .logged-in-user-help:focus,
    div.header .settings-container .logged-in-user-help.focus-within,
    div.header .settings-container .logged-in-user:hover,
    div.header .settings-container .logged-in-user:focus,
    div.header .settings-container .logged-in-user.focus-within,
    div.header .settings-container .log-out:hover > div,
    div.header .settings-container .log-out:focus > div,
    div.header .settings-container .log-out.focus-within > div {
        color: hsla(0,0%,100%,.7);
    }

            div.header .settings-container .log-out .fa, div.header .settings-container .logged-in-user-help .fa, div.header .settings-container .logged-in-user .fa {
                font-size: 14px;
            }


        div.header .settings-container div.header-current-account {
            min-height: 24px;
            max-height: 80px;
            -moz-flex-grow: 1;
            -ms-flex-positive: 1;
            -webkit-box-flex: 1;
                    flex-grow: 1;
            -ms-flex-negative: 1;
            flex-shrink: 1;
            top: inherit;
            color: hsla(0,0%,100%,.6);
            padding: 5px 16px;
            line-height: 25px !important;
        }

            div.header .settings-container div.header-current-account strong {
                color: #fff;
            }

div.mobile-nav-btn {
    font-size: 24px;
    margin-top: 24px;
}

div.header-current-account {
    padding: 6px 8px;
    top: 10px;
}

div.logo {
    height: 75px;
}

@media (max-width:600px) {
    div.logo {
        height: 55px;
        margin-top: 8px;
    }
}

.footer {
    margin-top: 100px;
    border-top: 1px solid rgba(0,0,0,.1);
    padding-top: 30px;
}

    .footer p#footer-img {
        background-color: #fff;
        border-radius: 6px;
        border: 1px solid rgba(0,0,0,.12);
        padding: 2px;
        text-align: center;
    }

        .footer p#footer-img img {
            width: 150px;
        }

    .footer .contact, .footer .text-right {
        color: #666;
        font-size: 14px;
    }

        .footer .contact a, .footer .text-right a {
            color: #333;
            text-decoration: underline;
        }

            .footer .contact a:hover, .footer .text-right a:hover {
                color: #000;
            }

div.row-content {
    border: 1px solid rgba(0,0,0,.1) !important;
    -webkit-box-shadow: 0 3px 5px rgba(0,0,0,.1),0 2px 1px rgba(0,0,0,.05);
            box-shadow: 0 3px 5px rgba(0,0,0,.1),0 2px 1px rgba(0,0,0,.05);
    border-radius: 4px;
    padding: 20px 16px;
}

@media (max-width:600px) {
    div.row-content {
        padding: 16px 0;
    }
}

div.row-content .h2-line h2, div.row-content .title-row h5, div.row-content h4 {
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding-bottom: 8px;
    margin-bottom: 8px;
    font-size: 18px;
    text-transform: uppercase;
}

div.row-content.documents .document-list ul {
    margin: 0;
    padding: 0;
}

    div.row-content.documents .document-list ul li {
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

        div.row-content.documents .document-list ul li:first-child {
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            overflow: hidden;
        }

        div.row-content.documents .document-list ul li:last-child {
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            overflow: hidden;
        }

        div.row-content.documents .document-list ul li:hover a {
            color: #000 !important;
        }

        div.row-content.documents .document-list ul li a {
            background: #fff !important;
            display: block;
            padding: 2px 10px !important;
            margin: 0 !important;
            font-size: 14px;
            line-height: 36px;
            color: rgba(0,0,0,.6) !important;
        }

            div.row-content.documents .document-list ul li a:hover {
                background: #666 !important;
                color: #fff !important;
                text-decoration: none;
            }

div.page-title h1 {
    text-shadow: 0 -1px 0 hsla(0,0%,100%,.7);
    font-size: 20px;
    font-weight: 400;
    margin-top: 30px;
    margin-bottom: 15px;
}

div.page-title .back-button {
    margin-top: -6px;
}

@media (max-width:600px) {
    div.page-title .back-button {
        float: left;
    }

        div.page-title .back-button a, div.page-title .back-button button {
            display: inline-block;
            font-size: 0 !important;
            overflow: hidden;
            height: 40px;
            width: 40px;
            border-radius: 6px;
            margin-right: 10px;
        }

            div.page-title .back-button a:before, div.page-title .back-button button:before {
                font-size: 24px;
                line-height: 24px;
            }
}

div.page-title .back-button a, div.page-title .back-button button {
    border: 1px solid rgba(0,0,0,.1) !important;
    font-weight: 700;
}

    div.page-title .back-button a:before, div.page-title .back-button button:before {
        content: "⃪ ";
        margin-right: 5px;
    }


.disabled-button, a.button, button, div.back-button a, div.button-row input.button, div.button-row input[type=submit], div.button a, div.button input.button, div.button input[type=submit] {
    display: inline-block;
    border-radius: 4px !important;
    margin-bottom: 10px;
    margin-left: 5px;
    cursor: pointer;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 14px;
    border: 1px solid rgba(0,0,0,.1);
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}
.flex-align-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

    #FormSubmit, .disabled-button:hover, a.button:hover, button:hover, div.back-button a:hover, div.button-row input.button:hover, div.button-row input[type=submit]:hover, div.button a:hover, div.button input.button:hover, div.button input[type=submit]:hover {
        -webkit-transition: all .3s ease 0s;
        -o-transition: all .3s ease 0s;
        transition: all .3s ease 0s;
    }

#FormSubmit {
    display: inline-block;
    border-radius: 8px !important;
    margin-bottom: 10px;
    margin-left: 5px;
    cursor: pointer;
    text-decoration: none;
    padding: 8px 21px;
    /* font-size: 12px; */
    border: 1px solid rgba(0,0,0,.1);
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

    #FormSubmit:hover {
        -webkit-transition: all .3s ease 0s;
        -o-transition: all .3s ease 0s;
        transition: all .3s ease 0s;
    }


.col-xs-12 .disabled-button, .col-xs-12 a.button, .col-xs-12 button, .col-xs-12 div.back-button a, .col-xs-12 div.button-row input.button, .col-xs-12 div.button-row input[type=submit], .col-xs-12 div.button a, .col-xs-12 div.button input.button, .col-xs-12 div.button input[type=submit], input.button {
    display: inline-block;
    border-radius: 8px !important;
    margin-bottom: 10px;
    margin-left: 5px;
    cursor: pointer;
    text-decoration: none;
    padding: 8px 21px;
    /* font-size: 12px; */
    border: 1px solid rgba(0,0,0,.1);
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

.financial-advisor-dashboard-widget-header {
    grid-area: fadw-header;
    min-width: fit-content;
}
.financial-advisor-dashboard-widget-description {
    grid-area: fadw-description;
}
.financial-advisor-dashboard-widget-images {
    grid-area: fadw-images;
    align-self: center;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-bottom: 1rem;
}
.financial-advisor-dashboard-widget-button {
    grid-area: fadw-button;
}

.financial-advisor-dashboard-widget-button a.button {
    margin: 0rem 0rem 1rem 0rem;
}

.financial-advisor-dashboard-widget>div {
    display: grid;
    gap: 1rem;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
        "fadw-header"
        "fadw-description"
        "fadw-images"
        "fadw-button"
}

@media screen and (min-width: 480px) {
    .financial-advisor-dashboard-widget > div {
        grid-template-columns: minmax(390px, auto) auto;
        grid-template-areas:
            "fadw-header fadw-images"
            "fadw-description fadw-images"
            "fadw-button fadw-images"
    }

    .financial-advisor-dashboard-widget-images {
        justify-content: end;
    }

    .financial-advisor-dashboard-widget-images > * + * {
        margin-left: 2rem;
    }

    .financial-advisor-dashboard-widget-images img:nth-child(1),
    .financial-advisor-dashboard-widget-images img:nth-child(2) {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .financial-advisor-dashboard-widget-images img:nth-child(1) {
        display: block;
    }
}

@media screen and (min-width: 992px) {
    .financial-advisor-dashboard-widget-images img:nth-child(2) {
        display: block;
    }
}

.col-xs-12 .disabled-button:hover, .col-xs-12 a.button:hover, .col-xs-12 button:hover, .col-xs-12 div.back-button a:hover, .col-xs-12 div.button-row input.button:hover, .col-xs-12 div.button-row input[type=submit]:hover, .col-xs-12 div.button a:hover, .col-xs-12 div.button input.button:hover, .col-xs-12 div.button input[type=submit]:hover, input.button:hover {
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

#igUploadControl .ui-button:hover {
    background:transparent !important;
}

.settings-dropdown li {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

    .settings-dropdown li:first-child {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        overflow: hidden;
    }

    .settings-dropdown li:last-child {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        overflow: hidden;
    }

    .settings-dropdown li:hover a {
        color: #000 !important;
    }

    .settings-dropdown li a {
        background: #fff !important;
        display: block;
        padding: 2px 10px !important;
        margin: 0 !important;
        font-size: 14px;
        line-height: 36px;
        color: rgba(0,0,0,.6) !important;
    }

        .settings-dropdown li a:hover {
            background: #666 !important;
            color: #fff !important;
            text-decoration: none;
        }

.settings-dropdown:before {
    background-color: #fff !important;
    color: #fff;
}

.dashboard-dropdown, .settings-dropdown:before {
    -webkit-box-shadow: 1px 4px 10px rgba(0,0,0,.18) !important;
            box-shadow: 1px 4px 10px rgba(0,0,0,.18) !important;
}

.dashboard-dropdown {
    background: #fff !important;
    background-color: #fff;
    border-radius: 6px;
}

    .dashboard-dropdown:before {
        /*background-color: #fff !important;
        color: #fff;*/
        -webkit-box-shadow: 1px 4px 10px rgba(0,0,0,.18) !important;
                box-shadow: 1px 4px 10px rgba(0,0,0,.18) !important;
    }

    .dashboard-dropdown .dashboard-detail {
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

        .dashboard-dropdown .dashboard-detail:first-child {
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            overflow: hidden;
        }

        .dashboard-dropdown .dashboard-detail:last-child {
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            overflow: hidden;
        }

        .dashboard-dropdown .dashboard-detail:hover a {
            /*color: #000 !important;*/
        }

        .dashboard-dropdown .dashboard-detail a {
            /*background: #fff !important;*/
            display: block;
            padding: 2px 10px !important;
            margin: 0 !important;
            font-size: 14px;
            line-height: 22px; /*line-height: 36px;*/
            /*color: rgba(0,0,0,.6) !important;*/
        }

            .dashboard-dropdown .dashboard-detail a:hover {
                /*background: #666 !important;*/
                /*color: #fff !important;*/
                text-decoration: none;
            }
.grant-totals-summary {
    text-align: center;
}
@media (min-width: 1024px) {
    .grant-totals-summary {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .total-grant-value {
        text-align: left
    }
}
.grant-totals {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 20px 0 30px;
}
.grant-totals strong,
.contribution-totals strong {
    display: block;
    padding: 0;
    margin: 0;
    font-size: 2em;
}

.total-grant-value strong,
.total-contribution-value strong {
    display: block;
    font-size: 3em;
}
.definitions-list {
    background-color: rgba(0,0,0,.15);
    padding: 0;
    border-radius: 0;
    border: none !important;
    margin-top: 0;

    height: auto;
    padding: 20px 20px 0 20px;
}
@media only screen and (min-width: 768px) {
    .definitions-list {
        margin: -29px -44px -29px;
    }
}


.definitions-list ul {
    /*transition: all .5s ease 0s;*/
    height: 100px;
    overflow: hidden;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    -webkit-box-pack: center;
            justify-content: center;
    -ms-flex-align: stretch;
    -moz-align-items: stretch;
    -webkit-box-align: stretch;
            align-items: stretch;
    clear: both;
    height: auto;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

/*.definitions-list.grants-definitions-list ul { height: auto !important; background-color: rgba(0,0,0,.05); display: inherit; }
.definitions-list.grants-definitions-list ul li { min-width: 25%; display: block; float: left; padding: 15px 10px; }
.definitions-list.grants-definitions-list ul li:nth-child(4) { clear: right; }*/

.definitions-list ul, .definitions-list ul li {
    margin: 0;
    padding: 0;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
}

.definitions-list ul li {
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
            flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    list-style: none;
    max-width: 25%;
    min-width: 5%;
    -ms-flex: 1 0 25%;
        flex: 1 0 25%;
}

.definitions-list ul li a {
    display: block;
    padding: 6px 12px;
    color: rgba(0,0,0,.6);
    font-weight: bold;
    font-size: 1.1em;
    cursor: initial;
}

.definitions-list ul li a:hover {
    color: rgba(0,0,0,.6) !important;
    text-decoration: none;
}
.definitions-list ul li a:active {
    color: rgba(0,0,0,.6) !important;
    text-decoration: none;
}

.definitions-list ul li .definition {
    padding: 4px 12px;
    color: rgba(0,0,0,.7);
    font-size: 12px;
    display: block !important;
}

.definitions-list p {
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding-bottom: 6px;
    padding-top: 4px;
    padding-left: 10px;
    color: rgba(0,0,0,.4);
    margin-bottom: 0;
}

div.info-text-border, hr.content-line, hr.form-line {
    border-bottom: 1px solid rgba(0,0,0,.1) !important;
}

.form-row label {
    /*text-transform: uppercase;*/
    color: rgba(0,0,0,.6);
}
.has-error label {
    color: #C41200 !important;
}

.special-instructions label {
    color: #C41200;
}

textarea {border-radius: 4px;}
input[type="number"], input[type="date"], input[type="datetime"], input[type="email"], input[type="file"] {border-radius: 4px;}

input[type=email], input[type=password], input[type=text], textarea {
    font-size: 14px;
    padding-left: 6px;
    border: 1px solid rgba(0,0,0,.22);
    height: 28px;
    border-radius: 4px;
    margin-top: 2px;
    width: 100%;
}

select {
    border: 1px solid rgba(0,0,0,.22);
    border-radius: 4px;
    font-size: 14px;
    line-height: 18px;
    padding: 4px 12px;
}

.dashboard-tiles {
    border-radius: 8px;
}

.dashboard-tiles .dashboard-tile {
    border-radius: 8px;
    -webkit-transition: all .2s ease 0s;
    -o-transition: all .2s ease 0s;
    transition: all .2s ease 0s;
}

.dashboard-tiles .dashboard-tile .content div.total {
    font-size: 40px !important;
    font-weight: 200 !important;
}

@media (max-width:600px) {
    .dashboard-tiles .dashboard-tile .content div.total {
        font-size: 30px;
    }
}

.dashboard-tiles .dashboard-tile .content div.title {
    font-size: 16px;
    font-weight: 400;
    opacity: .8;
}

@media (max-width:600px) {
    .dashboard-tiles .dashboard-tile .content div.title {
        font-size: 14px;
    }
}

.Widgetclass {
    border-radius: 4px !important;
    -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.15) !important;
            box-shadow: 0 2px 3px rgba(0,0,0,.15) !important;
    border: 1px solid rgba(0,0,0,.1) !important;
    overflow: hidden;
}

    .Widgetclass .Widgetheader {
        margin: -10px -10px 0;
        padding: 6px;
        height: 40px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .Widgetclass .button {
        font-size: 11px;
        border-radius: 4px;
        line-height: 16px;
    }

.ui-iggrid-groupbyarea {
    display: -moz-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    -webkit-box-pack: center;
            justify-content: center;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    background-color: rgba(0,0,0,.1) !important;
    border-radius: 6px !important;
    margin-bottom: 6px;
    min-height: 50px;
}

@media (max-width:600px) {
    .grid-mobile-hscroll {
        margin-right: -20px !important;
        margin-left: -20px !important;
    }
}

.ui-iggrid .ui-iggrid-groupedcolumnlabel.ui-draggable {
    background: #111 !important;
    padding-left: 6px;
    color: hsla(0,0%,100%,.8);
    border-radius: 6px;
    margin-right: 6px;
    font-size: 12px;
    line-height: 28px;
    height: 28px;
}

    .ui-iggrid .ui-iggrid-groupedcolumnlabel.ui-draggable .ui-iggrid-groupbylabelrightedgeend {
        display: none;
    }

.ui-iggrid .ui-iggrid-groupbyareatext {
    padding-top: 6px;
    padding-bottom: 6px;
    width: 100%;
    display: block;
    font-size: 12px;
    color: rgba(0,0,0,.5);
    text-shadow: 0 1px 0 hsla(0,0%,100%,.6);
}

    .ui-iggrid .ui-iggrid-groupbyareatext a {
        color: rgba(0,0,0,.95) !important;
        text-shadow: 0 1px 0 hsla(0,0%,100%,.6);
    }

.ui-iggrid .ui-iggrid-filterrow {
    background-color: rgba(0,0,0,.09) !important;
}

.ui-iggrid .ui-iggrid-scrolldiv td a {
    display: -moz-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    -webkit-box-pack: center;
            justify-content: center;
    -ms-flex-align: start;
    -moz-align-items: flex-start;
    -webkit-box-align: start;
            align-items: flex-start;
    word-break: keep-all;
    display: block;
    font-size: 13px; /*font-size: 12px;*/
    font-weight: 600;
    text-decoration: none !important;
    /*color: #000 !important;*/
    /*padding-left: px;
    padding-right: px;*/
    border-radius: 11px;
}

    .ui-iggrid .ui-iggrid-scrolldiv td a:before {
        /*content: "🔗";*/
        padding-right: 4px;
        margin-left: 2px;
    }

    .ui-iggrid .ui-iggrid-scrolldiv td a:hover {
        color: #eee;
        text-decoration: underline !important;
    }

.ui-iggrid .ui-iggrid-tablebody > tr > td:first-child,
.ui-iggrid .ui-iggrid-table > tbody > tr > td:first-child,
.ui-iggrid thead .ui-iggrid-editingcell:first-child,
.ui-iggrid .ui-iggrid-addrow + .ui-iggrid-activerow td:first-child,
.ui-iggrid th.ui-iggrid-rowselector-class:first-child {
    border-left: 0 !important;
}
.ui-iggrid .ui-iggrid-tablebody > tr > td:last-child,
.ui-iggrid .ui-iggrid-table > tbody > tr > td:last-child,
.ui-iggrid thead .ui-iggrid-editingcell:last-child {
    border-right: 0 !important;
}
.ui-iggrid td.ui-state-hover,
.ui-iggrid .ui-ig-altrecord td.ui-state-hover,
.ui-iggrid .ui-ig-altrecord td.ui-state-default.ui-state-hover,
.ui-iggrid th.ui-iggrid-rowselector-class.ui-state-hover,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-hover,
.ui-iggrid .ui-ig-altrecord th.ui-iggrid-rowselector-class.ui-state-default.ui-state-hover,
.ui-iggrid-responsive-vertical tr > td.ui-state-hover:first-child,
.ui-iggrid-responsive-vertical tr.ui-ig-altrecord > td.ui-state-hover:first-child {
    color: #444;
    background: #eaeaea !important;
    border-top: 0;
    border-bottom: 1px solid #aaa;
}
.ui-iggrid tr.ui-ig-altrecord {
    background: #f7f7f7 !important;
    border: none !important;
}

.ui-iggrid tr.ui-ig-altrecord td {
    color: #333;
}

.ui-iggrid tbody td {
    border-bottom: 1px solid #eaeaea !important;
}

.ui-iggrid th {
    background: rgba(0,0,0,.2) !important;
    padding: 4px;
}

.ui-iggrid .ui-iggrid-filtercell {
    border: none !important;
    border-right: 1px solid rgba(0,0,0,.1) !important;
    height: 30px !important; /*height: 20px !important;*/
    background-color: #eee !important;
}

    .ui-iggrid .ui-iggrid-filtercell:hover {
        background-color: #fff;
        border: none !important;
    }

    .ui-iggrid .ui-iggrid-filtercell input {
        background-color: transparent !important;
        height: 30px; /*height: 20px;*/
        line-height: 30px; /*line-height: 20px;*/
        font-size: 14px; /*font-size: 12px;*/
    }

.ui-iggrid .ui-iggrid-filtercell input:focus, .ui-iggrid .ui-iggrid-filtercell input:hover {
    background-color: #fff !important;
}
.ui-iggrid table tbody td, .ui-iggrid .ui-iggrid-header, .ui-iggrid table th {
    padding: 4px 14px !important;
}
table.ui-iggrid-table tbody tr:first-child td {
    border-top: 1px solid #ccc !important;
}
.ui-iggrid-filterrow ui-widget {
    padding: 5px 0;
}
.ui-iggrid td.ui-iggrid-filtercell {
    border: 0 !important;
    padding: 5px 2px !important;
}
.ui-iggrid td.ui-iggrid-filtercell:before {
    border: 0 !important;
}
.ui-igedit-placeholder,
.ui-igedit-placeholder::-webkit-input-placeholder {
    font-size: 12px !important;
    color: #888 !important;
    font-weight: normal;
}
.ui-igedit-placeholder,
.ui-igedit-placeholder:-ms-input-placeholder {
    font-size: 12px !important;
    color: #888 !important;
    font-weight: normal;
}
.ui-igedit-placeholder,
.ui-igedit-placeholder::-ms-input-placeholder {
    font-size: 12px !important;
    color: #888 !important;
    font-weight: normal;
}
.ui-igedit-placeholder,
.ui-igedit-placeholder::placeholder {
    font-size: 12px !important;
    color: #888 !important;
    font-weight: normal;
}
.ui-iggrid td.ui-iggrid-filtercell input {
    padding: 0;
    margin: 0;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    color: #111 !important;
    font-weight: bold;
}
.ui-iggrid .ui-iggrid-filtercell .ui-igedit {
    height: 30px!important; /*height: 40px;*/
}
div.ui-iggrid .ui-iggrid-filtercell .ui-iggrid-filtereditor {
    padding: 0 20px 0 10px !important;
}
.ui-iggrid-filtercell .ui-iggrid-indicatorcontainer {
    position: absolute;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-transform: translateY(31%) translateX(-50%);
        -ms-transform: translateY(31%) translateX(-50%);
            transform: translateY(31%) translateX(-50%);
}
.ui-iggrid-filtercell .ui-iggrid-indicatorcontainer a {
    margin: 0 !important;
    padding: 0 !important;
}
.ui-iggrid-filtercell .ui-iggrid-indicatorcontainer a span {
    position: initial !important;
    top: initial !important;
    left: initial !important;
}
.ui-iggrid-filtercell .ui-iggrid-indicatorcontainer a:before {
    content: '' !important;
}
td.ui-iggrid .ui-igedit-buttonimage, td.ui-iggrid-filtercell .ui-iggrid-filterbutton {
    margin-left: 0 !important;
    margin-top: 0 !important;
}
.ui-iggrid th, .ui-iggrid th.ui-state-default {
    border-left: 0 !important;
    border-right: 0 !important;
}
.ui-iggrid-header.ui-widget-header.text-right {
    text-align: right !important;
}
.ui-iggrid-header.ui-widget-header.text-right span.ui-iggrid-headertext {
    padding-right: 10px;
}
.ui-iggrid-header.ui-widget-header.text-right span.ui-iggrid-headertext:after {
    margin-left: 0;
}
#PendingPaidList_table_RepeatButton span.ui-iggrid-headertext:after {
    display: none !important;
}
.ui-iggrid .ui-igedit-buttonimage {
    display: none !important;
}
.ui-iggrid .ui-igedit-dropdown-button {
    display: none !important;
}
.ui-iggrid .ui-iggrid-headertext, .ui-iggrid .ui-widget-header, .ui-iggrid .ui-widget-header.ui-state-default {
    background: #FFF !important;
}
.ui-iggrid-filterdd, .ui-iggrid-featurechooser-dropdown-dialog, .ui-iggrid-hiding-dropdown-dialog, .ui-iggrid-columnmoving-dropdown-dialog, .ui-iggrid-summaries-dialog, .ui-igpivot-filterdropdown, .ui-igpivot-metadatadropdown {
    padding: 1px;
    -webkit-box-shadow: 0 0 25px rgba(0,0,0,0.25) !important;
            box-shadow: 0 0 25px rgba(0,0,0,0.25) !important;
    z-index: 20000;
}
.ui-iggrid-filtercell .ui-iggrid-indicatorcontainer a:before {
    display: none !important;
}
.ui-iggrid-tablebody tr {
    height: 4em;
}
.ui-iggrid td {
    color: #111;
    font-size: 13px; /*font-size: 13px;*/
}
.popout {
    padding: 3px 10px 2px;
    border: 1px solid #555;
    color: #111 !important;
    border-radius: 5px !important;
    text-transform: uppercase;
    font-size: 0.9em !important;
    text-align: center;
    background: transparent;
    text-decoration: none !important;
    display: inline-block;
}
a.popout:hover {
    text-decoration: none!important;
}

.ui-iggrid .ui-iggrid-paging, .ui-iggrid th .ui-iggrid-indicatorcontainer, .ui-iggrid th .ui-iggrid-indicatorcontainer .ui-icon {
    display: none;
}

#GuideStarResults .ui-iggrid .ui-iggrid-paging,
#AllApprovedRecipientRecipient .ui-iggrid-paging,
#ConstituentSearchResults .ui-iggrid .ui-iggrid-paging {
    display: block;
}

.ui-iggrid th.ui-state-active span.ui-iggrid-headertext, .ui-iggrid th.ui-state-default span.ui-iggrid-headertext, .ui-iggrid th.ui-state-hover span.ui-iggrid-headertext, .ui-iggrid th span.ui-iggrid-headertext {
    position: relative;
    font-size: 12px;
    line-height: 14px !important;
    text-decoration: none !important;
    color: #555 !important;
    text-transform: uppercase !important;
    border: none !important;
    display: inline-block;
    white-space: normal;
}
.ui-iggrid-colheaderasc span.ui-iggrid-headertext,
.ui-iggrid-colheaderdesc span.ui-iggrid-headertext,
.ui-iggrid-headercell-featureenabled span.ui-iggrid-headertext {
    width: initial !important;
    display: inline-block !important;
    -o-text-overflow: initial !important;
       text-overflow: initial !important;
    overflow: initial !important;
    white-space: initial !important;
    float: none !important;
    line-height: initial !important;
}

div.ui-iggrid .ui-widget-content th.ui-iggrid-colheaderasc,
div.ui-iggrid .ui-widget-content th.ui-iggrid-colheaderdesc {
    background: #eee !important;
}
.ui-iggrid th span.ui-iggrid-headertext:after {
    content: '\25bc';
    position: absolute;
    top: 0px;
    width: 10px;
    height: 10px;
    margin-left: 3px;
    font-size: 0.6em;
    color: #bbb;
}
.ui-iggrid .ui-iggrid-headertext, .ui-iggrid .ui-widget-header, .ui-iggrid .ui-widget-header.ui-state-default {
    background: transparent !important;
}
.ui-iggrid-colheaderasc .ui-iggrid-headertext:after {
    content: '\25b2' !important;
    top: -1px !important;
    color: #111 !important;
}
.ui-iggrid-colheaderdesc .ui-iggrid-headertext:after {
    color: #111 !important;
 }
.ui-iggrid td.ui-state-highlight {
    background: initial !important;
}
.ui-iggrid tfoot td.ui-widget-content, .ui-iggrid tfoot td.ui-state-default {
    border-width: 0 !important;
}

.blockUI,
.blockui-box {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    background-color: #FFF;
}

    .blockui-box h2 {
        font-size: 16px;
        font-weight: 400;
        color: hsla(0,0%,100%,.6);
    }

.errorbox {
    background: #C41200 !important;
    color: #fff;
    /* PHNX-14093: 8px to match the other five message boxes. dfx.css loads after
       css/site.css, so this rule - not the shared 8px one there - is what the browser
       actually applies to .errorbox. Leaving it at 6px made error boxes the odd one out. */
    border-radius: 8px;
}

.lit-cell {
    margin-top: 24px;
}

    .lit-cell h3 {
        font-size: 18px;
        font-weight: 300;
        margin-bottom: 20px !important;
        color: rgba(0,0,0,.87);
    }

    .lit-cell .tabs-topic {
        margin-top: -10px;
        padding-top: 20px;
        border-right: 1px solid rgba(0,0,0,.1);
        border-left: 1px solid rgba(0,0,0,.1);
        border-bottom: 1px solid rgba(0,0,0,.1);
        padding: 20px;
    }

        .lit-cell .tabs-topic em {
            color: rgba(0,0,0,.4);
        }

ul.list-docs {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 16px;
}

    ul.list-docs li {
        margin: 0;
        padding: 0;
    }

        ul.list-docs li:first-child a {
            border-top: none;
        }

        ul.list-docs li a {
            padding: 10px 12px 10px 0;
            display: block;
            border-top: 1px solid rgba(0,0,0,.1);
            text-decoration: none !important;
            color: rgba(0,0,0,.76) !important;
        }

            ul.list-docs li a:hover {
                color: #000;
            }

            ul.list-docs li a:after {
                content: "▶";
                float: right;
                opacity: .4;
            }

.auth0-login-content {
    min-width: 18rem;
    display: flex;
    flex-direction: column;
}

/* PHNX-14093: removed orphan .login-content-container / .login-content-gradient* /
   .login-content-box rules - no view emits any of those classes. .login-content
   itself is live (Areas/Login/Views/Shared/_Login.cshtml) and stays. */
@media (max-width: 480px) {
    .login-content {
        margin: 0 10%;
    }
}

    .forgot-link {
        text-decoration: underline;
    }

.col-xs-12 div.login-button input.button,
.col-xs-12 div.login-button input[type=submit] {
    display: inline-flex;
    border-radius: 4px !important;
    margin-bottom: 10px;
    margin-left: 0px;
    cursor: pointer;
    text-decoration: none;
    font-weight: normal;
    width: 100%;
    border: 1px solid rgba(0,0,0,.1);
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

div.login-button.dfx-login-button-margin {
    margin: .3rem 0 .4rem 0;
}

div.login-button.auth0-login-button-margin {
    margin: 0 0 .6rem 0;
}

.application-box, .login-box, .login-contact-box {
    background: #fff !important;
    color: rgba(0,0,0,.5)!important;
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
            box-shadow: 0 1px 6px rgba(0,0,0,.1);
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 6px;
    overflow: hidden;
}

    .application-box .title h2, .login-box .title h2, .login-contact-box .title h2 {
        font-size: 16px !important;
        text-shadow: 0 -1px 0 rgba(0,0,0,.2);
        padding: 10px 12px;
        margin: 0 !important;
    }

    .application-box p a, .login-box p a, .login-contact-box p a {
        color: rgba(0,0,0,.7) !important;
    }

    .application-box a, .login-box a, .login-contact-box a {
        color: rgba(0,0,0,.7);
    }

    .application-box .note, .login-box .note, .login-contact-box .note {
        font-size: 12px;
        color: rgba(0,0,0,.4);
        padding: 6px;
        border-radius: 4px;
        font-weight: 400;
        font-style: normal;
        margin-bottom: 0;
    }

    .application-box .button-right, .login-box .button-right, .login-contact-box .button-right {
        width: 100%;
    }

        .application-box .button-right input, .login-box .button-right input, .login-contact-box .button-right input {
            display: inline-block;
            border-radius: 4px !important;
            margin-bottom: 10px;
            margin-left: 5px;
            cursor: pointer;
            text-decoration: none;
            padding: 10px 15px;
            font-size: 14px;
            border: 1px solid rgba(0,0,0,.1);
            -webkit-transition: all .3s ease 0s;
            -o-transition: all .3s ease 0s;
            transition: all .3s ease 0s;
            padding: 10px 12px !important;
            border: none !important;
            width: calc(100% - 4px);
        }

            .application-box .button-right input:hover, .login-box .button-right input:hover, .login-contact-box .button-right input:hover {
                -webkit-transition: all .3s ease 0s;
                -o-transition: all .3s ease 0s;
                transition: all .3s ease 0s;
            }

    .application-box .forgot-link, .login-box .forgot-link, .login-contact-box .forgot-link {
        color: rgba(0,0,0,.5) !important;
        font-size: 12px !important; /*font-size: 10px !important;*/
        text-decoration: none;
    }

    .application-box .row input.input, .login-box .row input.input, .login-contact-box .row input.input {
        font-size: 14px;
        min-height: 32px;
        padding-left: 8px;
        width: 100% !important;
        border-radius: 2px;
        border: 1px solid rgba(0,0,0,.12);
    }

    .application-box .application-box-content, .login-box .application-box-content, .login-contact-box .application-box-content {
        padding: 0;
    }

        .application-box .application-box-content p:first-child, .login-box .application-box-content p:first-child, .login-contact-box .application-box-content p:first-child {
            padding: 10px 12px 0;
            color: rgba(0,0,0,.3);
        }

        .application-box .application-box-content a, .login-box .application-box-content a, .login-contact-box .application-box-content a {
            color: rgba(0,0,0,.5) !important;
        }

        .application-box .application-box-content h4, .login-box .application-box-content h4, .login-contact-box .application-box-content h4 {
            border: none !important;
            color: rgba(0,0,0,.7) !important;
            font-size: 14px;
            border-top: 1px solid rgba(0,0,0,.1) !important;
            font-weight: 500;
            text-transform: uppercase;
            padding: 15px 10px 6px !important;
            margin: 0 !important;
        }

        .application-box .application-box-content ul, .login-box .application-box-content ul, .login-contact-box .application-box-content ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

            .application-box .application-box-content ul li, .login-box .application-box-content ul li, .login-contact-box .application-box-content ul li {
                padding: 0;
                margin: 0;
                padding-left: 10px;
            }

                .application-box .application-box-content ul li:first-child a, .login-box .application-box-content ul li:first-child a, .login-contact-box .application-box-content ul li:first-child a {
                    border-top: none !important;
                }

                .application-box .application-box-content ul li:hover, .login-box .application-box-content ul li:hover, .login-contact-box .application-box-content ul li:hover {
                    background-color: rgba(0,0,0,.1);
                }

                .application-box .application-box-content ul li a, .login-box .application-box-content ul li a, .login-contact-box .application-box-content ul li a {
                    padding: 10px 12px 10px 0;
                    display: block;
                    border-top: 1px solid rgba(0,0,0,.1);
                    text-decoration: none !important;
                }

                    .application-box .application-box-content ul li a:hover, .login-box .application-box-content ul li a:hover, .login-contact-box .application-box-content ul li a:hover {
                        color: #000;
                    }

                    .application-box .application-box-content ul li a:after, .login-box .application-box-content ul li a:after, .login-contact-box .application-box-content ul li a:after {
                        content: "▶";
                        float: right;
                        opacity: .4;
                    }

#ContentPlaceHolder1_main_accountDetail_rowDisclaimer {
    font-size: 13px;
    font-style:italic;
    margin-top: 10px;
    color: rgba(0,0,0,.5);
}

#ContentPlaceHolder1_main_accountDetail_pnlDocument .col-name {
    -o-text-overflow: ellipsis !important;
       text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    display: block !important;
}

#ContentPlaceHolder1_main_accountDetail_pnlDocument .account-details-contributions-value:last-child, #ContentPlaceHolder1_main_accountDetail_pnlDocument div.account-details-contributions-label:last-child, #ContentPlaceHolder1_main_accountDetail_pnlDocument div.asset-row:last-child {
    margin-bottom: 20px;
}

.card-info {
    background-color: #ebebeb;
    border-radius: 3px;
    padding: 20px;
}

.card-info label {
    width: 100%;
    clear: both;
}

.card-info select {
    width: auto !important;
}

.card-detail label {
    padding-top: 15px;
}

.card-info .card-number-input.error {
    border-color: red;
}

.card-info .card-number img {
    height: 20px;
}

.accepted-cards label {
    padding-bottom: 10px;
}

.accepted-cards-list card {
    display: block;
    margin: 0 10px 10px 0;
    float: left;
}

.credit-card-row .form-row .form-row {
    margin-top: 3px;
}

@media screen and (max-width: 640px) {
    .card-info .exp-date {
        padding-left: 15px;
        
    }

    .card-info .security-code {
        padding-right: 15px;
    }

    .card-info {
        border: none;
    }
}

#ContentPlaceHolder1_main_accountDetail_pnlDocument div.account-holdings-row:first-child {
    margin-top: 15px !important;
}

#ContentPlaceHolder1_main_accountDetail_pnlDocument div#account-holdings-chart {
    padding-top: 20px;
}

    #ContentPlaceHolder1_main_accountDetail_pnlDocument div#account-holdings-chart img {
        max-width: 75% !important;
    }

#dynamic-fields.account-details-dynamic-fields .row {
    border: none !important;
}

/* #ContentPlaceHolder1_main_accountDetail_pnlDocument .row-content .row .col-xs-2, #ContentPlaceHolder1_main_accountDetail_pnlDocument .row-content .row .col-xs-4, #ContentPlaceHolder1_main_accountDetail_pnlDocument .row-content .row .col-xs-6 {
    font-size: 13px;
    line-height: 24px;
}
*/
/*  Donor Impact Changes // May/2017
    ---------------------------------------
*/
body {
    color: #444;
    font: normal 14px/1.4 Roboto;
    background-color: #fff;
    margin: 0;
}
.account-nav-close {
    display: none;
}
.doc-context-menu {
    display: none;
}
.doc-select-back-button {
        display: inline-block;
        margin: 0;
        position: relative;
        bottom: -20px;
    }
.doc-select-back-button:before {
    display: inline-block;
    content:"\2039";
    margin-right: 5px;
    font-size: 1.2em;
}
.doc-select-details a {
    display: none;
    margin: 16px 0 10px 0;
}
.doc-select-details a:first-child,
.doc-select-details a:last-child {
    display: block;
}
.doc-select-details a:hover {
    text-decoration: none;
}
.doc-select-details a span.fa {
    display: inline-block;
    padding-right: 8px;
}
.doc-select-details h2 {
    padding: 0;
    font-weight: bold;
    letter-spacing: -0.035em;
    margin-bottom: 5px;
}
.doc-select-details > div > span,
.doc-select-details > div > div > span  {
    text-transform: uppercase;
    display: block;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    line-height: 0.8rem;
    margin-bottom: 10px;
}
@media (min-width: 992px) {
    h1 {
        width: 100%;
        display: block;
        margin: 20px 0 5px;
        padding: 0 0 30px;
    }

    .doc-select-control {
        position: relative;
    }
    .doc-select-control ul,
    .doc-select-control li {
        margin: 0; padding: 0;
        list-style: none;
    }
    .doc-select-control > ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
    }
    .doc-select-control > ul > li:hover:after {
        position: relative;
        z-index: 199;
        top: -3px;
        right: -3px;
        display: block;
        content: "";
        height: 3px;
        width: calc(100% - 6px);
        background: #fff;
    }
    .doc-select-control > ul > li > a,
    .doc-select-control ul ul li a {
        display: block;
        padding: 13px 35px;
    }
    .doc-select-control > ul > li > a,
    .doc-select-control > ul > li > a:active {
        position: relative;
        z-index: 199;
        border: 3px solid #777;
        font-weight: bold;
        border-radius: 13px;
        padding-left: 25px;
        -webkit-transition: 0.1s;
        -o-transition: 0.1s;
        transition: 0.1s;
        text-decoration: none !important;
        outline: none !important;
    }
    .doc-select-control > ul > li:hover > a,
    .doc-select-control > ul > li:hover > a:hover,
    .doc-select-control > ul > li:hover > a:active,
    .doc-select-control > ul > li:hover > a:visited,
    .doc-select-control > ul > li:hover > a:focus {
        text-decoration: none !important;
        border-radius: 13px 13px 0 0;
        -webkit-backface-visibility: hidden;
        cursor: default;
    }
    .doc-select-control > ul > li > a:after {
        position: absolute;
        top: 5px;
        right: 10px;
        content: "\203A";
        font-size: 1.4em;
        padding: 3px 10px 3px 7px;
    }
    .doc-select-control > ul > li:hover > a:after {
        padding: 3px 8px 3px 9px;
        -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
                transform: rotate(90deg);
    }
    .doc-select-control ul ul {
        position: absolute;
        z-index: -1;
        top: calc(100% - 6px);
        right: 0;
        width: 100%;
        border: 3px solid rgb(141, 156, 177);
        background: #fff;
        border-radius: 8px 0 8px 8px;
        overflow: hidden;
        -webkit-transform: scaleY(0);
            -ms-transform: scaleY(0);
                transform: scaleY(0);
        -webkit-transform-origin: right top;
            -ms-transform-origin: right top;
                transform-origin: right top;
        -webkit-transition: all 0.1s;
        -o-transition: all 0.1s;
        transition: all 0.1s;
    }
    .doc-select-control ul ul li:not(:first-child) {
        border-top: 1px solid #eee;
    }
    .doc-select-control ul ul li {
        overflow: hidden;
    }
    .doc-select-control ul li:hover ul {
        z-index: 9;
        -webkit-transform: scaleY(1);
            -ms-transform: scaleY(1);
                transform: scaleY(1);
    }
    .doc-select-control ul li ul li:hover a {
        background: #f2f2f2;
    }
    .doc-select-details {
        border-top: 1px solid #eee;
        padding: 25px 0 15px;
    }
    .doc-select-details a:first-child,
    .doc-select-details a:last-child {
        display: inline-block;
    }
    .doc-select-details h2 {
        margin: -10px 0 3px;
        text-align: right;
    }
    .doc-select-details h3 {
        margin-bottom: 3px;
        text-align: right;
    }
    .doc-select-details > div > span,
    .doc-select-details > div > div > span {
        text-align: right;
        margin-bottom: 0;
    }
    .doc-select-details > div > div > div {
        text-align: right;
        margin-top: 5px;
    }
    .doc-select-details a {
        display: inline-block;
        margin: 16px 40px 0 0;
    }
    .doc-context-menu {
        display: block;
        padding-right: 0;
        padding-left: 25px;
    }
    .doc-context-menu .row {
        padding: 0 15px;
        margin: 0;
    }
    .doc-context-menu .section-title {
        margin: 0;
        padding: 0;
    }
    .doc-context-menu ul {
        margin: 0 -15px;
        padding: 0;
        list-style: none;
    }
    .doc-context-menu ul li {}
    .doc-context-menu ul li a {
        color: #777 !important;
        display: block;
        padding: 13px 15px;
    }
    .doc-context-menu ul li a:hover {
        color: rgb(141, 156, 177) !important;
        background: #fafafa;
    }
    .doc-context-menu ul li.active a {
        background: rgb(83, 98, 119);
        color: #fff !important;
        font-weight: bold;
    }
    .row.flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .flex-first {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
    }
    .flex-last {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
    }
    .push-aside-right {
        padding-right: 0;
        padding-left: 25px;
    }
    .push-aside-left {
        padding-right: 25px;
        padding-left: 0;
    }
    .push-aside-left > .row,
    .push-aside-left--row,
    .push-aside-right > .row {
        margin-left: 0;
        margin-right: 0;
    }
    .sidebar .row-content {
        padding: 0;
    }
    .sidebar-login-box .row-content {
        padding: 0 15px;
    }
    .custom-content-fix-margins {margin-left: -17px; margin-right: -17px;}
    .sidebar div.custom-content-fix-margins-sidebar { padding: 30px;}

    /*.row.no-gutters {
      margin-right: 0;
      margin-left: 0;
    }
    .row.no-gutters > [class^="col-"],
    .row.no-gutters > [class*=" col-"] {
      padding-right: 0;
      padding-left: 0;
    }
    */
    .fix-nested-gutter {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        margin-left: -38px;
        margin-right: -38px;
    }
    .sidebar .fix-nested-gutter {
        display: block;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: inherit;
                flex-direction: inherit;
        -webkit-box-pack: inherit;
            -ms-flex-pack: inherit;
                justify-content: inherit;
        margin-left: -15px;
        margin-right: -15px;
    }
    .fix-nested-gutter > .col-md-6 {
        width: calc(50% - 35px) !important;
    }
    .fix-nested-gutter > .col-md-4 {
        width: calc(33.3333% - 30px) !important;
    }
    .fix-nested-gutter > .col-md-3 {
        width: calc(33.3333% - 30px) !important;
    }
}
.fix-column-height--column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.fix-column-height--row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1
}
.fix-column-height--interior-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.fix-column-height--interior-row-title {
    -webkit-box-flex: 0;
        -ms-flex: 0;
            flex: 0;
}
.fix-column-height--interior-row-content {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}
div.top-doc-header {
    width: 100%;
    background: #fff;
}
div.top-doc-header .row {
    position: relative;

}
.doc-heading-row {
    margin-top: 25px;
}
.doc-heading-row h1 {
    margin: 20px 0 40px;
    padding: 0;
}
div.doc-nav {
    margin-top: 0;
}
div.section-title {
    color: inherit !important; /* ISP */
    background: #fff;
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
}
div.section-title h2 {
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #767676 !important;
    background: inherit !important;
    font-size: 16px;
    padding: 18px 0;
    min-width: initial;
    border-radius: 0;
}
div.row-content {
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
    border: 0 !important;
    background-color: #FFFFFF;
    padding: 30px;
    margin-bottom: 25px;
    border-radius: 2px;
}
.divide {
    border-top: 1px solid #eee;
    margin: 20px 0;
    padding-top: 30px;
}
    .divide:first-child {
        border-top: 0;
        margin: 0;
        padding: 0;
    }

@media (max-width:991px) {
    div.row-content {
        padding: 16px 0;
    }
    .doc-select-control ul {
        width: 100%;
        margin: 0 0 30px;
        padding: 0;
        list-style: none;
    }

    .doc-select-control > ul > li > a,
    .doc-select-control ul ul li a {
        display: block;
        padding: 13px 35px;
        color: #777;
    }
    .doc-select-control > ul > li > a,
    .doc-select-control > ul > li > a:active {
        position: relative;
        z-index: 199;
        font-weight: bold;
        padding-left: 25px;
        -webkit-transition: 0.1s;
        -o-transition: 0.1s;
        transition: 0.1s;
        text-decoration: none !important;
        outline: none !important;
    }
    .doc-select-control > ul > li > a,
    .doc-select-control > ul > li > a:hover,
    .doc-select-control > ul > li > a:active,
    .doc-select-control > ul > li > a:visited,
    .doc-select-control > ul > li > a:focus {
        text-decoration: none !important;
        border: 3px solid rgb(141, 156, 177);
        -webkit-backface-visibility: hidden;
    }
    .doc-select-control > ul > li > a:after {
        position: absolute;
        top: 5px;
        right: 10px;
        content: "\203A";
        font-size: 1.4em;
        padding: 3px 10px 3px 7px;
    }
    .doc-select-control > ul > li.active > a {
        border-bottom: 0;
    }
    .doc-select-control > ul > li.active > a:after {
        padding: 3px 8px 3px 9px;
        -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
                transform: rotate(90deg);
    }
    .doc-select-control ul ul {
        border: 0;
        margin: 0;
        display: none;

    }
    .doc-select-control ul li.active ul {
        display: block;
        border: 3px solid rgb(141, 156, 177);
        border-top: 0;
    }
    .doc-select-control ul ul li {
        padding: 0;
        border-top: 1px solid #ddd;
    }
    .doc-select-control ul ul li a {
        padding: 13px 25px;
    }

}
.page-title {
    display: block;
}
div.doc-nav {
    background: #fff !important;
}
.aside {
    text-align: center;
}
.aside h2 {
    text-align: left;
    display: block !important;
}
.aside h4 {
    text-transform: initial !important;
}
.aside-advisor--image {
    margin: 15px auto;
    width: 70%;
    max-width: 250px;
    border-radius: 50%;
    overflow: hidden;
}
.aside-goals--text {
    padding-left: 20px;
}
.aside-goals--edit {
    float: right;
}
.aside-goals--add {
    display: block;
    margin: 35px 0;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.aside-goals--add:focus,
.aside-goals--add:hover {
    text-decoration: none !important;
}
.aside-goals--add-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: 6px solid inherit;
    border-radius: 50%;
    width: 75px;
    height: 75px;
    margin: 10px auto;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.aside-goals--add-icon p {
    margin-bottom: 15px;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.aside-goals--add .fa {
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.current-account .account-box {
    display: none;
}
.isp-nav .top-nav-row {
    padding: 0;
}
.trans-fix-padding {

}
.trans-history-link {
    position:relative;
    display: block;
    padding: 10px 15px;
    margin: 0 -15px;
    border-top: 1px solid #f2f2f2;
    color: #555 !important;
    text-decoration: none !important;
}
    .trans-history-link:first-child {
        border-top: 0;
    }
.trans-history-link:hover {
    background: #f2f2f2;
    color: #222 !important;
    text-decoration: none !important;
}
    .trans-history-link.disabled:hover {
        background: initial;
        cursor: default;
    }
.trans-history-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
}
    .trans-history-row:first-child {
        border-top: 0;
    }

.trans-history-row > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding: 0;
}
.trans-history-date {
    line-height: 1.75em;
    font-size: 0.8em;
    font-weight: bold;
    color: #767676;
}
.trans-history-link:hover .trans-history-date {
    color: #444;
}
.trans-history-name {
    line-height: 1.25em;
    font-weight: bold;
}
.trans-history-links {
    line-height: 2em;
}
.trans-history-links a:first-child {
    padding-right: 15px;
}
.trans-history-qty-heading {
    font-size: 0.8em;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.5em;
    text-align: right;
}
.trans-history-qty {
    display: none;
    line-height: 1.75em;
    font-size: 0.8em;
    font-weight: bold;
    color: #999;
    text-align: right;
}
.trans-history-value-heading {
    font-size: 0.8em;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 1.5em;
    text-align: right;
}
.trans-history-value {
    line-height: 1em;
    text-align: right;
}
.goal-group {
    padding-top: 20px;
    border-top: 1px solid #eee;
    margin: 0 0 10px;
}
    .goal-group:first-child {
        padding-top: 0;
        border-top: 0;
    }
.goal-group-title {
    text-transform: initial !important;
}
.goal-group-value-heading {
    padding: 0; margin: 0;
}
.shrink-padding-top {
    padding-top: 10px;
}
@media (min-width: 992px) {
    .contribution-summary-panel,
    .grant-summary-panel {
        margin-top: -60px;
    }

    .contribution-summary-title,
    .grant-summary-title {
        display: none;
    }
}

.errorbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.donor-circle-row {
    padding: 25px 0;
    border-top: 1px solid #eee;
}
.donor-circle-row:first-child {
    padding-top: 0;
    border-top: 0;
}
.dc-title { font-weight: bold; font-size: 16px; }
.dc-img img {
    display: block;
    width: 100%;
    height: auto;
}
.dc-latest-list h5 {
    padding-top: 0;
    margin-top: 5px;
}
.dc-latest-list ul {
    margin: 0;
    padding: 0;
}
.dc-latest-list ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}
div.row-content.errorbox,
div.row-content.successbox,
div.row-content.warningbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 15px 30px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 25px;
}
@media (min-width: 992px) {
    .givopp-single .givopp-img {
        margin: -30px 0 -30px -45px;
    }
    .givopp-double .givopp-img,
    .givopp-multiples .givopp-img {
        margin: -30px -45px 15px -45px;
    }
    .givopp-multiples {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .givopp-multiples { display:block\9; }
    }
}
.givopp-img img {
    width: 100%;
}

.input-group .ui-igedit-container {
    height: 34px;
    display: table-cell;
    border-radius: 0 4px 4px 0;
}
.input-group .ui-igedit-container .ui-igedit-input {
    padding: 6px 12px;
    margin-top: 0;
}

.input-group .ui-igedit-container .ui-igedit-input:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.input-group .ui-igeditor-input-container {
    width: calc(100% - 28px);
}
.input-group .ui-igedit-button-common {
    padding: 0;
    min-width: 25px;
}
.input-group .ui-igedit-buttonimage {
    -webkit-transform: translateX(25%);
        -ms-transform: translateX(25%);
            transform: translateX(25%);
}
.input-group label {
    margin-bottom: 0;
}
.bump-top {
    margin-top: 30px;
}
.bump-bottom {
    margin-bottom: 30px;
}
div.charts-container span.progress-label {
    font-size: 0.8em !important;
}
.text-button {
    margin: 9px 13px;
    color: #777;
}
.button-group {
    margin: 20px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.comment-author-date {
    border-top: 1px solid #eee;
    margin-top: 20px;
    padding: 15px 0 15px;
    font-style: italic;
    font-weight: bold;
}
    .comment-author-date:first-child {
        margin-top: 0;
        padding-top: 0;
        border: 0;
    }
.donor-circle-article .comment-text {
    margin: 0 0 30px;
}
.donor-circles-article-comments .form-row {
    margin: 20px -15px;
}
.grant-recipient-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.grant-recipient-list li {
    display: inline-block;
    min-width: calc(33.3333% - 20px);
    margin: 5px;
    border-radius: 8px;
}
.grant-recipient-list li.active {

}
.grant-recipient-list li a {
    color: white;
    display: block;
    padding: 8px 15px;
}
.grant-recipient-list li a:hover,
.grant-recipient-list li a:active {
    color: white;
}
.grant-recipient-list li.active a {
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
}
#recipient-load-block {
    display: none;
}
#recipient-load-block.active {
    clear: both;
    margin-top: 20px;
    display: block;
    width: 100%;
}
.impact-graph-row__bar {
    min-height: 35px;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    background: #f2f2f2;
}

.impact-graph-row__bar-progress {
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    width: 0%;
    height: 100%;
    margin: 0 -15px;
}
[data-key="0"] .impact-graph-row__bar-progress {
    background: #1371BD;
}
[data-key="1"] .impact-graph-row__bar-progress {
    background: #0A872F;
}
[data-key="2"] .impact-graph-row__bar-progress {
    background: #c21445;
}
[data-key="3"] .impact-graph-row__bar-progress {
    background: #810379;
}
.impact-graph-row__value {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    padding: 0 25px 0 0;
    text-align: right;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    background: #f2f2f2;
    min-height: 35px;
}

.impact-graph-row__value span {
    font-size: 1.4em;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.4);
    letter-spacing: -0.05em;
}
@media only screen and (max-width: 768px) {
    .impact-section-wrapper[data-key~="-1"] {
        display: none;
    }



    .impact-graph-row__title {
        text-align: right;
        padding-right: 26px;
        font-weight: bold;
        padding-bottom: 5px;
        color: #555;
    }

    .impact-section__content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .impact-section__title {
        border-bottom: 1px solid #ddd;
    }

        .impact-section__title h3 {
            margin-top: 10px;
            margin-bottom: 15px;
            font-size: 1em;
        }

    .impact-section__content h4 {
        border: 0 !important;
    }

    .impact-section-wrapper {
        padding: 10px 10px 25px;
        background: #eee;
        margin-top: 15px;
        text-align: center;
    }

    .impact-section__content {
        padding-top: 15px;
    }

    .impact-section__content-item {
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
        text-align: center;
        padding: 0 20px;
    }

        .impact-section__content-item h4 {
            font-size: 2em !important;
            margin-bottom: 0 !important;
        }

        .impact-section__content-item span {
            font-size: 1em;
            line-height: 0.7em;

        }

    .impact-graph-row__bar-progress {
        min-height: 35px;
    }



    .impact-graph__row {
        margin: 0 0 10px;
    }
}
@media only screen and (min-width: 768px) {
    .impact-section-wrapper[data-key~="-1"] {
        display: block;
    }
    .impact-grid {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        min-height: 223px;
    }

    .impact-graph {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 0;
        margin: -5px;
    }

    .impact-graph__row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        min-width: 100%;
        padding-top: 7px;
        padding-bottom: 7px;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        margin: 0 !important;
    }

        .impact-graph__row:first-child {
            padding-top: 0;
        }

        .impact-graph__row:last-child {
            padding-bottom: 0;
        }
    .impact-section [data-key="0"] {
        background: #1371BD;
    }
    .impact-section [data-key="1"] {
        background: #0A872F;
    }
    .impact-section [data-key="2"] {
        background: #c21445;
    }
    .impact-section [data-key="3"] {
        background: #810379;
    }
    .impact-graph-row__title {
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        text-align: right;
        background: white;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .impact-graph-row__title span {
        color: #536277;
        font-weight: bold;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .impact-section {
        background: #1e265a;
        margin: -5px -5px -5px 15px;
    }

    .impact-section-wrapper {
        position: absolute;
        display: none;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        width: 100%;
        height: 100%;
        margin-left: -15px;
        padding-left: 15px;
        padding-right: 15px;
        opacity: 0;
        -webkit-transition: opacity .3s;
        -o-transition: opacity .3s;
        transition: opacity .3s;
    }

        .impact-section-wrapper.active {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            opacity: 1;
        }

    .impact-section__title {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0 -15px;
    }

        .impact-section__title h3 {
            margin: 0;
            padding: 20px 25px;
            color: #fff;
            font-size: 1.6em;
        }

    .impact-section__content p {
        margin: 20px 25px 15px;
        color: #fff;
        letter-spacing: 0.025em;
    }

    .impact-section__content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        background: rgba(255, 255, 255, 0.25);
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-flex: 2;
        -ms-flex-positive: 2;
        flex-grow: 2;
        margin: 0 -15px;
    }

    [data-key~="-1"] .impact-section__content {
        display: block;
    }

    .impact-section__content-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 20px 25px 15px;
    }

    .impact-section__content h4 {
        font-size: 3.5em !important;
        color: #fff;
        font-weight: normal !important;
        border-bottom: 0 !important;
        letter-spacing: -0.05em;
        margin: 0 !important;
        padding: 0 !important;
    }

    .impact-section__content span {
        font-weight: 400;
        color: #fff;
        margin-bottom: 5px;
        text-align: center;
    }

    .impact-section__content .button {
        margin: 0 20px 10px;
    }

    .impact-section__title h3,
    .impact-section__content p {
        font-weight: 400;
    }

    .impact-section__content .button,
    .impact-section__content .button a {
        margin-bottom: 0 !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .impact-grid {
        padding: 30px !important;
    }
}

.summary-account {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.summary-account-indicator {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background: #ddd;
    margin-bottom: -0.25em;
    margin-right: 1em;
}
@media only screen and (max-width : 768px) {
    .summary-account-value {
        -webkit-transform: translateX(-100px) scale(0.5);
            -ms-transform: translateX(-100px) scale(0.5);
                transform: translateX(-100px) scale(0.5);
        position: relative;
        left: 0;
        top: -75px;
        margin-bottom: -125px !important;
    }
}
.summary-account-value-alt {
    position: relative;
    height: 400px;
    margin: 25px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.summary-account-value {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 25px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.summary-account-value > * {
    position: relative;
    z-index: 10;
}

.summary-account-chart {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.summary-account-chart:after {
    content: "";
    display: block;
    position: absolute;
    width: 85%;
    height: 85%;
    background: #fff;
    border-radius: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.pieTip {
  position: absolute;
  z-index: 15;
  float: left;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 18px 6px;
  border-radius: 2px;
  background: rgba(255,255,255,.97);
  color: #444;
  font-size: 19px;
  text-shadow: 0 1px 0 #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.5);
          box-shadow: 0 0 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.5);
  /*-webkit-transform: all .3s;
     -moz-transform: all .3s;
      -ms-transform: all .3s;
       -o-transform: all .3s;
          transform: all .3s;*/
  pointer-events: none;
}
.pieTip:after {
      position: absolute;
      left: 50%;
      bottom: -6px;
      content: "";
      height: 0;
      margin: 0 0 0 -6px;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-top: 6px solid rgba(255,255,255,.95);
      line-height: 0;
}
.summary-account-chart path { cursor: pointer; }
.summary-account-value-alt strong,
.summary-account-value strong {
    font-size: 3.4em;
    letter-spacing: -0.05em;
    margin: 0;
    padding: 0;
}
.summary-account-value span {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.8em;
}
.summary-account-list {
    margin-bottom: 30px;
}
.summary-account-list-row {
    margin: 0;
}
.summary-account-list-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 12px 0 10px;
}
.summary-account-list-link div:first-child {
    text-decoration: underline;
}
.summary-account-list-link .text-right {
    font-weight: normal;
    color: #555;
    font-weight: bold;
    letter-spacing: -0.01em;
}
.summary-account-list-link:hover {
    background: #f2f2f2;
    text-decoration: none;
}
    .summary-account-list-link:active,
    .summary-account-list-link:focus {
        text-decoration: none;
    }

@media screen and (max-width: 48em) {
    .summary-account-list {
        --datagrid-row-display: table-row;
        --datagrid-cell-display: table-cell;
        --datagrid-cell-before-display: none;
        --datagrid-cell-white-space: normal;
    }
}
.flex-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.flex-align__stretch {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}
.flex-align__center {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.flex-justify__end {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

/* ==========================================================================
   LEGACY landing rules - restored verbatim, do not "clean up".

   These are the pre-PHNX-14093 rules. They exist for two WebForms consumers that
   are NOT the MVC login page and are both genuinely reachable:

     RenaissanceWeb/default-v2.aspx        emits .landing-content-wrapper,
                                           .landing-content__tabs,
                                           .landing-content__login
     masterpages/Site.Master:513-531       emits .landing, .landing .container,
                                           .landing__content, and both overlays

   Web.config:110-113/246-249 301-redirect default.aspx -> default-v2.aspx -> /login,
   which is why these look dead. They are not: publicpages/password-reset.aspx.cs:102
   does Server.Transfer("/default-v2.aspx", false), and Server.Transfer is an
   in-process handler transfer that never re-enters the IIS URL Rewrite module. So an
   anonymous user renders default-v2.aspx for real after a password reset, and
   Site.Master.cs:581-592 makes its .landing panel visible on that same render
   (path contains "default" + anonymous).

   The MVC login page overrides all of this via the more specific .login-shell
   descendant selectors in the block below.
   ========================================================================== */

.landing {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
.landing:before {
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
.landing:after {
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-size: cover;
    opacity: 0.5;
    -webkit-filter: contrast(125%) brightness(110%);
            filter: contrast(125%) brightness(110%);
}
.landing .container {
    position: relative;
    height: 100%;
}
.landing__content {
    position: absolute;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}
.landing__content .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    width: 100%;
}
.landing-content__tabs-overlay {
    display: none;
    opacity: 0.9;
}
.landing-content__tabs {
    flex: 2;
    display: none;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.landing-content__login {
    flex: 1;
}
.landing-content__login .auth0-login-wrapper {
    padding-top: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.landing-content__login h1 {
    font-weight: normal;
    font-size: 1.75em;
    margin: 0 0 0em;
    padding: 0 0 1.6rem;
    letter-spacing: -0.02em;
}
.landing-content__login .auth0-h1 {
    font-weight: normal;
    font-size: 24px;
    margin: 0 0 16px;
    padding: 0 0 0em;
    letter-spacing: -0.02em;
}
.landing-content__login .auth0-p {
    font-weight: normal;
    font-size: 16px;
    margin: 0 0 1em;
    padding: 0 0 0em;
    letter-spacing: -0.02em;
}
.landing-content-wrapper {
    margin-top: 20vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}

@media (min-width: 768px) {
    .landing:before, .landing:after {
        width: 70%;
    }
    .landing-content__tabs,
    .landing-content__tabs-overlay {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .landing-content__tabs {
        margin-top: -1em;
    }
    .landing-content-wrapper {
        margin-top: 20vh;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
}

/* ==========================================================================
   PHNX-14093 - Pre-login landing page geometry.

   Rewritten so the background bands and the page content share ONE coordinate
   system. Previously there were three: .landing:before/:after were
   position:fixed at 70% of the VIEWPORT; the overlay panels lived in a nested
   Bootstrap .container (1170px centred) with hardcoded col-md-* widths; and the
   content columns were flex children of a third .container. Nothing lined up, so
   the login card straddled the colour boundary.

   Now: .login-shell is a single flex row and the two panels are real elements in
   normal flow. Only ONE width is declared (on .login-shell__form); .landing takes
   whatever is left via flex:1 1 auto, so the band edge and the column edge are the
   same edge by construction - there is no number to keep in sync and the bug
   cannot silently return.

   Every selector name is preserved on purpose. css/site-isp.aspx:128-146 is a
   per-program generated stylesheet that paints this page through .landing:before,
   .landing:after, .landing-content__tabs-overlay, .landing-content__login-overlay
   and .not-logged-in__*, and per-program overrides loaded via the StyleUrl ISP
   config (e.g. css-isp/bofa.css) target them too - including files hosted outside this
   repo that cannot be audited. Renaming anything here would break programs
   silently. Only positioning and sizing changed.

   Every rule below is scoped under .login-shell, which ONLY this page emits (on its
   <form>). That containment is deliberate: the bare .landing* rules above are shared
   with default-v2.aspx and Site.Master, and must keep their original values there.
   ========================================================================== */

/* Flex chain from <body> down, so the shell fills the space the header leaves without
   anyone hardcoding a header height (the logo, and therefore the header, is per-program). */
.login-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* The header is a flex item of .login-body and so shrinks by default. Pin it.

   Kept as a guard rather than a live fix. It was added when the >=992px block bounded the shell to
   the viewport: pressure from a long tab copy then propagated up the column and squashed the header
   itself - the logo band measured 121px down to 97px, dragging the tab row and everything under it
   upwards. The page is content-driven again now, so nothing generates that pressure and this is
   currently inert. It stays because a header that page content can squeeze is wrong at any width,
   it costs nothing, and this selector only ever matches the login layout. */
.login-body > header {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
}

.login-main {
    position: relative;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

/* --------------------------------------------------------------------------
   The page-level alert stack (.login-alerts, from Areas/Login/Views/Login/Index.cshtml).

   Holds the cross-ISP banner (_CrossISPMessage -> #globalMessage) and the page message
   (.login-page-alert), stacked in DOM order.

   ONE absolutely positioned wrapper, so nothing in it can move the page. Both boxes used to
   affect layout, in different ways: the page message was in flow and pushed the shell down,
   and the banner - out of flow itself - reserved space by padding the shell's inner wrapper,
   which amounted to the same thing. Both mechanisms are gone. There is deliberately no
   space reservation now: the stack overlays the top of the page instead of displacing it.

   Neither box has any CSS of its own anywhere else. They were previously sized purely by
   sitting inside _Layout's .container > .row > .col-xs-12, i.e. container width less the
   15px column gutters, which is what these width steps reproduce. Everything else - padding,
   border, radius, flex layout, the icon, the colours - comes from the shared message-box
   rules in css/site.css:451-575, which is what makes the two identical in shape, size and
   style while differing in colour.

   Positioned against .login-main rather than the viewport, so top: 0 lands exactly under the
   header without hardcoding a header height - the header is sized by the per-program logo. It
   therefore scrolls with the page, which is what it did before; switch to position: fixed if
   it should stay pinned instead.
   -------------------------------------------------------------------------- */

.login-body .login-alerts {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    width: 720px;
    max-width: calc(100% - 30px);
    margin: 10px auto 0;
    box-sizing: border-box;
    /* The stack spans the container width across the top of the shell, and now overlays real
       content instead of displacing it. With no alerts it is zero-height and harmless, but with
       one it would otherwise swallow clicks on whatever sits beneath - in practice the top of
       the card. Children opt back in below. */
    pointer-events: none;
}

/* Children stack in normal flow inside the wrapper and must not position themselves: the
   #globalMessage rule that used to do that is what this block replaces. position: static is
   explicit because these classes are shared with other layouts. */
.login-body .login-alerts > #globalMessage,
.login-body .login-alerts > .login-page-alert {
    position: static;
    width: auto;
    max-width: none;
    margin: 0 0 10px;
    pointer-events: auto;
}

.login-body .login-alerts > :last-child {
    margin-bottom: 0;
}

/* Normalise the icon so both boxes lay out identically.

   site.css positions the glyph differently per variant, by historical accident rather than
   design: .warningbox:before has no `position`, so it is a flex item of the box and occupies
   width, while .errorbox / .successbox / .infobox :before are `position: absolute` and occupy
   none. Padding (15px) and .content's margin-left (25px) are identical across all of them, so
   that one difference was the whole reason the banner's text sat about 36px further right than
   the page message's - the same component appearing to have different spacing.

   Static makes every variant a flex item, matching the warning box the banner uses. `left: 5px`
   and the `bottom: 0` from the shared :before rule are simply inert once static, which is why
   this needs no per-variant unpicking. */
.login-body .login-alerts > *:before {
    position: static;
}

@media (min-width: 992px) {
    .login-body .login-alerts {
        width: 940px;
    }
}

@media (min-width: 1200px) {
    .login-body .login-alerts {
        width: 1140px;
    }
}

/* Sits on the <form>, not on <main> - Html.BeginForm renders between them, so <main> as the
   flex container would make the form its only flex item and the panel widths below would
   never reach the panels.

   margin: 0 is load-bearing. No stylesheet in this repo resets <form>, so the browser
   default bottom margin applies; because this element is the flex item that fills
   .login-main, that margin came off the panels' height and left a strip of bare page
   below them. */
.login-shell {
    margin: 0;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* Mobile: single column. The panels only sit side by side from 768px. */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

/* .landing is now the brand/image panel itself, rather than a z-index:-1 layer
   covering the whole viewport. */
/* IMPORTANT: the legacy .landing* rules above are UNSCOPED, so they apply here too and this
   block only wins for properties it actually declares. Every property those rules set must
   therefore be reset explicitly below, not just the ones this layout cares about. Missing
   any of them is a silent visual bug - z-index:-1 buried this panel behind the alert banner,
   and `width: 70%` on the pseudo-elements painted a phantom fourth colour stripe.

   ONE DELIBERATE EXCEPTION: properties that per-program StyleUrl files are meant to own -
   opacity and background-color on .landing-content__tabs-overlay. Restating those here at
   (0,2,0) outranks the per-program file and silently disables its override. Inheriting the
   legacy value is the point. Do not "complete" that rule by adding them back - see the note
   above .login-shell .landing-content__tabs-overlay below. */
.login-shell .landing {
    position: relative;
    /* resets from the legacy rule: position:fixed, width/height 100%, top/left 0, z-index -1 */
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    z-index: auto;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    overflow: hidden;
    /* Centres the tab copy in the panel, replacing the old `margin-top: 20vh`. The tint
       overlay is position:absolute so it stays out of this flex flow. */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

/* :before = nav bgcolor, :after = the program login image, both from
   site-isp.aspx:128-137. absolute inside .landing instead of fixed at 70% of the
   viewport - this is the actual fix. */
.login-shell .landing:before,
.login-shell .landing:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Resets the legacy `width: 100%` and, critically, the `width: 70%` the legacy
       @media (min-width: 768px) block sets - 70% of this panel is where the phantom
       stripe came from. `auto` lets the left/right insets size the box instead. */
    width: auto;
    height: auto;
    z-index: auto;
}

.login-shell .landing:after {
    background-size: cover;
    opacity: 0.5;
    -webkit-filter: contrast(125%) brightness(110%);
            filter: contrast(125%) brightness(110%);
}

/* Per-program tint behind the tab copy, right-aligned to the panel boundary. Width is
   set per breakpoint below; --image narrows it so the far-left image box survives.

   NOTE: opacity is deliberately NOT declared here. The legacy base rule above
   (.landing-content__tabs-overlay) already sets it to 0.9, which is the value this layout
   wants, and restating it here at (0,2,0) would outrank the per-program StyleUrl overrides
   that set it - css-isp/bofa.css carries `.landing-content__tabs-overlay { opacity: 1 }`
   at (0,1,0) to make BOFA's tint fully opaque white behind its cream tab strip. Those files
   load after this one, so at equal specificity they still win, exactly as they did before
   this layout existed. background-color is left out for the same reason - it belongs to
   site-isp.aspx and the per-program file.

   left: auto matters. With left, right AND width all set, `right` is ignored and the box
   anchors to the left edge - which put the tint on the wrong side of the panel.

   z-index matters too. site-isp.aspx:128-133 gives .landing:after the nav background-color
   in the same selector group as :before and this tint, so :after is a 50%-opacity colour
   veil, not just the image. It is the last child in tree order, so at equal z-index it
   paints OVER this tint and flattens the two regions into one. The old layout avoided that
   by parking .landing and its pseudo-elements at z-index -1 with the tint in a layer above;
   this restores the same order explicitly. */
.login-shell .landing-content__tabs-overlay {
    /* The legacy rule sets display:none, and its @media 768 sets display:flex. Neither is
       right for an absolutely-positioned tint, so state it. */
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    height: auto;
    z-index: 1;
}

/* The light panel that holds the login card / credential form. Grows by default so it
   fills the viewport on mobile, where .landing is hidden and this is the only panel; the
   768px rule below replaces this with the fixed split. */
.login-shell__form {
    position: relative;
    -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

/* No z-index here. Nothing inside this wrapper needs to escape it: the card's create-account
   button is a plain link rather than a slide-down panel, and the .login-alerts stack that
   carries z-index: 3 is a sibling of the shell, not a descendant of this. Only the brand side
   needs to outrank the tint, so the z-index lives on that one below. */
/* Vertical padding only. Horizontal insets are owned by whatever sits inside: the card
   centres itself at max-width 480, and the tab side supplies its own via
   .not-logged-in__tabs / .not-logged-in__content. Adding side padding here squeezed the
   card below its designed width - the 520px panel floor minus 60px of padding is 460px,
   so between 992 and 1430px the card never reached 480. */
.login-shell__inner {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: 40px 0;
    box-sizing: border-box;
}

/* The lockout branch renders no card, so give its box the card's width and centring
   rather than letting it run the full 620px of the wrapper. */
.login-shell__form .login-shell__inner > .errorbox {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* The tab side supplies its own horizontal insets - .not-logged-in__tabs carries
   `margin: 0 60px 0 30px` and .not-logged-in__content `padding: 0 75px 0 30px`, which is
   what puts the copy 30px inside the container edge. Adding the shared inner padding on
   top would double it, so only the vertical padding applies here. */
.login-shell .landing .login-shell__inner {
    /* Outranks the tint (z-index: 1) so the tab copy is not buried under it. Scoped to the
       brand side only - see the note on .login-shell__inner above. */
    z-index: 2;
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Below 768px .landing's only content - the tab strip - is hidden anyway, so the panel
   would render as an empty band of program colour. Hide it and let the light panel fill
   the screen, which is what the old full-viewport light overlay did at this width. */
@media (max-width: 767px) {
    .login-shell .landing {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   The panel boundary.

   Both panels are full-bleed, but the boundary lands exactly on the centred
   Bootstrap container's 8/12 line - the same line all three of Site.Master's
   overlay variants used, so the page still lines up with the rest of the app.

   Derivation at md, where .container is 1170px:
     container left edge L = 50% - 585px
     boundary            = L + 8/12 * 1170 = L + 780px = 50% + 195px
     light panel width   = 100% - boundary = 50% - 195px

   .login-shell .landing is flex: 1 1 auto, so it takes the remainder and its right edge IS
   the boundary. That is the single shared edge - one declaration, nothing to
   keep in sync.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .login-shell {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }

    .login-shell__form {
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    }

    /* Tint and tab copy are both right-aligned to the boundary (right: 0 / margin-left:
       auto inside .landing), so their widths alone decide where they start. */
    .login-shell .landing-content__tabs {
        margin-left: auto;
    }

    /* The widths below are derived from the container, but the card variant's 520px floor
       can make the brand panel narrower than that. Clamping here means both boxes shrink
       with the panel instead of overflowing it; they stay right-aligned to the boundary,
       so the shared edge holds and the image box just gets narrower. */
    .login-shell .landing-content__tabs,
    .login-shell .landing-content__tabs-overlay {
        max-width: 100%;
    }
}

/* sm: .container is 750px, tabs are col-sm-7 (58.333%). No --image variant here on purpose -
   master only offsets at md and up (col-sm-7 is used for both image states), so at sm the tab
   area is the same width either way and there is no image box. */
@media (min-width: 768px) and (max-width: 991px) {
    .login-shell__form {
        width: calc(50% - 62.5px);
    }

    .login-shell .landing-content__tabs-overlay,
    .login-shell .landing-content__tabs {
        width: 437.5px;
    }
}

/* md: .container is 970px.

   The tint and the copy are two DIFFERENT widths, both right-aligned to the boundary - that
   is how the old page looked and it is deliberate:

     tint  always 5/12 (404.17px). Index.cshtml hardcoded col-md-5 col-md-offset-3 on the
           overlay for every program, so the 3/12 image box always exists. Site.Master had a
           wider no-image variant, but the MVC page never used it - do not "restore" it here
           or the darker strip grows past where it has always been.
     copy  8/12 (646.67px) normally, narrowing to 5/12 to sit inside the tint only when the
           program has an image (master's col-md-8 vs col-md-5 col-md-offset-3 on the content
           column). Without an image the copy overhangs its tint to the left, as it always has.
*/
@media (min-width: 992px) and (max-width: 1199px) {
    /* L = 50% - 485px, boundary = L + 8/12 * 970 = L + 646.67px = 50% + 161.67px */
    .login-shell__form {
        width: calc(50% - 161.67px);
    }

    /* 5/12 - leaves the left 3/12 of the container (242.5px) untinted as the image box. */
    .login-shell .landing-content__tabs-overlay {
        width: 404.17px;
    }

    .login-shell .landing-content__tabs {
        width: 646.67px;
    }

    .login-shell .landing--image .landing-content__tabs {
        width: 404.17px;
    }
}

/* lg and up: .container is 1170px. Same tint-vs-copy split as md above. */
@media (min-width: 1200px) {
    .login-shell__form {
        width: calc(50% - 195px);
    }

    /* 5/12 - leaves the left 3/12 of the container (292.5px) untinted as the image box. */
    .login-shell .landing-content__tabs-overlay {
        width: 487.5px;
    }

    .login-shell .landing-content__tabs {
        width: 780px;
    }

    .login-shell .landing--image .landing-content__tabs {
        width: 487.5px;
    }
}

/* The redesigned card is 480px, wider than the old 390px login column, so the light panel
   gets a floor. calc(50% - 195px) only clears 520px at viewports >= 1430px, so above that
   the boundary tracks the container's 8/12 line exactly; below it the floor wins and the
   boundary stops tracking - the card fitting matters more than the 8/12 line. */
@media (min-width: 992px) {
    .login-shell--card .login-shell__form {
        min-width: 520px;
    }
}

/* Below 992px a 520px light panel would leave the brand panel under ~470px - too cramped
   to read tab copy beside the card. Stack instead, which is what this variant already does
   below 768px. The legacy credential form is narrow enough to keep the sm split. */
@media (min-width: 768px) and (max-width: 991px) {
    .login-shell--card {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .login-shell--card .landing {
        display: none;
    }

    .login-shell--card .login-shell__form {
        width: auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    }
}

/* Carried over from the old `.landing-content__login h1`. The legacy (non-Auth0)
   credential form's heading carries only .dfx-h1, which has no rule of its own
   anywhere, so without this it would fall back to the browser default. The Auth0
   card path overrides this via .login-card .auth0-h1 below. */
.login-shell__form h1 {
    font-weight: normal;
    font-size: 1.75em;
    margin: 0;
    padding: 0 0 1.6rem;
    letter-spacing: -0.02em;
}

.login-shell .landing-content__tabs {
    display: none;
    /* Resets the legacy `flex: 2` and `margin-top: -1em`. flex:2 means flex-basis 0% plus
       grow, which in this column-direction panel stretched the box to full height and
       pinned the tab strip to the top - under the alert banner - instead of letting
       .landing's justify-content:center place it. */
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    margin-top: 0;
    /* Tab copy is client-authored via Html.Raw. What actually stops an unbreakable string
       widening the row is `overflow: hidden` on .login-shell .landing above: per the flexbox
       spec a flex item whose overflow is not `visible` gets an automatic minimum size of 0,
       so the panel can shrink past min-content and the string is clipped instead. This
       min-width is belt-and-braces - the cross axis here is horizontal only because .landing
       is a column container. */
    min-width: 0;
}

@media (min-width: 768px) {
    .login-shell .landing-content__tabs {
        display: block;
    }
}

/* PHNX-14093: the page scrolls; the background image and the login card stay locked.

   The tab copy is client-authored - Index.cshtml emits LoginTab{1,2,3}Content through Html.Raw -
   so its length is entirely up to the program, and nothing bounded it: it grew
   .not-logged-in__content, which grew .landing, which grew the flex row, which grew the page. A
   12-section tab measured 5115px of page on an 800px viewport.

   The first attempt pinned the page to viewport height and gave each panel its own scrollbar.
   This replaces that with the inverse, which is what the design calls for: the page scrolls again
   and the copy drives its height, while the two things that should not move - the program's
   background image and the login card - stay locked to the screen.

   Three parts:

     1. The page is content-driven again. .login-body keeps only its base min-height:100vh; the
        `height: 100vh` and the min-height:0 chain that let the shell shrink are both gone, as are
        the internal scroll containers on the copy and the tab wrapper.
     2. .login-shell__form is sticky at one viewport tall, so the card holds its place on screen
        while the copy scrolls past it.
     3. .landing:after gets background-attachment:fixed, so the image paints against the viewport.

   Why the image and not the whole panel. Of .landing's three background layers only the image
   visibly moves: .landing:before (the nav colour) and .landing-content__tabs-overlay (the tint)
   are flat colours and look identical scrolling or locked. So nothing has to be repositioned, and
   .landing stays a real flex panel whose right edge IS the panel boundary - which means the
   boundary is still declared exactly once, by .login-shell__form's width. That matters more than
   it looks: the pre-PHNX-14093 layout put these layers at position:fixed sized to 70% of the
   VIEWPORT while the content was sized against a centred container, and that mismatch was the
   original misalignment bug. See the legacy block above.

   Scoped to >=992px, the only width where .landing renders: below 768px it is hidden outright and
   768-991px is hidden via .login-shell--card, which Index.cshtml emits unconditionally. The
   narrower widths keep the base min-height:100vh and are untouched. */
@media (min-width: 992px) {
    /* Sticky rather than fixed: it stays a flex item, so it keeps the panel width declared per
       breakpoint above and needs no width of its own.

       top: 0 is correct only because the header scrolls away with the page - it does, by design -
       so no header height is needed anywhere. That matters because the logo is per-program, which
       is the same reason the flex chain above refuses to hardcode one.

       max-height, NOT height. This is the whole difference between a page that scrolls only when
       it needs to and one that always scrolls a little. A flat `height: 100vh` forces the flex row
       to at least a viewport, so the document measures header + 100vh and overflows by exactly the
       header's height even with a single short paragraph of copy - measured 921px of page on an
       800px viewport, and because .landing stretches to that row height its tint stretched with it,
       which is what makes the tint look like the culprit.

       With max-height the panel keeps the row's stretched height and is merely capped: short copy
       leaves the row at its natural height and nothing scrolls, while long copy pins the panel at
       one viewport and sticky has room to work. The cap also keeps a card taller than the viewport
       scrollable rather than clipped. */
    .login-shell__form {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        max-height: 100vh;
        overflow-y: auto;
        -ms-flex-pack: start;
            justify-content: flex-start;
    }

    /* Centres the card inside the sticky viewport-tall box, and keeps a card taller than the
       viewport reachable.

       These two together are why justify-content above is flex-start rather than center, and that
       is not cosmetic: a centred flex container that overflows pushes content past BOTH edges, and
       overflow past the start edge cannot be scrolled to. Measured with a 1000px card, the top of
       the card sat at -140px with scrollTop already 0, so the brand logo and the first field were
       permanently invisible. Auto margins centre identically when there is free space and collapse
       to zero rather than going negative when there is not. */
    .login-shell__form > .login-shell__inner {
        margin-top: auto;
        margin-bottom: auto;
    }

    /* Locks the program's login image to the screen while the panel scrolls past it.

       background-attachment rather than position:fixed, deliberately. The element stays absolutely
       positioned inside .landing, so it keeps the panel's flex-derived width and creates no new
       stacking context. Fixing it instead would make it a positioned participant of the root
       stacking context at an effective z-index of 0 and paint the image over the header - which is
       precisely why the legacy rules parked these layers at z-index:-1.

       Consequence worth knowing: background-size:cover above now sizes the image to the viewport
       rather than to the panel, so the crop changes. That is the intended reading of "locked to the
       screen", not an accident.

       This element carries a filter, and css/site-isp.aspx:128-133 adds backface-visibility:hidden.
       Neither creates a containing block, but both force a compositing layer, and some engines then
       degrade background-attachment:fixed to scroll. If a target browser does, the fallback is
       position:fixed on BOTH :before and :after together at z-index:-1 with the boundary restated
       as a right inset - both, because fixing only :after would drop the image below the still
       absolute :before colour layer and hide it completely. */
    .login-shell .landing:after {
        background-attachment: fixed;
    }

    /* The tab row sits at a fixed inset from the top of the stripe rather than centred in it, so
       its position does not depend on how much copy the program pasted in. Centring made the row
       move: short copy centred the block, long copy pushed the row to the top.

       This does change short-copy programs - the block used to float in the middle of the stripe
       and now sits at a fixed inset from its top. That is the cost of a stable row position. */
    .login-shell .landing {
        -ms-flex-pack: start;
            justify-content: flex-start;
    }

    /* Where the tab row sits, measured from the top of the stripe. A padding rather than a margin
       or a positional offset, so it stays in normal flow and the copy simply follows it. Overrides
       the padding-top the base .login-shell__inner rule sets; its 40px padding-bottom still
       applies and becomes the gap under the copy.

       Proportional, so it holds its relationship to the panel as the viewport changes. */
    .login-shell .landing .login-shell__inner {
        padding-top: 20vh;
    }
}

/* .scroll-to-top is only given `position: fixed` at >=768px (see the .scroll-to-top block near
   the end of this file); below that it is statically positioned, and because .login-body is a
   flex column it would stretch to a full-width bar above the header the moment the scroll
   handler calls .show(). The button is plainly a desktop affordance, so keep it hidden on small
   screens. !important beats the inline `display: inline-block` jQuery's .show() sets. */
@media (max-width: 767px) {
    .login-body .scroll-to-top {
        display: none !important;
    }
}

/* The layout's own chrome. The old page hid these with an inline <style> block in
   Areas/Login/Views/Login/Index.cshtml; _LayoutLogin.cshtml no longer renders a
   .page-title at all, and the footer is kept in the DOM but hidden because
   _FooterWrapper.cshtml:25 carries an UptimeRobot keyword comment. */
.login-body .footer {
    display: none;
}

.login-content-divider {
    border-bottom: .2rem solid #ddd;
    margin-bottom: 3.2rem;
}

p.help-block.text-right.small{
    margin-top: 0;
}

/* PHNX-14093: the `.landing:before/:after { width: 70% }` rule that used to live here
   was the root cause of the misalignment - it sized the bands against the viewport
   while the content was sized against a 1170px container. The bands are now absolute
   inside .landing, so they inherit the panel's width and need no declaration. The
   .login-shell .landing-content__tabs / .landing-content-wrapper rules that were also here moved
   into the block above. */
.not-logged-in__button a {
    margin-bottom: 0 !important;
}

.not-logged-in__tabs {
    padding: 0;
    margin: 0 60px 0 30px;
}
.not-logged-in__tabs a {
        height:100%;
}
.not-logged-in__tabs ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 0;
    padding: 0;
    list-style: none;
}
.not-logged-in__tabs ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    margin: 0;
    padding: 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.not-logged-in__tabs ul li a {
    opacity: 0.95;
    font-size: 16px;
    letter-spacing: 0.025em;
    font-weight: bold;
    text-rendering: optimizeLegibility;
    padding: 13px 21px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}
.not-logged-in__tabs ul li:first-child a {
    border-left: 0;
}
.not-logged-in__tabs ul li a.active {
    background: rgba(255, 255, 255, 0.1);
    border-right: transparent;
}
.not-logged-in__tabs ul li a:hover,
.not-logged-in__tabs ul li a:active {
    text-decoration: none !important;
}

.not-logged-in__content {
    display: none;
    padding: 0 75px 0 30px;
}
.not-logged-in__content .smallest {
    margin-top: -15px;
    padding: 0;
    font-size: 14px;
}
.not-logged-in__content.active {
    display: block;
}
.not-logged-in__content h2 {
    font-weight: normal !important;
    font-size: 2.5em;
    line-height: 1.15em;
    text-rendering: optimizeLegibility;
    margin-top: 0;
    margin-bottom: 0.8em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
    opacity: 0.95;
}
.not-logged-in__content p {
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1.62em;
    text-rendering: optimizeLegibility;
    margin-bottom: 1.5em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
    opacity: 0.95;
}
.footer {
    background: #f2f2f2;
    margin-bottom: 0 !important;
    padding-bottom: 20px;
}
.application-box-content .button a {
    text-decoration: none !important;
}
.application-box-content ul {
    list-style: none;
    margin: 0 0 0;
    padding: 0;
}

.container-log-in .errorbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 15px 30px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 0 !important;
    margin-bottom: -80px;
}
.create-account__container {
    position: relative;
}

.create-account__block {
    display: none;
    position: absolute;
    top: 2.6em;
    right: 0;
    width: 25em;
    max-width: 80vw;
    border-radius: 4px 0 4px 4px;
    padding: 20px 0 50px;
    z-index: 10;
}
.create-account__block .button a {
    margin-left: 0 !important;
}
.create-account__block h3,
.create-account__block p,
.create-account__block a {

}
.create-account__block h3 {
    margin-top: 30px;
}

.create-account__block a {
    text-decoration: underline;
}
.account-details-panel {
    padding-bottom: 0 !important;
}


.account-details__header {
    margin: -15px 15px 1px 1px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}


.account-details__status {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.account-details__status span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #ddd;
    padding: 10px 30px;
    font-weight: bold;
    text-transform: uppercase;
}
.account-details__name {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    display: none;
}
.account-details__name span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px 30px;
}
.account-details__status span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.account-details__status.status-active span {
    background: #008800;
    color: #fff;
}
.account-details__status.status-pending span {
    background: #ffc400;
    color: #000000;
}
.account-details__status.status-closed span {
    background: #db0000;
    color: #fff;
}
.account-details__status.status-inactive span {
    background: #ddd;
}
.account-details__row,
.account-details__expanded-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}
.account-details__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 50%;
            flex: 0 1 50%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 20px 20px 0;
    margin-bottom: 15px;
}

.fund-summary .account-details__item {
    padding: 20px 0 0 0; /* IE FIX */
}

.fund-summary .account-details__item .view-all {
    display: -webkit-inline-box;
    float: right;
    padding-right: 20px;
}

.account-details__item .button a {
    float: right;
}
.account-details__item textarea {
    max-width: 1035px;
}
.account-details__label {
    display: block;
    text-transform: uppercase;
    font-size: 0.9em;
}
.account-details__value {
    font-weight: bold;
}
.account-details__track-principal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}
.account-details__track-principal span {
    padding: 10px 30px;
    color: #777;
}
.account-details__expand {
    position: relative;
    cursor: pointer;
}
.account-details__expand-text {
    text-transform: uppercase;
    font-size: 0.8em;
    margin-right: 18px;
}
.account-details__expand-icon.fa-sort-desc {
    position: absolute;
    top: -5%;
    right: 0;
}
.account-details__expand-icon.fa-sort-asc {
    position: absolute;
    top: 40%;
    right: 0;
}
.account-details__row,
.account-details__expanded-row {
    visibility: hidden;
    height: 0;
    max-height: 0;
    opacity: 0;
}
.account-details__row.active,
.account-details__expanded-row.active {
    visibility: visible;
    opacity: 1;
    height: auto;
    max-height: 5000px;
    padding-bottom: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.account-details__expanded-row.active {
    margin-top: 30px;
    padding-bottom: 30px;
}
.account-details__row.active:first-child {
    border-bottom: 1px solid #ddd;
}
.account-details__edit-radio {
    margin-top: 10px;
}
.account-details__edit-radio tr td {
    padding: 3px 15px 0 0;
}
.account-details__edit-radio input {
    margin-right: 5px;
}
.account-details__edit-radio label {
    font-weight: normal;
    margin: -3px 0 0;
    padding: 0;
}
.account-details__row.active.first__row {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}
.account-details__row.active.account-details__edit-row {
    padding-bottom: 30px;
    display: block;
    clear:both;
    width: 100% !important;
}
.dynamic-fields-row {
    margin-left: 2px;
    padding: 0;
}
.account-details__dynamic-fields-row {
    border-top: 1px solid #ddd;
    margin-top: 20px;
}
.account-details__dynamic-fields-row #dynamic-fields {
    padding: initial;
}
.account-details__dynamic-fields-row .form-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

}
.account-details__dynamic-fields-row .form-row > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.account-details__dynamic-fields-row .row,
.account-details__dynamic-fields-row .form-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: initial;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 25%;
            flex: 0 1 25%;
    margin: initial;
    padding: initial;
    padding: 10px 0;
}
.account-details__dynamic-fields-row .form-group div {
    width: initial;
    width: 100%;
}
.account-details__dynamic-fields-row .row .col-form-label {
    width: initial;
    float: none;
    text-align: left;
    padding: 0 20px;
}
.account-details__dynamic-fields-row .row .col-form-label label {
    font-weight: normal;
    color: initial;
    text-transform: uppercase;
    font-size: 13px;
}
.account-details__dynamic-fields-row .row .col-value {
    width: initial;
    float: none;
    padding: 0 20px;
    font-weight: bold;
}
.account-details__dynamic-fields-row [controltype~="FileUpload"] div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
@media only screen and (min-width : 993px) {
    .account-details__header {
        margin: -30px -10px 0 -30px;
    }
    .account-details__item {
        -webkit-box-flex: 0;
        -ms-flex: 0 1 25%;
            flex: 0 1 25%;
    }
        .account-details__item.two-col {
            -webkit-box-flex: 0;
            -ms-flex: 0 1 50%;
                flex: 0 1 50%;
        }
    .account-details__name {
        display: block;
    }
    .account-details__expand-text {
        font-size: 0.9em;
    }
}

.application-form .form-phone-row {
    display: none;
}
.application-form .form-group.has-error .error {
    font-weight:normal;
}
.application-form .ui-igedit-container {
    width: 100%;
}
.application-form .ui-igedit-dropdown-button,
.application-form div.ui-igedit-dropdown-button.ui-igedit-buttonhover.ui-state-hover {
    color: #444 !important;
    border: 0 !important;
    background-color: lightgray;
    background-image: url(images/ui-icons_888888_256x240.png) !important;
}
.field-hide {
    display: none;
}
.form-group .control-label {
    display: block;
}
.form-group.required .control-label:after {
    content:"*";
    color:red;
    margin-left: 3px;
}
.form-group {
    position: relative;
}
.new-form-group-indicator input {
    -webkit-animation: indicatorchange 1s;
            animation: indicatorchange 1s;
}
@-webkit-keyframes indicatorchange {
    0% { background-color: lemonchiffon; }
    100% { background-color: transparent; }
}
@keyframes indicatorchange {
    0% { background-color: lemonchiffon; }
    100% { background-color: transparent; }
}

.form-group-has-btn input,
.form-group-has-btn select,
.form-group-has-btn textarea {
    width: 91%;
    float: left;
}
.form-group select {
    width: 100%;
}
.form-group-btn {
    border: 1px solid rgba(0,0,0,.22);
    width: 28px;
    height: 28px;
    border-radius: 4px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    cursor: pointer;
    margin-top: 2px;
    float: right;
}
.pnlAddress2 {
    display: none;
}
.app-modal {
    display: none;
}
.app-modal.active,
.app-modal.modal-open {
    display: block;
}
.app-modal__overlay {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.app-modal__title {
    margin: 28px 40px;
}
.app-modal__wrapper {
    position: relative;
    width: 75em;
    height: 80vh;
    background: #fff;
    overflow-y: auto;
}
.app-modal__form {
    margin: 5em 0;
}
.app-modal__form .errorbox {
    display: none;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 50px;
}
.app-modal__form .errorbox.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.app-modal__actions {
    margin-bottom: 50px;
}
.add-role-form .app-modal__wrapper {
    width: 60em;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.add-role-form .app-modal__wrapper .app-modal__form {
    margin: 0;
    width: 100%;
}
.add-role-form .app-modal__wrapper .app-modal__form select {
    font-size: 1.5em;
    width: 30em;
    display: none;
}
.user-maintenance-modal .app-modal__wrapper .app-modal__form select {
    display: flex;
}
.user-maintenance-modal .app-modal__wrapper {
    padding: 2em 3em 3em;
}
.add-role-form__role-select-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 1em 0 0.6em;
    overflow-y: auto;
    max-height: 80vh;
}
.document-role-wrapper {
    overflow-y: visible;
}
.add-role-form h3 {
    margin: 1em 0 0;
}
.add-role-form__role-select-wrapper h5 {
    font-size: 1.1em;
}
.add-role-form__role-select-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background: #eee;
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -ms-flex-preferred-size: calc(50% - 0.55em);
        flex-basis: calc(50% - 0.55em);
    max-width: calc(50% - 0.55em);
    margin: 0.55em 0;
    padding: 1em 1.5em 1.5em;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.add-role-form__role-select-item:hover {
    background: white;
    -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.25);
            box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.25);
}
.role-save.disabled,
.role-save.disabled:hover,
.role-save.disabled:active,
.role-save.disabled:focus {
    background: #666 !important;
    opacity: 0.5;
    cursor: not-allowed;
}
.close-btn {
    width: 32px;
    height: 32px;
    position: absolute;
    z-index: 999;
    top: 20px;
    right: 32px;
    opacity: 0.6;
    cursor: pointer;
}
.close-btn:hover {
    opacity: 1;
}
.close-btn:after {
    content: '';
    height: 32px;
    border-left: 2px solid #444;
    position: absolute;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    left: 14px;
}
.close-btn:before {
    content: '';
    height: 32px;
    border-left: 2px solid #444;
    position: absolute;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 14px;
}
#RoleAlert {
    display: none;
    width: 100%;
    margin-top: 25px;
    margin-bottom: -20px;
    align-items: center;
}
    #RoleAlert.active {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    #RoleAlert.successbox:before {
        position: static;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.role-desc, .asset-desc, .account-desc {
    margin: 0 0 30px;
}
.role-list, .asset-list, .account-list {
    margin-top: 10px;
    margin-bottom: 20px;
}
.role-list__row, .asset-list__row, .account-list__row {
    padding: 0;
    margin: 0;
    border-top: 1px solid #eee;
}
.asset-list-row{
    padding:15px;
    margin:0;
    border-top:1px solid #eee;
}
.role-list__row:first-child, .asset-list__row:first-child, .account-list__row:first-child {
    border-top: 0;
}
.role-list__row:hover, .asset-list__row:hover, .account-list__row:hover {
    background: #eee;
}
.role-list__row a, .asset-list__row a, .account-list__row a {
    padding: 0;
}
.role-record .role-list__row {
    display: block;
}
.role-list__name,
.role-list__title,
.role-list__delete,
.account-list__name,
.account-list__title,
.account-list__delete {
    padding: 15px 15px 15px;
    color: #444;
}
.asset-list__name,
.asset-list__title,
.asset-list__value {
    padding: 5px 15px 5px;
}
.asset-list__delete {
    padding: 5px 15px 5px;
}
.row-content .role-list__name a, .row-content .role-list__name a:link,
.row-content .role-list__title a, .row-content .role-list__title a:link,
.row-content .role-list__delete a, .row-content .role-list__delete a:link,
.row-content .asset-list__name a, .row-content .asset-list__name a:link,
.row-content .asset-list__value a, .row-content .asset-list__value a:link,
.row-content .asset-list__title a, .row-content .asset-list__title a:link,
.row-content .asset-list__delete a, .row-content .asset-list__delete a:link,
.row-content .account-list__name a, .row-content .account-list__name a:link,
.row-content .account-list__title a, .row-content .account-list__title a:link,
.row-content .account-list__delete a, .row-content .account-list__delete a:link {
    color: #444;
}
.asset-edit {
    display: block;
    padding: 0;
    margin: 0;
}
.role-list__delete a,
.asset-list__delete a,
.account-list__delete a {
    color: red !important;
    text-decoration: none !important;
}
.role-list__row:hover .role-list__name,
.role-list__row:hover .role-list__title,
.role-list__row:hover .role-list__delete,
.asset-list__row:hover .asset-list__name,
.asset-list__row:hover .asset-list__title,
.asset-list__row:hover .asset-list__delete,
.account-list__row:hover .account-list__name,
.account-list__row:hover .account-list__title,
.account-list__row:hover .account-list__delete
 {
    color: #4d6eb9;
}
.role-list__name,
.asset-list__name,
.account-list__name {
    font-weight: bold;
}
.role-delete.active,
.asset-delete.active,
.account-list.active {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: block;
    padding: 500px;
    background: red;
}
.role-list__delete > .fa,
.asset-list__delete > .fa,
.account-list__delete > .fa {
    margin-top: 3px;
    display: none !important;
    color: red;
    padding: 0 !important;
}
.role-list__delete > .fa:last-child,
.asset-list__delete > .fa:last-child,
.account-list__delete > .fa:last-child {
    display: inline-block !important;
}
.role-list__delete > .fa.disabled,
.asset-list__delete > .fa.disabled,
.account-list__delete > .fa.disabled {
    color: #444 !important;
    opacity: 0.25;
    cursor: help;
}
.block {
    display: block !important;
}
.role-check {
    margin-top: 15px;
}
.role-check ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.role-check ul li {
    margin: 0;
    padding: 0;
    color: red;
    font-size: 13px;
}
.next-button.disabled {
    opacity: .5;
}
.donor-circle-description {
    word-break: break-all;
}
.donor-circle-description img {
    max-width: 100%;
}
.master-header__link-url {
    text-align: center;
    padding: 10px 0 20px;
}
.master-header__cta {
    text-align: center;
}
.dfx-tab + .dfx-tab {
    border-top: 1px solid #eee;
}
.dfx-tab__title {
    padding-left: 36px;
}
.dfx-tab__heading {
    overflow: hidden;
    padding: 15px;
}
.dfx-tab.active .dfx-tab__heading {
    color: #fff;
}
.dfx-tab__heading:before {
    content: "";
    position: absolute;
    left: 15px;
    top: calc(50% - 4px);
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.25s;
    background: #333;
}
[data-status="completed"] .dfx-tab__heading:before {
    background: #58bc3c;
}
[data-status="errors"] .dfx-tab__heading:before {
    background: #f2b225;
}
[data-status="failed"] .dfx-tab__heading:before {
    background: #d83232;
}
.dfx-tab__heading:after {
    content: "+";
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    font-size: 2em;
    width: 1.75em;
    height: 1.75em;
    line-height: 1.75em;
    text-align: center;
    transition: all 0.25s;
}
.dfx-tab.active .dfx-tab__heading:after {
    transform: rotate(315deg);
}
.dfx-tab__content {
    background: #f2f2f2;
    height: 0;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: 0 0 0;
    transition: transform 0.1s;
}
.dfx-tab.active .dfx-tab__content {
    height: auto;
    opacity: 1;
    transform: scaleY(1);
}
.dfx-grid__masthead {
    padding: 15px;
}
.dfx-grid__header {
    background: #666;
    padding: 10px 15px;
}
.dfx-accordion h3 {
    margin: 0;
    font-size: 0.8em;
    line-height: 1.5em;
    color: #666;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.dfx-grid__header h3 {
    color: #fff;
}
.dfx-grid__body {
    margin-bottom: 50px;
}
.dfx-grid__body .row {
    padding: 15px 0;
}
.dfx-grid__body .row p {
    margin: 0;
}
.dfx-grid__body .row:nth-child(even) {
    background: #ccc;
}
.dfx-grid__body .row:nth-child(odd) {
    background: #fff;
}
.scroll-to-top {
    display: none;
}
@media only screen and (min-width: 768px) {
    .scroll-to-top {
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 10000;
        outline: none;
        padding: 5px 10px;
        margin-bottom: 0px;
        box-shadow: 1px 1px 8px rgba(0,0,0,0.25);

    }
    .scroll-to-top:hover:before {
        display: block;
        content: "Back to Top";
        position: absolute;
        min-width: 100px;
        top: 0;
        right: 40px;
        color: black;
        font-weight: bold;
        letter-spacing: -0.035em;
        text-shadow: none;
        background: white;
        padding: 5px 10px;
        border-radius: 5px;
        box-shadow: 1px 1px 8px rgba(0,0,0,0.25);
    }
    .site-master-header {
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }
    .master-header__link-url {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        text-align: left;
    }
    .master-header__cta {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}
.acc-underline {
    text-decoration: underline;
}
.text-muted {
    color: #767676;
}

.purpose-textarea {
    height: auto;
    min-height: 50px;
    max-width: 680px;
    overflow: hidden;
}

/* End Changes */

/* Start: Investment Reallocation */
div.assetpoolpct-row .input-group {
    position: relative;
}
input.assetpoolpct {
    font-size: 14px;
    padding-left: 6px;
    border: 1px solid rgba(0,0,0,.22);
    height: 28px;
    width: 45px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0;
}

    div.assetpoolpct-row label {
        padding-top: 7px;
    }
    .input-pct-details[aria-hidden="true"] {
        display: none;
    }
    .input-pct-details[aria-hidden="false"] {
        position: absolute;
        top: 20px;
        display: block;
    }
/* End: Investment Reallocation*/
/* Start: Dynamic Fields*/
#dynamic-fields .form-group {
    display: block;
    clear: both;
}
/* End: Dynamic Fields*/

/* Start: Password requirements */
    .password-row {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .password-row label {
        color: rgba(0,0,0,.6);
    }

    .requirements-box {
        color: #ffffff;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
        padding: 20px 50px;
        height: 100%;
    }

    .requirements-box h3.instructions {
        font-size: 16px;
        color: #fff;
        padding-bottom: 20px;
    }

    @media (max-width:600px) {
        .requirements-box {
            padding: 20px;
        }
    }

    .checkbox-container {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        font-size: 14px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    label.checkbox-container {
        color: #fff;
        font-size: 14px;
        font-weight: normal !important;
    }

    .checkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 18px;
        width: 18px;
        background: rgba(0,0,0,0);
        border: solid 2px #fff;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    }

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .checkbox-container input:checked ~ .checkmark:after {
        display: block;
    }

    .checkbox-container .checkmark:after {
        left: 5px;
        top: 1px;
        width: 5px;
        height: 10px;
        border: solid #ffffff;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
/* End: Password requirements */

/* Start: Guide Star*/
    .charity-info .header-info.row-content {
        border-bottom: none;
        margin-bottom: 0;
    }

    .charity-info .header-info h2 {
        margin-top: 0;
    }

    .charity-info .header-info img {
        padding-top: 0;
        width: 295px;
    }

    .charity-info .header-info .links-section {
        padding-bottom: 15px;
    }

    .charity-info .header-info .links-section a,
    .charity-info .header-info .links-section a:link,
    .charity-info .header-info .links-section a:visited {
        color: #444
    }

    .charity-info .header-info .links-section .fa {
        font-size: 20px;
        padding-right: 3px;
    }

    .charity-info .header-info .mission {
        font-size: 14pt;
        padding-bottom: 5px;
    }

    .charity-info .header-info .col-xs-12 .report-button {
        margin: 0;
    }

    .charity-info .information-breakdown {
        padding: 30px 30px 30px 30px;
        background-color: #e9e9e9;
    }

    .charity-info .information-breakdown h5 {
        padding-top: 20px;
        font-size: 13pt;
    }

    .charity-info .information-breakdown .ui-tabs {
        border: none;
        background-color: #e9e9e9 !important;
    }

    .charity-info .information-breakdown .ui-tabs ul.ui-tabs-nav {
        border: none;
        background-color: #e9e9e9 !important;
        margin-left: 1px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        -webkit-box-pack: space-evenly;
            -ms-flex-pack: space-evenly;
                justify-content: space-evenly;
    }

    .charity-info .information-breakdown .ui-tabs .ui-tabs-nav li.ui-state-default {
        background-color: #D8D8D8;
        color: black;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        border: none;
    }

    .charity-info .information-breakdown .ui-tabs .ui-tabs-nav li.ui-state-default a,
    .charity-info .information-breakdown .ui-tabs .ui-tabs-nav li.ui-state-default a:link,
    .charity-info .information-breakdown .ui-tabs .ui-tabs-nav li.ui-state-default a:visited {
        color: #444;
    }

    .charity-info .information-breakdown .ui-tabs .ui-tabs-nav li.ui-state-active {
        background-color: #FFFFFF;
        border-top: 5px solid blue;
    }

    .charity-info .information-breakdown .ui-tabs .ui-tabs-nav li.ui-state-active a,
    .charity-info .information-breakdown .ui-tabs .ui-tabs-nav li.ui-state-active a:link,
    .charity-info .information-breakdown .ui-tabs .ui-tabs-nav li.ui-state-active a:visited {
        color: blue;
    }

    .charity-info .information-breakdown .ui-tabs .ui-tabs-nav li a {
        width: 100%;
    }

    .charity-info .information-breakdown .ui-tabs .ui-tabs-panel {
        padding-top: 0;
    }

    .charity-info .information-breakdown .padding-top {
        padding-top: 15px;
    }

/* End: Guide Star */
.dfx-tab + .dfx-tab {
    border-top: 1px solid #eee;
}
.dfx-tab__title {
    padding-left: 36px;
}
.dfx-tab__heading {
    overflow: hidden;
    padding: 15px;
}
.dfx-tab.active .dfx-tab__heading {
    background: #2988ef;
    color: #fff;
}
.dfx-tab__heading:before {
    content: "";
    position: absolute;
    left: 15px;
    top: calc(50% - 4px);
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.25s;
    background: #333;
}
[data-status="completed"] .dfx-tab__heading:before {
    background: #58bc3c;
}
[data-status="errors"] .dfx-tab__heading:before {
    background: #f2b225;
}
[data-status="failed"] .dfx-tab__heading:before {
    background: #d83232;
}
.dfx-tab__heading:after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    font-size: 2em;
    width: 1.75em;
    height: 1.75em;
    line-height: 1.75em;
    text-align: center;
    transition: all 0.25s;
}
.dfx-tab.active .dfx-tab__heading:after {
    transform: rotate(315deg);
}
.dfx-tab__content {
    background: #f2f2f2;
    height: 0;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: 0 0 0;
    transition: transform 0.1s;
}
.dfx-tab.active .dfx-tab__content {
    height: auto;
    opacity: 1;
    transform: scaleY(1);
}
.dfx-grid__masthead {
    padding: 15px;
}
.dfx-grid__header {
    background: #666;
    padding: 10px 15px;
}
.dfx-accordion h3 {
    margin: 0;
    font-size: 0.8em;
    line-height: 1.5em;
    color: #666;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.dfx-grid__header h3 {
    color: #fff;
}
.dfx-grid__body {
    margin-bottom: 50px;
}
.dfx-grid__body .row {
	padding: 15px 0;
}
.dfx-grid__body .row p {
    margin: 0;
}
.dfx-grid__body .row:nth-child(even) {
    background: #ccc;
}
.dfx-grid__body .row:nth-child(odd) {
    background: #fff;
}
.create-account__container .not-logged-in__button.active a {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.col-totals-label .tt.help {
    position: relative;
}
.col-totals-label .tt.help:hover:after,
.col-totals-label .tt.help:focus:after {
        position: absolute;
        content: attr(data-info);
        display: inline-block;
        background: #f2f2f2;
        color: #555;
        padding: 1em 1.5em;
        font-family: 'Roboto', sans-serif;
        min-width: 250px;
    }
.flex-align-buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.recipient-cards h3,
.role-cards h3 {
    font-size: 18px;
}

/* PHNX-13664: "Exclude From Compensation" checkbox, grouped above the donor cards */
.excl-from-comp {
    margin-top: 16px;
    margin-bottom: 16px;
}
.excl-from-comp-label {
    display: inline-block;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}
.excl-from-comp-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0;
    vertical-align: middle;
    cursor: pointer;
}
h3.header-h5 {
    font-size: 14px;
    margin: 0;
    display: inline;
}

div.button input.verify-acknowledgement[disabled] {
    position: relative;
    cursor: not-allowed;
}

.proc-details h5 {
    background: #eee;
    border-radius: 5px;
    cursor: pointer;
    padding: 10px 15px;
}

.proc-details__header {
    font-weight: bold;
    border-bottom: solid #1E285A 1px;
    margin-bottom: 5px;
}

.proc-details__row {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.proc-details__row:nth-child(odd) {
    background: #eee;
}
.accordion-header span.badge {
    margin-top: -5px;
}

.asset-save {
    margin-bottom: 20px;
    margin-top: 20px;
}

.investment-pools {
    padding: 8px;
}

.investment-pool-item {
    padding-bottom: 4px;
    padding-top: 4px;
}

.investment-pool-item input[type="radio"] {
    margin-right: 6px;
    margin-top: -1px;
    vertical-align: middle;
}

#delete-loader{
    font-size:.4rem;
    padding:8px 21px 8px 21px;
    margin:0px 0px 10px 40px;
}

.rmv-fav-row {
    height: 46px;
}

#rmv-fav-name {
    padding-top: 8px;
}
.recent-grant-repeat{
    position:absolute;
    right:0;
    top:3em;
    border-left:1px solid #555;
    text-transform:uppercase;
    font-size:0.9em;
    text-align:center;
    padding-left:5px;
    padding-right:5px;
    margin-left:4px;
}
.aside-goals--add-icon-sm{
    border:2px solid #0147a5 !important;
    display:flex;
    -webkit-box-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    align-items:center;
    border-radius:50%;
    width:20px;
    height:20px;
    transition:all 0.2s;
    float:right;
}
a.aside-goals--add-sm {
    padding: 15px;
    display: inline-block;
    float: right;
}
@media screen and (max-width:767px) {
    [hidden-for*="mobile"] {
        display: none !important;
    }
}
@media screen and (min-width:768px) and (max-width: 991px) {
    [hidden-for*="tablet"] {
        display: none !important;
    }
}
@media screen and (min-width: 992px) {
    [hidden-for*="desktop"] {
        display: none !important;
    }
}
.search-filter{
    height:35px;
}

.search-dd{
    width:356px;
}

.search-bg{
    padding-bottom:10px;
}

.payee-with-char-count {
    display: flex;
    flex-wrap:wrap;
    align-items: center;
}

.payee-with-char-count input + label {
    order: 3;
    flex: 1 0 100%;
}

.payee-flex{
    flex:1 0 0px;
}


.grant-char-count{
    margin-bottom:0px;
    padding: 0 1em;
}

.confirm-content-font-size{
    font-size: 1.4em;
}

.grant-preview-link-right{
    float:right;
    text-decoration:underline;
}

.grant-preview-link-left{
    float:left;
    text-decoration:underline;
}

.add-margin-bottom-2{
    margin-bottom:2em;
}

.force-underline{
    text-decoration:underline;
}

.account-graph {
    display: flex;
    flex-wrap: wrap;
}

.account-piechart {
    flex: 1 0 50%;
}

.account-listing {
    flex: 1 1 auto;
}

.account-aan-listing {
    flex: 1 1 100%;
}

.Redesigned-form-banner-text {
    margin: 5px 0px 0px;
}

.Redesigned-form-banner {
    display: flex;
}

.btn-end {
    align-self: flex-end;
    margin-right: 25px;
}

.Redesigned-form-banner .btn-end {
    flex-grow: 4;
}

.Redesigned-form-banner .btn-end a.Redesigned-form-banner-btn {
    color: #00529b !important;
    text-decoration: none;
}

.Redesigned-form-banner:before {
    content: '';
}
div.button a.report-link-preview.disabled {
    pointer-events: none;
    background: gray !important;
    color: white !important;
}

.data-block {
    display: block;
}

/*disabled repeat button*/
.repeat-disabled {
    padding: 3px 10px 2px;
    border: 1px solid #999 !important;
    color: #999 !important;
    border-radius: 5px !important;
    text-transform: uppercase;
    font-size: 0.9em !important;
    text-align: center;
    background: transparent !important;
    text-decoration: none !important;
    display: inline-block;
    cursor: default !important;
}

.repeat-disabled:hover {
    border: 1px solid #999 !important;
    color: #999 !important;
    border-color: #999 !important;
    text-decoration: none !important;
}

.ui-widget-content a.repeat-disabled,
.ui-widget-content a.repeat-disabled:hover {
    color: #999 !important;
    border-color: #999 !important;
}

.ui-iggrid .ui-iggrid-scrolldiv td a.repeat-disabled:hover {
    text-decoration: none !important;
    background: transparent !important;
}

.recent-grant-repeat-disabled,
.recent-grant-repeat-disabled.popout:hover {
    border: 1px solid #999 !important;
    color: #999 !important;
    background: transparent !important;
    cursor: default !important;
    /*position: absolute;
    right: 0;
    top: 3em;
    border-left: 1px solid #999;
    text-transform: uppercase;
    font-size: 0.9em;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 4px;*/
}

.embeddedServiceSidebarFeature label {
    font-weight: 400;
}

.embeddedServiceSidebarFeature .label {
    font-size: 100%;
    font-weight: 400;
}

header.sidebarHeader {
    flex-direction: row;
}

h2[embeddedservice-chatHeader_chatHeader] {
    color: rgb(217, 217, 214);
}

button[embeddedservice-chatHeader_chatHeader] {
    padding: 1px 6px;
}
/* ==========================================================================
   PHNX-14093 - Redesigned pre-login card (Auth0 programs only).

   Everything is scoped under .login-card because Areas/Login/Views/Login/Embedded.cshtml
   renders the same _Login.cshtml partial bare into a 325x325 iframe - the 480px card
   must not leak into it.

   Colors deliberately come from the per-program ISP theme emitted by css/site-isp.aspx
   (.button and .button.button-invert, both !important) rather than the navy in the Figma
   frames, which is only the generic Amplify default. Sizes, spacing and the neutral
   greys below are from the design.
   ========================================================================== */

.login-card {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 40px;
    background-color: #fff;
    border-radius: 8px;
    /* token: Elevation/Dashboard Containers */
    box-shadow: 0 2px 4px -2px rgba(0,0,0,.1), 0 4px 6px -1px rgba(0,0,0,.1);
    box-sizing: border-box;
}

.login-card__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    margin-bottom: 24px;
}

.login-card__brand img {
    max-height: 72px;
    max-width: 100%;
    width: auto;
}

/* _Login.cshtml's own wrapper adds flex centering that is redundant inside the card
   (the panel already centres it) and would fight the card's own padding. */
.login-card .auth0-login-wrapper {
    display: block;
    padding-top: 0;
}

/* Strip the Bootstrap row/column gutters so the content column is a true 400px. */
.login-card .auth0-login-content {
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

.login-card .auth0-login-content > .col-xs-12 {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.login-card .auth0-h1 {
    margin: 0 0 16px;
    padding: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.334;
    letter-spacing: 0;
    text-align: center;
    /* token: brand/text/navy */
    color: #231a40;
}

/* The design holds the intro copy to 312px inside the 400px column so it breaks after
   "manage" rather than running the full width. */
.login-card .auth0-p {
    max-width: 312px;
    margin: 0 auto 16px;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .15px;
    text-align: center;
    /* token: text/primary. text/secondary (#3f4850) is the divider label only. */
    color: #171a1e;
}

/* 16px rhythm between the stacked actions. The two *-margin classes are listed explicitly
   because dfx.css:1473/1477 set their own margins at equal specificity. */
.login-card div.login-button,
.login-card div.login-button.auth0-login-button-margin,
.login-card div.login-button.dfx-login-button-margin {
    margin: 0 0 16px;
}

/* Only the button wrappers collapse - the credential fields below need their own rhythm. */
.login-card .auth0-login-content .form-group {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   PHNX-14093 - the legacy (non-Auth0) credential form, inside the card.

   Areas/Login/Views/Login/Index.cshtml wraps this branch in the same .login-card
   as the Auth0 one, so the card shell, brand block, submit-button geometry and
   focus ring are all inherited and not repeated here. What was missing is form
   controls: `.input` has no rule anywhere outside .login-box / .application-box
   (dfx.css:1538), so these fields were rendering as raw browser defaults.

   Everything stays scoped under .login-card, which Embedded.cshtml never emits -
   that 325x325 iframe renders this same partial bare and must not pick any of
   this up.
   -------------------------------------------------------------------------- */

/* Strip the Bootstrap row/column gutters, matching what .auth0-login-content gets. */
.login-card .login-content {
    margin-left: 0;
    margin-right: 0;
}

/* Every Bootstrap column inside the card, at any depth - NOT just those under
   .login-content. _Login.cshtml renders @SsoLoginButton() *outside* .login-content, as a
   direct child of the card, so a .login-content-scoped reset missed it: the button kept
   Bootstrap's `float: left; padding: 0 15px`, sat 15px inside the other controls, and -
   being a float in a block container with no clearfix - dropped out of the card's height
   and rendered below the white background entirely. */
.login-card .col-xs-12 {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* The 2px rule and 3.2rem gap below the fieldset read as a page divider, not a card one. */
.login-card .login-content-divider {
    border-bottom: 0;
    margin-bottom: 0;
}

/* Keeps the 16px rhythm between the credential form and whatever follows it - the SSO
   button, or the "First time here?" divider now that this branch hosts the create-account
   trigger too. The Auth0 branch gets that gap free from its last .login-button's margin;
   here the closing element is the forgot-password help block, whose margin is 0.

   :not(:last-child) so a program with online applications turned off - no divider, no
   button, nothing after the form - does not gain a stray gap above the card's own padding. */
.login-card .login-content:not(:last-child) {
    margin-bottom: 16px;
}

/* Matches .login-card .auth0-h1 so both branches share one heading treatment. */
.login-card .dfx-h1 {
    margin: 0 0 24px;
    padding: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.334;
    letter-spacing: 0;
    text-align: center;
    /* token: brand/text/navy */
    color: #231a40;
}

.login-card .login-content .form-group {
    margin-bottom: 16px;
    text-align: left;
}

.login-card .login-content label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.43;
    letter-spacing: .15px;
    /* token: text/primary */
    color: #171a1e;
}

/* Same 44px height, 8px radius and 16px type as the buttons, so fields and actions
   line up as one stack. */
.login-card .login-content input.input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    /* #8C97A0, not the Amplify Light 20 (#B9C4CD) used for the divider rule. This border is
       the only visual boundary of the field, so WCAG 1.4.11 requires 3:1 against the white
       card - #B9C4CD is 1.77:1 and fails; #8C97A0 is 3.10:1. The divider keeps the lighter
       token because its meaning is carried by the "First time here?" label, not the rule. */
    border: 1px solid #8C97A0;
    border-radius: 8px;
    background-color: #fff;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .15px;
    color: #171a1e;
}

/* Mirrors the buttons' focus treatment (see .login-card div.login-button …:focus). */
.login-card .login-content input.input:focus {
    outline: 3px solid var(--isp-css-button-bgcolor, #174261);
    outline-offset: 2px;
    border-color: var(--isp-css-button-bgcolor, #174261);
}

/* css/site.css:113 supplies the colour; this just gives it room on its own line. */
.login-card .login-content .field-validation-error {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.43;
}

/* dfx.css:3745 right-aligns this; centred sits better under a centred card. */
.login-card .login-content p.help-block {
    margin: 0;
    font-size: 14px;
    line-height: 1.43;
    text-align: center;
}

.login-card .login-content .forgot-link {
    color: var(--isp-css-link-color, #174261);
}

/* The lockout warning carries its colours inline from LoginLockoutHighlight*Color, so
   only geometry is set here. */
.login-card .login-lockout-warning {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
}

.login-card .login-lockout-warning p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.43;
}

.login-card .login-lockout-warning p:last-child {
    margin-bottom: 0;
}

.login-card .create-account__container,
.login-card .create-account__container .button {
    display: block;
    width: 100%;
    margin: 0;
}

/* Shared geometry for all three actions. The padding/border-radius overrides need
   !important to beat input[type='submit'].button.button-invert in css/site-isp.aspx. */
.login-card div.login-button input[type=submit],
.login-card .create-account__container .button a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .15px;
    text-align: center;
    text-shadow: none;
}

/* Pins the outlined buttons' border to 1.5px solid. site-isp.aspx supplies border-color and
   border-width but no border-style; dfx.css:1445 does set `solid` for submits inside
   .col-xs-12 div.login-button, so this is belt-and-braces there and load-bearing for the
   anchor-based create-account button, which that rule does not match. */
.login-card div.login-button input.button-invert,
.login-card .create-account__container .button.button-invert a {
    border-style: solid;
    /* !important because css/site-isp.aspx targets input#LoginSsoBtn.login-button-invert
       with ID specificity (border-width: .2rem), which outranks these selectors. */
    border-width: 1.5px !important;
}

/* token: elevation/2 - the design gives the primary action a lift the outlined ones lack. */
.login-card div.login-button input.button:not(.button-invert) {
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}

/* PHNX-14093: spacing for the site-wide new-tab indicator, not an icon of our own.
   Content/a11y.css:5 appends FontAwesome \f14c to every a[target="_blank"], and this button's
   <a> is a flex container - so that pseudo-element becomes a flex item and the leading space in
   its `content: " \f14c"` is trimmed, leaving the glyph against the text.

   This replaces a .create-account__chevron element that used to sit inside the anchor. It was
   removed because it duplicated the a11y indicator: the button rendered two glyphs. */
.login-card .create-account__container .button a[target="_blank"]:after {
    margin-left: 8px;
}

/* AC6: the ISP palette is per-program so the ring is drawn outside the control, which
   stays visible against the white card for both the filled and outlined buttons. */
.login-card div.login-button input[type=submit]:focus,
.login-card .create-account__container .button a:focus {
    outline: 3px solid var(--isp-css-button-bgcolor, #174261);
    outline-offset: 2px;
}

.login-card__divider {
    display: flex;
    align-items: center;
    margin: 0 0 16px;
}

.login-card__divider::before,
.login-card__divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    /* token: Amplify Light 20 */
    background-color: #B9C4CD;
}

.login-card__divider span {
    flex: 0 0 auto;
    padding: 0 8px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .15px;
    color: #3f4850;
    white-space: nowrap;
}

/* PHNX-14093: no `.login-card .create-account__block` rule here any more. The card's
   create-account button is a plain link to the create-account destination, not a copy of the
   header's slide-down submenu, so no panel ever renders inside .login-card. The submenu keeps
   its own header-anchored geometry in the .create-account__block rules earlier in this file. */

/* No trailing gap when the card ends at the last login button, i.e. a program with the
   create-account trigger switched off. */
.login-card > .row:last-child .auth0-login-content > .col-xs-12:last-child div.login-button {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Mobile, per the Figma "Mobile (Small)" frame (480x853, node 12:624).

   Below the tablet breakpoint the card IS the page: it fills the viewport and its
   own 40px padding produces the design's 400px content column at 480px wide. The
   shell's inner wrapper must therefore contribute NOTHING here - two padded boxes
   nested gave 70px a side, leaving a 235px column on a 375px phone where the frame
   calls for 295px.

   The frame is also top-aligned (items-start, content starting 40px down), not
   vertically centred the way the desktop panel is.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .login-shell__form {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }

    /* The header logo sits directly above the card at these widths, so showing it again
       inside the card reads as duplicated. It stays on larger viewports, where the header
       logo is small and off to one side - that is what the Figma desktop frames show.
       display:none also drops the block's 24px bottom margin, so the heading moves up
       cleanly rather than leaving a gap. */
    .login-card__brand {
        display: none;
    }

    /* Strips its own insets (the card owns them) and becomes a flex column so the card
       below can stretch to fill the remaining height. */
    .login-shell__form .login-shell__inner {
        max-width: none;
        padding: 0;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    /* ---- full-screen card ----------------------------------------------------
       The card stretches so its white background IS the page, rather than floating
       on the panel colour - the full-bleed look of the Figma mobile frame. Its base
       max-width: 480px is lifted for that; the content column is instead held at
       400px by the padding rule further down, so the white goes edge to edge without
       the buttons stretching with it.

       The Figma mobile frame also has no header - it relies on the card's logo. We do
       the opposite: keep the header and hide the card logo, so there is exactly one
       logo either way. The header has to stay regardless, because on the non-Auth0 and
       lockout paths it is the only place the "create account" trigger appears. */

    /* max-width is lifted here specifically - full-screen means edge to edge at any
       phone or small-tablet width, and the radius/shadow would only draw a seam. */
    .login-card {
        max-width: none;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    }
}

/* Only once the viewport is narrower than the 480px cap do the card's siblings need an
   explicit gutter - above that their `margin: 0 auto` centres them at 480 alongside the
   card, and a fixed margin here would make them wider than it. 40px matches the card's
   own padding so the three left edges line up. */
@media (max-width: 480px) {
    .login-shell__form .login-shell__inner > .errorbox {
        margin-left: 40px;
        margin-right: 40px;
    }
}

/* The card fills the screen, but its CONTENT should not stretch with it - the frame's
   column is 400px and a 687px-wide button at 767px would look nothing like the design.
   Widening the card's own padding keeps the white full-bleed while holding the column at
   400px. calc() with a percentage is fine in padding on IE11. */
@media (min-width: 481px) and (max-width: 767px) {
    .login-card {
        padding-left: calc((100% - 400px) / 2);
        padding-right: calc((100% - 400px) / 2);
    }
}

@media (max-width: 380px) {
    .login-card {
        padding: 32px 24px;
    }

    .login-shell__form .login-shell__inner > .errorbox {
        margin-left: 24px;
        margin-right: 24px;
    }
}

/* PHNX-14093 (AC5) - the login page message (.login-page-alert) has no geometry of its own.
   It is a child of the .login-alerts stack, which owns the position and the width steps for
   both alert boxes in one place - see that block earlier in this file. Everything else comes
   from the shared message-box rules in css/site.css:451-575.

   Two traps if you come back to style this: do NOT add `background-image: none` to "remove the
   icon" - it is a FontAwesome :before pseudo-element (site.css:477-484), not a background
   image, so that is a no-op. And do NOT zero `.content`'s margin - site.css:560-566 gives it
   margin-left: 25px, which is what keeps the text clear of that 36px glyph. */

/* PHNX-15759 — email notification settings: rule under both headings and the delivery frequency radios.
   Colours and spacing: match the Figma redlines (Epic 15200, node 183-1586); values below are the starting point. */
.email-ntf-heading {
    /* Decorative rule (FR1, FR9): a border, so it is never announced. */
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 8px;
}

/* site.css makes div.section-title h2 inline-block, which would shrink the rule to the text width; span the card instead. */
div.section-title h2.email-ntf-heading {
    display: block;
}

/* The Delivery Frequency heading sits outside div.section-title; mirror div.section-title h2 (dfx.css + site.css) so both headings match. */
.delivery-frequency h2.email-ntf-heading {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #767676;
    padding: 18px 0;
    display: block;
}

.delivery-frequency-group {
    border: 0;
    margin: 0 0 16px;
    padding: 0;
    min-width: 0;
}

.delivery-frequency-group legend {
    border: 0;
    font-size: inherit;
    font-weight: 600;
    margin-bottom: 4px;
}

/* >= 24x24px target via padding without resizing the control (FR9). */
.delivery-frequency-option {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 16px 4px 0;
    font-weight: normal;
    cursor: pointer;
}

.delivery-frequency-option input[type="radio"] {
    margin: 0 8px 0 0;
}

/* bootstrap.css sets outline: 0 in several rules (ticket OQ11); keep a visible keyboard focus. */
.delivery-frequency-option input[type="radio"]:focus-visible {
    outline: 2px solid #005FCC;
    outline-offset: 2px;
}