body {
    padding-bottom: 20px;
}

h1, h2, h3 {
    font-size: 2.92rem;
    line-height: 110%;
    margin: 1.46rem 0 1.168rem 0;
    font-weight: 400;
}

.navbar #header #company-logo h1 {
    color: rgba(0, 0, 0, 0.87);
    display: inline-block;
}

h1 .subtitle,
h2 .subtitle {
    display: block;
}

h1 .subtitle>*,
h2 .subtitle>* {
    display: block;
    font-size: 1rem;
    font-weight: normal;
    text-transform: capitalize;
}

h1 .subtitle>*:first-child,
h2 .subtitle>*:first-child {
    margin-top: 20px;
    font-size: 2rem;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
    white-space: normal;
}

footer {
    border-top: 3px solid;
}

footer .quick-links {
    background-color: #eee;
    border: 1px solid #ccc;
    padding: 10px;
}

footer .quick-links a {
    color: inherit;
    text-decoration: none;
}

footer .quick-links a:hover {
    text-decoration: underline;
}

footer .social-media-links {
    min-height: 20px;
}

footer .social-media-links,
footer .social-media-links>a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

footer .social-media-links>a {
    margin-right: 50px;
    color: inherit;
    text-decoration: none;
    margin-top: 10px;
}

footer .social-media-links a:hover {
    text-decoration: underline;
}

footer .social-media-links img {
    height: 40px;
}

footer .copyright {
    margin-top: 5px;
    display:inline-block;
}

footer .copyright a {
    color: inherit;
    text-decoration: none;
}

footer .copyright a:hover {
    text-decoration: underline;
}

.section-title {
    font-weight: bold;
    font-size: 16px;
}

a.link::after {
    content: " >";
}

.navbar #header {
    display: flex;
    align-items: center;
}

.sub-nav {
    min-height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#company-logo {
    flex-grow: 1;
    height: 115px;
    margin-top: 10px;
    margin-left: 10px;
}

#company-logo img {
    height: 90%;
}

#scheduled-messages-card {
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;

}

#scheduled-messages > #messages-wrapper {
    padding: 0px 10px;
}

#scheduled-messages > #messages-wrapper > ul {
    padding: 0px 20px;
}

#tooltip-scheduled-message-help > i {
    vertical-align: bottom;
}

#login, #login-authenticated {
    float: right;
    display: flex;
    align-items: stretch;
}

#login-authenticated {
    align-items: center;
    white-space: nowrap;
}

#user-name {
    margin-right: 5px;
}

#admin-area,
#cis-area {
    float: left;
    margin-right: 5px;
}

#login-authenticated #logout-button .material-icons {
    float:right;
}

#login-authenticated #user-icon .material-icons {
    float:left;
}
#features-info {
    float: left;
}

@media(max-width: 600px) {

    #login-authenticated .material-icons {
        margin-right: 5px;
        margin-left: 10px;
    }
}

#user-icon {
    float: right;
}

#login>div,
#login-authenticated #logout-form {
    margin-right: 30px;
}



#login-messages-dialog {
    height: 50%;
}

@media(max-width: 600px) {
    #login-messages-dialog {
        height: 90%;
        width: 90%;
    }
}

#login-messages-dialog .modal-content li {
    margin-bottom: 15px;
}

#login-messages-dialog .modal-content li ul {
    margin-left: 10px;
}

#login-messages-dialog .modal-content li h4 {
    margin-bottom: 5px;
    font-size: 1.5rem;
}

#maintenance-mode-dialog textarea,
#edit-widget textarea {
    width: 100%;
    max-width: 100%;
    min-height: 150px;
}

#maintenance-mode-dialog button#test-email-button {
    margin-top: 15px;
}

#maintenance-mode-dialog button.waves-effect {
    z-index: 0;
}

#maintenance-mode-dialog button span.throbber {
    margin-top: 5px;
}

#maintenance-mode #maintenance-mode-message,
#ie-only {
    white-space: pre-wrap;
    font-size: larger;
    padding: 10px;
}

