:root {
    --primary: #fcb627;
    --primary-valid: #b45b08;
    --cassiopeia-color-primary: var(--primary);
    --color-primary: var(--primary);
    --primary-rgb: 252, 182, 39;
    --secondary: #042f47;
    --secondary-rgb: 4, 47, 71;
    --color-secondary: var(--secondary);
    --cassiopeia-color-link: #f48820;
    --cassiopeia-color-hover: #eaa20f;
    --template-text-dark: #444;
    --body-color: #444;
    --font-heading: "Roboto", sans-serif;
    --body-font-family: "Open Sans", sans-serif;
    --modal-width: 80%;
    --bg-header: #fff;
    --bg-footer: var(--secondary);
    --border-radius-xl: 0.4rem;
}

html {
    font-size: 16px;
}

body {
    font-size: 0.875rem;
    font-family: var(--body-font-family);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;

    &:not(.home) {
        .page-header {
            text-align: center;
            width: 100%;
            left: 0;
            top: 0;

            h1 {
                font-weight: 500;
                margin-block: 0;
                background-color: var(--cassiopeia-color-link);
                color: var(--secondary);
                font-size: 1.875rem;
                padding-block: 0.8rem 0.9rem;
                margin-inline: -50rem;
                line-height: 1;
            }
        }

        .com-content-article__body {
            margin-block-start: 2.2rem;

            h2 {
                font-size: 2.125rem;
                font-weight: 600;
            }

            p {
                line-height: 1.857;
            }

            h3 {
                font-weight: 600;
            }
        }

        .site-grid {
            position: relative;
            overflow-x: hidden;
        }

        .container-component {
            position: relative;
        }
    }

    &.home {
        .container-top-b {
            background: linear-gradient(to bottom, #fff2d7, #fff);
        }
    }
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.bg-primary {
    color: #000;
    background-color: var(--primary);
}

.container-component > :first-child,
.container-sidebar-left > :first-child,
.container-sidebar-right > :first-child,
.container-component > * + *,
.container-sidebar-left > * + *,
.container-sidebar-right > * + * {
    margin-top: 0;
}

/* Main Container */
.site-grid > [class*=" container-"],
.site-grid > [class^="container-"] {
    background-color: #fff;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.metismenu.mod-menu .metismenu-item {
    padding: 0.5rem 0.8rem;

    span,
    a,
    button {
        color: #000;
        text-transform: uppercase;
        font-size: 0.8rem;
        font-weight: 600;
    }
}

main > form {
    margin-block-start: 2rem;
}

.btn-primary {
    color: #000;
    font-weight: 600;

    &:hover {
        color: #000;
    }
}

.btn {
    font-size: 0.875rem;
}

.fs-7 {
    font-size: 0.875rem;
}

.fs-8 {
    font-size: 0.65rem;
}

.site-grid {
    grid-template-columns:
        [full-start] minmax(0, 1fr) [main-start] repeat(
            4,
            minmax(0, 15.3125rem)
        )
        [main-end] minmax(0, 1fr) [full-end];
}

/* Make the definition lists look like tables. 
   Add "table" class to <dl>
*/
dl.table {
    display: grid;
    grid-auto-columns: auto;
    grid-template-columns: 40% 60%;
}

dl.table > dt,
dl.table > dd {
    padding: 0.5rem;
    border-collapse: collapse;
    margin: 0;
    border: 0 solid;
    border-bottom-width: 1px;
    border-color: inherit;
}

dl.table > dt:nth-child(4n + 1),
dl.table > dd:nth-child(4n + 2) {
    background-color: var(--table-striped-bg);
}

/* Small menu triangles */
.metismenu.mod-menu .mm-toggler:after {
    color: #000;
    border-left: 0.4em solid transparent;
    border-right: 0.4em solid transparent;
    border-top: 0.4em solid;
}

.table thead th {
    white-space: normal;
}

.rsfp-signature-footer .description {
    color: #444 !important;
}

/* headings spacing */
article :has(+ h2, + .h2) {
    margin-block-end: 2.5rem;
}

article :has(+ h3, + .h3) {
    margin-bottom: 1.5rem;
}

.services-header img {
    height: 29px;
}

.container-bottom-a > *,
.container-bottom-b > *,
.container-top-a > *,
.container-top-b > * {
    margin: 0;
}

.container-banner {
    margin: 0;
}

.container-bottom-a {
    padding-inline: 0.75rem;
}

[align="center"] {
    text-align: center;
}

.metismenu.mod-menu {
    margin: 0.5rem 0;
}

.container-header {
    background: #fff;

    nav {
        margin-top: 0;
    }

    .container-nav {
        padding-block-end: 0;
    }

    .mod-menu > li > a,
    .mod-menu > li > span {
        color: #000;
        text-transform: uppercase;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .navbar-toggler {
        color: #000;
    }
}

.form-control,
.form-select,
.form-check-input {
    border-color: #555;
}

.coop-modules {
    .find-form {
        max-width: 250px;
        margin: 0 auto;
    }

    .item-title {
        font-size: 1.3rem;
    }

    input[type="text"] {
        width: calc(100% - 60px);
    }
}

.home-rates {
    border-bottom: 11px solid var(--cassiopeia-color-link);

    .btn {
        color: #fff;
        font-size: 1rem;

        &:hover {
            background-color: var();
            color: #000;
        }
    }
}

.home-rate {
    .rate {
        font-size: 2.5rem;
    }

    .type,
    .apr {
        font-size: 0.9rem;
    }
}

.home-rates-title {
    &:after {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 29px 0 29px 27px;
        border-color: transparent transparent transparent #199fbd;
        transform: rotate(0deg);
        content: "";
        margin-inline-start: 1rem;
    }
}

.rates-title {
    font-size: 1.75rem;
    font-family: "Roboto", sans-serif;
}

.footer.footer-icons {
    background: #fff;
    color: #000;
}

.footer-icons .invert {
    filter: invert(1);
}

.mn-widget-member-name {
    display: none;
}

.footer {
    margin-block-start: 0;
    background-image: none;
}

.footer-blue {
    border-block: 11px solid #199fbd;
}

.footer-tel {
    font-size: 35px;
}

.atm-branch > div {
    max-width: 314px;
    box-shadow: 0 0 8px 2px #aaa3;
}

.services-container {
    border-radius: 2rem;
    background-color: #fff;
    box-shadow: 0 0 8px 2px #aaa3;
}

.shadow {
    --box-shadow: 0 6px 8px 2px #aaa3;
}

.shadow-center {
    box-shadow: 0 0 8px 2px #aaa3;
}

.gives-you-more {
    display: flex;
    flex-direction: column-reverse;

    h2 {
        font-size: 2rem;
    }
}

.table {
    margin-block-end: 2rem;
}

.container-topbar a:not(.btn):hover,
.container-topbar a:not(.btn):focus,
.container-topbar .btn-link:hover,
.container-topbar .btn-link:focus,
.container-below-top a:not(.btn):hover,
.container-below-top a:not(.btn):focus,
.container-below-top .btn-link:hover,
.container-below-top .btn-link:focus {
    color: var(--primary);
}

.container-below-top {
    justify-content: space-between;
    align-items: center;
}

.navbar .mod-menu .level-1 > ul {
    padding-block: 0.4rem;
}

.table-primary {
    --table-bg: #fff;
    --table-striped-bg: #eceff1;
    --table-color: #000;

    tr,
    th,
    td {
        border-color: #e6e6e7;
        border-width: 1px;
    }

    thead th {
        background-color: var(--primary);
        color: #000;
    }
}

.form-control {
    border-color: #555;
}

.table th {
    font-weight: 700;
}

h1,
h2,
h3 {
    margin-block-end: 0.67em;
    color: var(--secondary);
}

.btn-check:checked + .btn,
:not(.btn-check) + .btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
    background-color: var(--cassiopeia-color-hover);
    color: #fff;
}

blockquote {
    font-size: 2rem;
    padding: 3rem;
    background: var(--footer-color);
    font-style: italic;
    font-weight: 600;
}

.logo img {
    width: 200px;
}

.metismenu.mod-menu .metismenu-item:has(.no-desktop) {
    display: none;
}

.menu-icon img {
    width: 30px;
    height: 30px;
}

body.com_users main,
body.com_rsform main {
    margin-block-start: 3rem;
}

.dog404 {
    background: transparent url("/images/404-dog.jpg") right bottom no-repeat;
    background-size: contain;
}

.rsfp-directory-search #rsfilter {
    display: inline-block;
    width: 240px;
    vertical-align: bottom;
}

.directoryDetail,
.directoryDelete {
    text-decoration: none;
    padding: 0.25rem;
}

.rsficon-zoom-in:before {
    font-size: 1rem;
}

.rsficon-close1:before,
.rsficon-remove:before,
.rsficon-times:before {
    font-size: 1.2rem;
}

.djslider-default {
    .navigation-container img {
        z-index: 1;
    }

    .slide-desc:before {
        background: linear-gradient(0deg, #fff9 50%, transparent);
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 160%;
        z-index: 0;
        left: 0;
    }

    .slide-desc-text-default {
        color: var(--color-secondary);
        font-weight: 500;
        font-size: 1rem;
        padding: 1rem;
    }

    .slide-text {
        background: #ffffff77;
        padding: 1rem 2rem;
        backdrop-filter: blur(5px);
        display: inline-block;
        border-radius: 1rem;
    }
}

.id-theft-protection {
    padding-block-start: 3rem;
}

.container-banner img:not(.dj-image) {
    object-fit: cover;
    width: 100%;
    max-height: 200px;
}

.article-category-image {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 0;
    position: relative;
    margin-bottom: 2rem;
}

.com-finder {
    margin-block-start: 3rem;
}

.alert {
    --alert-margin-bottom: 0;
}

.checking-card {
    background-color: #fff;
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content auto max-content;
    gap: 14px 0;
    width: 100%;
    height: 100%;
    min-height: 700px;
    box-shadow: 1px 1px 8px 1px #bbb;
    border-radius: 8px;
    box-sizing: border-box;
    transition:
        transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        box-shadow 0.4s ease;
    will-change: transform, box-shadow;
}

.checking-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.checking-card .card-top-header {
    background-color: #fff;
    padding: 0.5rem;
    text-align: center;
}

.checking-card .card-top-header h3 {
    color: var(--heading-color);
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
}

.checking-card .card-gray-box {
    background-color: #f9f9f9;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.checking-card .description {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.custom-check-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.custom-check-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    color: #444;
    line-height: 1.4;
}

.custom-check-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 900;
    font-size: 1.1rem;
}

.checking-card .card-action-footer {
    background-color: #042f47;
    padding: 1.5rem;
    text-align: center;
}

/* RegularLabs overrides */
[data-rlta-element="container"][data-rlta-theme="colorful"][data-rlta-type="accordions"]
    > [data-rlta-element="button"][data-rlta-color="yellow"]:not(
        [data-rlta-state="closed"]
    ):hover
    > [data-rlta-element="heading"],
[data-rlta-element="container"][data-rlta-theme="colorful"][data-rlta-type="accordions"]
    > [data-rlta-element="button"][data-rlta-color="yellow"]:not(
        [data-rlta-state="closed"]
    )
    > [data-rlta-element="heading"],
[data-rlta-element="container"][data-rlta-theme="colorful"][data-rlta-type="tabs"]
    > [data-rlta-element="button-list"]
    > [data-rlta-element="button"][data-rlta-color="yellow"]:not(
        [data-rlta-state="closed"]
    ):hover
    > [data-rlta-element="heading"],
[data-rlta-element="container"][data-rlta-theme="colorful"][data-rlta-type="tabs"]
    > [data-rlta-element="button-list"]
    > [data-rlta-element="button"][data-rlta-color="yellow"]:not(
        [data-rlta-state="closed"]
    )
    > [data-rlta-element="heading"] {
    color: #000;
}

[data-rlta-element="container"][data-rlta-theme="colorful"][data-rlta-type="accordions"]
    > [data-rlta-element="button"][data-rlta-color="yellow"]:not(
        [data-rlta-state="closed"]
    ) {
    background-color: #fff;
    border-bottom: 0;
}

[data-rlta-element="container"][data-rlta-theme="colorful"][data-rlta-type="accordions"]
    > [data-rlta-element="button"][data-rlta-color="yellow"],
[data-rlta-element="container"][data-rlta-theme="colorful"][data-rlta-type="tabs"]
    > [data-rlta-element="button-list"]
    > [data-rlta-element="button"][data-rlta-color="yellow"] {
    background-color: var(--primary);

    &:hover {
        background-color: var(--cassiopeia-color-link);
    }
}

[data-rlta-element="container"][data-rlta-theme="colorful"][data-rlta-type="accordions"]
    > [data-rlta-element="panel"][data-rlta-color="yellow"],
[data-rlta-element="container"][data-rlta-theme="colorful"][data-rlta-type="tabs"]
    > [data-rlta-element="panels"]
    > [data-rlta-element="panel"][data-rlta-color="yellow"] {
    padding: 0 1rem;
    border-color: var(--primary);
}

[data-rlta-type="accordions"] {
    .table:first-child {
        margin-block-start: 0.5rem;
    }

    .table:last-child {
        margin-block-end: 1rem;
    }
}

.article-category-image img {
    aspect-ratio: 2.5;
    object-fit: cover;
}

/* Mobile slideshow */
@media (width <= 767px) and (orientation: portrait) {
    .container-banner .djslider-default,
    .container-banner .djslider-default ul.djslider-in > li {
        height: 550px !important;
        max-width: 100vw;
    }

    .container-banner .djslider-default img.dj-image {
        aspect-ratio: 11/16;
        object-fit: cover;
    }

    .djslider-default,
    .djslider-default ul.djslider-in > li {
        height: 360px !important;
    }

    .djslider-default {
        .slide-desc {
            bottom: 0 !important;
        }

        img.dj-image {
            aspect-ratio: 1/1;
            object-fit: cover;
        }
    }
}

/* ================ MOBILE ONLY ================ */
@media (width <= 767px) {
    .container-header {
        border-bottom: 1px solid #ddd;
    }
}

/* ================ TABLET AND UP ================ */
@media screen and (min-width: 768px) {
    .metismenu.mod-menu {
        margin: 0;
    }

    .home-rates-title {
        display: block;
    }

    .home-rates .btn {
        font-size: 1.18rem;
    }

    .container-header .container-nav {
        background-color: var(--primary);
    }

    .services-item {
        max-width: 330px;
    }

    .gives-you-more {
        flex-direction: row;
    }

    .atm-branch > div {
        box-shadow: none;
    }

    .id-theft-protection {
        padding-block-start: 4.4rem;
    }

    .logo img {
        width: 245px;
    }

    .djslider-default .slide-desc-text-default {
        max-width: 58%;
    }
}

@media screen and (min-width: 992px) {
    .djslider-default {
        .slide-desc {
            left: calc(50% - 530px) !important;
            max-width: 980px;
            background: transparent none;

            &:before {
                display: none;
            }
        }
    }

    body:not(.home) .com-content-article__body {
        margin-block-start: 2.2rem;
    }

    .services-item {
        max-width: 240px;
        background-color: #fff;
        box-shadow: 0 0 8px 2px #aaa3;
        border-radius: 2rem;
    }

    .services-container {
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
    }

    .id-theft-protection {
        padding-block-start: 3.35rem;
    }

    .atm-branch > div {
        box-shadow: 0 0 8px 2px #aaa3;
    }

    .metismenu.mod-menu .no-desktop {
        display: none;
    }

    .article-category-image img {
        object-fit: cover;
        width: 100%;
        max-height: 300px;
        aspect-ratio: 4.96;
    }
}

@media screen and (min-width: 1200px) {
    .container-banner .djslider-default,
    .container-banner .djslider-default ul.djslider-in > li {
        max-height: 480px !important;
    }
}

@media screen and (min-width: 1400px) {
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1060px;
    }

    .article-category-image img {
        max-height: 360px;
    }
}