/* --- Adjust the nav to work with the hero background --- */

#nav .container .content .buttons a.button.blueberry.outline {
    color: #FFF;
    border-color: #FFF;
    background-color: transparent;
}

#nav .container .content .buttons a.button.blueberry.outline:hover {
    color: #112867;
    border-color: #FFF;
    background-color: #FFF;
}

/* ------ End nav adjustments ------ */

#hero h1 {
    font-size: 52px;
}

#hero .columns.center-vertical.card-columns.padding-bottom-50 {
    padding-bottom: 50px;
}

article.section.background-radial-blueberry.mass-text-radial {
    background-image: radial-gradient(circle at 50% 0%, #1621B9 0%, #112867 12%);
}

.icon-border-panel.padding-30.height-full {
    text-align: left;
}

h3.above-table-h3 {
    padding-bottom: 60px;
    color: #112867;
}

p.under-table-p {
    padding-top: 60px;
    padding-bottom: 10px;
    color: #112867;
    font-size: 18px;
    line-height: 30px;
}

.sms-panel {
    padding: 40px 0 10px 0;
}

.sms-panel h2 {
    color: #112867;
    font-size: 22px;
    font-weight: 600;
    padding: 0 15px 50px 15px;
}

.sms-panel .checklist-reverse ul li {
    font-size: 16px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 15px;
}

.sms-panel .checklist-reverse ul li:not(:last-child) {
    border-bottom: 1px solid #E5E5E5;
}

.sms-panel .checklist-reverse ul li:not(:first-child) {
    padding-top: 20px;
}

.sms-panel .checklist-reverse ul li:last-child {
    padding-bottom: 30px;
}

.under-checklist-button {
    margin-top: 50px;
}

.background-radial-blueberry .checklist-reverse li::before {
    background: url('../images/common/check-blueberry.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.background-radial-blueberry .checklist-reverse li {
    color: #112867;
}

.app-links a:not(:first-child) {
    margin-left: 15px;
}

/* table css for sms code table */
.sms-code-table {
    border-collapse: separate;
    overflow: revert;
}

table.sms-code-table thead tr td,
table.sms-code-table tbody tr td {
    color: #112867;
    font-size: 16px;
}

table.sms-code-table thead tr td {
    background-color: transparent;
    border: 1px solid #5C77A7;
    font-weight: 800;
}

table.sms-code-table tbody tr {
    background-color: #e2eefb;
}

table.sms-code-table tbody tr td {
    padding: 30px 18px;
    border: 1px solid #5C77A7;
    width: 33%;
}

table.sms-code-table thead tr td:first-child {
    border-top-left-radius: 10px;
}

table.sms-code-table thead tr td:last-child {
    border-top-right-radius: 10px;
}

table.sms-code-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table.sms-code-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

table.sms-code-table tr td:first-child {
    border-right: none;
}

table.sms-code-table tr td:last-child {
    border-left: none;
}

table.sms-code-table tbody tr td {
    border-top: none;
}

img.table-image {
    width: 25px;
    height: 25px;
}

/* --- Media Queries -------------------- */

@media all and (max-width: 960px) {
    table.sms-code-table thead tr td,
    table.sms-code-table tbody tr td {
        font-size: 14px;
    }

    table.sms-code-table tbody tr td {
        padding: 30px 10px;
    }
}

@media all and (max-width: 768px) {
    /* --- Adjust the nav to work with the hero background --- */

    #nav .container .content .buttons a.button.blueberry.outline {
        color: #112867;
        border-color: #112867;
        background-color: transparent;
    }

    #nav .container .content .buttons a.button.blueberry.outline:hover {
        color: #FFF;
        border-color: #112867;
        background-color: #112867;
    }

    /* ------ End nav adjustments ------ */

    p.under-table-p {
        font-size: 15px;
        line-height: 28px;
    }
}