#maintenance-mode #admin-login {
    float: right;
    font-size: small;
}



.notice {
    display: block;
    margin: 5px 0 5px 0;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #fff2b3;
    color: #808080;
    font-weight: bold;
    font-style: italic;
}

.notice .header {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: larger;
}

.notice .detail {
    font-weight: normal;
    margin-left: 25px;
    font-style: normal;
}

.notice .text-warning {
    color: #7e571a;
}

.instructions, .payment-status {
    display: block;
    color: #808080;
    font-style: italic;
    font-size: small;
    margin-bottom: 10px;
}

td span.instructions {
    margin-bottom: 0;
}

.payment-status {
    display: inline;
    font-style: normal;
}

.buttons .btn {
    width: 100%;
}

span.separator::after {
    content: "|";
}

.flex-container {
    display: flex;
    justify-content: space-between;
}

.action {
    color: #808080;
    cursor: pointer;
}

.icon {
    color: #808080;
    cursor: default;
}

.ui-selectee {
    cursor: pointer;
}

#edit-mode-form .action-buttons a {
    margin-right: 5px;
}

#admin-dashboard {
    margin-top: 10px;
}

#edit-language-overrides .equal-column-table {
    table-layout: fixed;
}

#edit-language-overrides #overrides .input-field {
    margin-top: 0;
}

#account-list .auto-pay::after,
#payment-form .tfoot + .tcaption::before,
#account-history-table + .tcaption::before,
#account-history-table .unposted-tran::after,
#payment-history-tab .unposted-tran::after,
#payment-history-tab .tcaption::before {
    color: #d5252e;
    font-weight: bold;
    content: "*";
}

.unposted-tran {
    white-space: nowrap;
}


#payment-form .tfoot + .tcaption,
#account-history-table + .tcaption {
    color: #d5252e;
    font-size: small;
    display: block;
    text-align: right;
}

#recent-charges-chart .tcaption {
    display: block;
    font-weight: bold;
}

#buttons .btn {
    display: inline-block;
    min-width: 100px;
    margin-right: 10px;
    margin-bottom: 5px;
}

#btn-Register {
    display: inline-block;
    min-width: 100px;
    margin-right: 15px;
    margin-bottom: 5px;
}

#breadcrumb {
  list-style: none;
  display: inline-block;
  padding: 0px;
  margin: 0;
  width: 100%;
  text-align: center;
}
#breadcrumb .icon {
  font-size: 14px;
}
#breadcrumb li {
  display: inline-block;
}
#breadcrumb li a {
  color: black;
  display: block;
  background: #D3D3D3;
  text-decoration: none;
  position: relative;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-right: 20px;
  border-left-color: #D3D3D3;
  border-color: #D3D3D3;
  cursor: default;
}
#breadcrumb li:nth-child(even) a {
  background-color: #D3D3D3;
  border-color: #D3D3D3;
  border-left-color: #D3D3D3;
}

#breadcrumb li:nth-child(even) a:before {
  border-color: inherit;
  border-left-color: transparent;
}
#breadcrumb li:nth-child(even) a:after {
  border-left-color: inherit;
}

#breadcrumb li:first-child a {
  padding-left: 5px;
}

#breadcrumb li:first-child a:before {
  border: none;
}

#breadcrumb li:last-child {
    background-color: #D3D3D3;
    border-right: solid #D3D3D3;
}
#breadcrumb li:last-child a:after {
  border: none;
}
#breadcrumb li a:before, #breadcrumb li a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid;
  border-color: inherit;
  border-width: 20px 10px;
  width: 0;
  height: 0;
}
#breadcrumb li a:before {
  left: -20px;
  border-left-color: transparent;
}
#breadcrumb li a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: inherit;
}
#account-search-button {
    padding-top: 24px;
}

#registration-wizard {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

#look-up-form > div.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 2% 0 2%
}

#look-up-form > div.row > div.input-field {
    flex-grow: 1;
}

#look-up-form > div.row > div#account-no-text.input-field {
    margin-right: 2%;
}

#bill-info-button {
    text-decoration: none;
    color: inherit;
}

#verify-buttons {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

#verify-buttons > div:last-child {
    flex: 1;
}

.error-message {
    color: #f00;
}

.status .lost,
.text-danger {
    color: #d5252e;
}

.text-warning {
    color: #ff5722;
}

.priority-low,
.text-success {
    color: #2196f3;
}

.circle {
    width: 20px;
    height: 20px;
    font-size: 12px;
    color: #fff;
    background-color: #737373;
    border: 1px solid #333333;
    text-align: center;
    font-weight: bold;
}

span.badge,
.badge {
    position: relative;
    display: inline-block;
    padding: 2px 10px 1px;
    background-color: transparent;
    border-radius: 20px;
    border: 1px solid #666;
    font-size: 10px;
    font-weight: bold;
    line-height: 1.6;
    white-space: nowrap;
    text-transform: uppercase;
    right: 0;
}

    .badge.payouts_disabled,
    .badge.refunded,
    .badge.returned,
    .badge.failed,
    .badge.lost {
        border-color: #d5252e;
        color: #d5252e;
    }

.badge.won,
.badge.text-success {
    border-color: #2196f3;
    color: #2196f3;
}

.badge.information_required,
.badge.warning_needs_response,
.badge.needs_response,
.badge.warning_under_review,
.badge.warning_closed,
.badge.under_review,
.badge.disputed {
    border-color: #ff5722;
    color: #ff5722;
}

.badge.unverified {
    border-color: #ff5722;
    background-color: #ff5722;
    color: #fff;
    font-size: 8pt;
    left: -10px;
    top: -10px;
}

.badge.good_standing {
    border-color: #4CAF50;
    color: #4CAF50;
}

.badge.autopay {
    border-color: #4CAF50;
    background-color: #4CAF50;
    color: #fff;
    font-size: 8pt;
    left: -5px;
    top: -10px;
    z-index: 3;
    float: none;
    margin-left: 0px;
}

.circle.priority-low,
.alert.priority-low {
    background-color: #2196f3;
    border-color: #1769aa;
    color: #fff;
}
.circle.priority-high,
.alert.priority-high {
    background-color: #d5252e;
    border-color: #951920;
    color: #fff;
}

#statement-picture {
    flex-grow: 5;
    height: 300px;
    margin-top: 10px;
    margin-left: 10px;
}

#statement-picture img {
    max-width: 100%;
    max-height: 100%;
}

@media(max-width: 380px) {
    #breadcrumb > li > a{
        padding: 0;
        margin-right: 19px;
    }
}

#sms-subscription div.card-action {
    padding: 0 10px;
}

#sms-subscription div#sms-phone-number {
    margin-top: 2rem;
}

#sms-capture-dialog .notice {
    background-color: transparent;
    border: none;
    margin-bottom: 2rem;
}

#auto-pay-payment-options {
    padding: .25rem .5rem;
}

#auto-pay-option-toggle .material-icons {
    font-size: 1.5rem;
}

#auto-pay-option-toggle li span.auto-pay-recurring-pay-option {
    font-weight: bold;
}

#btn-auto-pay-cancel {
    margin-left: 1rem;
}

.auto-pay-setup-form #btn-pay {
    margin-top: 1rem;
}

.auto-pay-amount-field {
    margin-top: 2rem;
}

#auto-pay-label {
    width: inherit;
}

#change-password-dialog {
    max-height: 400px;
    max-width: 625px;
    top: 20%;
    vertical-align: bottom;
    overflow: hidden;
}

#change-password-dialog .modal-content,
#update-billing-address .modal-content {
    height: calc(100% - 101px);
}

#change-password-dialog div.row {
    margin-bottom: 0;
}

#change-password-dialog #error-message {
    clear: both;
}

#change-password-dialog #password-entry,
#change-password-dialog #password-entry #password-field div.col,
#change-password-dialog #password-entry #confirm-password-field div.col {
    padding: 0;
}

#change-password-dialog #password-entry #password-fields label {
    left: 0;
}

#email-capture-dialog {
    max-height: 400px;
    max-width: 625px;
    top: 20%;
    vertical-align: bottom;
    overflow: hidden;
}

#autopay-confirmation-dialog {
    height: 50%;
    max-width: 550px;
    width: 80%;
}

#scheduled-ach-success-dialog {
    height: 50%;
    max-width: 550px;
    width: 80%;
}


#autopay-enroll-success-icon {
    color: #4caf50;
    font-size: 500%;
}

#auto-pay-confirm-message
{
    text-align:center;
}

#scheduled-ach-success-message {
    text-align: center;
}

#autopay-failure-dialog {
    height: 50%;
    max-width: 550px;
    width: 80%;
}

#autopay-enroll-failure-icon {
    color: #FF1700;
    font-size: 500%;
}

#auto-pay-failure- message {
    text-align:center;
}

#email-capture-dialog .notice {
    background-color: transparent;
    border: none;
    margin-bottom: 15px;
}

#password-entry #requirement-list input[type="checkbox"],
#password-entry #requirement-list label {
    cursor: default;
}

.forgot-password {
    color: grey;
    font-style: italic;
    font-size:12px;
}

#security-save-buttons {
    padding-top: 80px;
}

.switch-field #number-input {
    width: 100px;
}

div.title {
  position: relative;
  margin-bottom: 10px;
  margin-top: 20px;
  font-weight: bold;
}

#view-portal-as-user {
    margin-top: 20px;
}

#add-account-list > li {
    margin-bottom: 10px;
    border-bottom: solid thin;
    border-bottom-color: black;
}

#update-billing-address #submit-wait {
    height: 100%;
}

web-statement-configuration-dialog .throbber {
    margin-right: 10px;
}

#show-help {
    text-decoration: none;
    vertical-align: bottom;
}

#help-overlay-next,
#help-overlay-previous {
    position: fixed;
    z-index: 9999999;
    color: white;
    cursor: pointer;
    top: 50%;
}

#help-overlay-next {
    right: 20px;
}
#help-overlay-previous {
    left: 20px;
}

#registration-wizard #verify-buttons #no-account {
    float:right;
}
#registration-wizard #verify-buttons #submit {
    float:left;
}

@media(max-width: 600px) {
    #scheduled-messages-card {
        margin: 0px;
        width: 100%;
    }

     .navbar #header {
         display: block;
     }

    #login-authenticated {
        display: block;
        float: right;
        margin-top: 15px;
    }

    #company-logo {
        float: left;
    }

    #company-logo img {
        max-width: 280px;
        padding-bottom: 15px;
        padding-right: 15px;
    }

    #login-authenticated > div {
        display: block;
    }

    #login-authenticated #logout-form {
        margin-right: 0;
        display: inline;
    }

    #login {
        float: right;
        display: block;
        margin-right: 10px;
    }

    #login>div {
        margin-right: 0;
    }

    #help-overlay-next {
        right: 0;
    }
    #help-overlay-previous {
        left: 0;
    }

    #help-overlay-next i.large,
    #help-overlay-previous i.large {
        font-size: 3rem;
    }

    #change-password-dialog #password-fields,
    #change-password-dialog #requirement-list {
        width: 100%;
        float:left;
    }

    #change-password-dialog #current-password-field {
        width: 100%;
    }

    #password-entry {
        display: flex;
        flex-direction: column;
    }

    #password-entry > div.row {
        flex: 1;
    }

    #password-entry > #requirement-list.row {
        order: -1;
    }

    #registration-wizard #verify-buttons #no-account,
    #registration-wizard #verify-buttons #submit {
        float:none;
    }
    #registration-wizard #verify-buttons #submit {
        float:none;
        margin-bottom: 1rem;
    }

    #look-up-form > div.divider {
        opacity: 0;
    }
}
#registration-wizard #verify-buttons {
    margin-bottom: 0;
}

#search-throbber {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 15px;
}

#login-throbber {
    position:absolute;
    margin-top: 5px;
}

#account-search-button > input {
    margin-left: 10px;
}

#account-registered-dialog {
    max-width: 350px;
    max-height: 300px;
}

#company-selector select,
#community-selector select{
    border: 1px solid #a9a9a9;
}

#sms-communication-preferences-outer {
    margin-top: 10px;
}

#sms-communication-preferences {
    margin-left: 5px;
}

#payment-form #submit-wait {
    margin-top: 5px;
}

.submit-wait {
    vertical-align: middle;
}

label.field-label {
    display: inline-block;
    font-weight: bold;
    min-width: 150px;
}

.transparent .card-panel::before {
    content: "";
    background-color: #fff;
    opacity: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
}

.transparent.opacity0 .card-panel::before {
    opacity: 0;
}

.transparent.opacity10 .card-panel::before {
    opacity: 0.1;
}

.transparent.opacity20 .card-panel::before {
    opacity: 0.2;
}

.transparent.opacity30 .card-panel::before {
    opacity: 0.3;
}

.transparent.opacity40 .card-panel::before {
    opacity: 0.4;
}

.transparent.opacity50 .card-panel::before {
    opacity: 0.5;
}

.transparent.opacity60 .card-panel::before {
    opacity: 0.6;
}

.transparent.opacity70 .card-panel::before {
    opacity: 0.7;
}

.transparent.opacity80 .card-panel::before {
    opacity: 0.8;
}

.transparent.opacity90 .card-panel::before {
    opacity: 0.9;
}

.transparent .card-panel {
    width: 100%;
    position: relative;
    background-color: transparent;
    z-index: 2;
}

.invisible {
    visibility: hidden;
}

.embedded-image,
.embedded-pdf {
    margin-top: 1.5em;
    width: 100%;
}

.embedded-pdf {
    height: 80vh;
}

.adobe-icon img {
    margin-top: 1em;
}

dl.faq {
    position: relative;
}

dl.faq dt::before,
dl.faq dd::before {
    padding-right: 0.5em;
    font-weight: bold;
    position: absolute;
    left: 0;
}

dl.faq dt::before {
    content: "Q:";
}

dl.faq dd::before {
    content: "A:";
}

dl.faq dt {
    display: block;
    margin-left: 2em;
    font-weight: bold;
    margin-bottom: 0.5em;
}

dl.faq dd {
    margin-left: 2em;
    margin-bottom: 1.5em;
}

.collapsible.help {
    box-shadow: none;
}

.collapsible.help .collapsible-body {
    padding: 1rem;
}

.collapsible.help .collapsible-header .material-icons.right {
    margin-right: 0;
}

.dropdown-minwidth {
    min-width: 13em;
}

#test-gateway-settings span.throbber {
    vertical-align: text-bottom;
}

#session-timeout-dialog {
  max-width: 550px;
  max-height: 250px;
  text-align: center;
}

#session-timeout-dialog #error-icon {
  color: #d5252e;
}

nav.breadcrumbs {
    box-shadow: none;
    background-color: transparent;
}

#sms-usage-container {
    height: 240px;
    overflow-y: auto;
}

.input-checkbox {
    height: 3rem;
}

.align-items-center {
    align-items: center;
}

#request-summary {
    margin-top: 2rem;
}

.report-summary {
    font-weight: bold;
    margin-right: 1rem;
}

.plaid-status {
    justify-content: normal;
    margin-bottom: 5px;
}

.plaid-status-icon {
    padding-right: 11px;
}

.btn-update {
    cursor: pointer;
}

#failed-update-message {
    margin-top: 15px;
}

@media (max-width: 599px) and (min-width: 401px){
    #login > div{
        margin-top: 25%;
    }
}

:root {
    --cookie-consent-banner-z-index-container: 999;
    --cookie-consent-banner-border-radius-buttons: 2px;
    --cookie-consent-banner-colors-primary: #4CAF50;
}