﻿/* GLOBAL */
.uppercase {
    text-transform: uppercase;
}

.panel h1,
.panel h2,
.panel h3,
.panel h4,
.panel h5,
.panel h6,
.panel p,
.panel li,
.panel dl,
.tabs dd.active a,
.tabs .tab-title.active a,
.tabs dd > a,
.tabs .tab-title > a {
    color: #424242;
}

.tabs .tab-title.active > a {
    background-color: #0d649a;
    color: white;
}

.no-margin {
    margin: 0 0 0 0;
}

.input-tooltip-trigger {
    position: relative;
    top: .0em;
    right: 0em;
    border-bottom: none;
}

.tooltip {
    z-index: 1006;
}
    .tooltip p {
        color: white;
        font-weight: normal;
        font-size: 0.875rem;
        line-height: 1.3;
    }
.notification div.switch input:focus-visible + label {
    outline: 4px solid #5394be;
    outline-offset: 4px;
}

.notification div.switch input:checked + label {
    background: #076191;
}

.green-check {
    color: #00A74D !important;
}

.disabled-tab {
    pointer-events: none;
    cursor: default;
}

.available-sprocket {
    margin-bottom: 6px;
    margin-right: 5px;
    width: 28px;
}

@media only screen and (max-width: 1025px) {
    .available-sprocket {
        margin-bottom: 5px;
        width: 36px;
    }
}

.digital-forms-module {
    background: #ececec;
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 30px;
}

    .digital-forms-module:after { /* clearfix for the floated children */
        content: "";
        display: table;
        clear: both;
    }

    .digital-forms-module > div {
        display: inline-block;
        vertical-align: middle;
    }

    .digital-forms-module .attention,
    .digital-forms-module .completed {
        font-size: 1.5rem;
        width: 34px;
    }

    .digital-forms-module .attention {
        color: #ff9000;
    }

    .digital-forms-module .completed {
        color: #2fa147;
    }

    .digital-forms-module .available-title {
        float: left;
        margin-left: 10px;
    }

        .digital-forms-module .available-title h3 {
            margin: 0;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .digital-forms-module .available-title p {
            font-size: 0.975rem;
            margin-bottom: 0;
        }

    .digital-forms-module .available-button-container {
        float: right;
        padding-top: 10px;
    }

        .digital-forms-module .available-button-container .reminder-text {
            color: #858585;
            display: inline-block;
            font-size: 0.775rem;
            margin-right: 10px;
        }

@media only screen and (max-width: 640px) {
    .digital-forms-module .available-button-container {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        align-items: center;
    }

        .digital-forms-module .available-button-container .reminder-text {
            display: block;
            margin: 0;
            padding-top: 10px;
        }
}

.device-added-text {
    display: inline-block;
    font-size: 0.775rem;
    color: #858585;
    padding-bottom: 5px;
    padding-right: 10px;
}

.digital-forms-module .available-button-container button,
.digital-forms-module .available-button-container .button {
    margin-bottom: 0;
    width: 185px;
}

.digital-forms-module .available-button-container .button {
    font-size: 1rem;
}

    .digital-forms-module .available-button-container button.disabled,
    .digital-forms-module .available-button-container .button.disabled {
        border-width: 1px;
        border-style: solid;
        color: #8E8E8E;
    }

/* digital forms module dropdown */
.digital-forms-module-dropdown {
    background: #f8f8f8;
    margin-top: 10px;
    padding: 20px;
    width: 100%;
    border-radius: 3px;
}

    .digital-forms-module-dropdown .icon-credit-card {
        font-size: 7rem;
        color: #076191;
    }

    .digital-forms-module-dropdown fieldset legend {
        background: transparent;
    }

    .digital-forms-module-dropdown .button,
    .digital-forms-module-dropdown button {
        margin-left: 10px;
    }

    .digital-forms-module-dropdown .button-container .confirm-header,
    .digital-forms-module-dropdown .button-container .confirm-button,
    .digital-forms-module-dropdown .button-container .confirm-body,
    .digital-forms-module-dropdown .button-container .confirm-date {
        display: none;
    }

/* security-questions-module */
.security-questions .question-answer {
    margin-bottom: 1.75rem !important;
}

    .security-questions .question-answer select {
        margin-bottom: .5rem;
    }

/* credit-protection-module */
.credit-protection-initial input {
    width: 50px;
    display: inline-block;
}

.digital-forms-module .print-friendly {
    top: 0;
}

/* digital forms module modal */
#digital-forms-module-modal {
    top: 200px !important;
    z-index: 1000;
}

    #digital-forms-module-modal .return-to-digital forms {
        margin-left: 10px;
    }

.unclickable {
    pointer-events: none;
}

/* card-design-module */
.card-design .sky-carousel .sc-content-wrapper h2,
.standard-card-design .sky-carousel .sc-content-wrapper h2 {
    color: #076191;
}

.card-design .sky-carousel .sc-content-wrapper p,
.standard-card-design .sky-carousel .sc-content-wrapper p {
    color: #424242;
}

.sky-carousel .sky-carousel-container li {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

/* data entry keypad */
#authentication-answer-mailing-blue,
#authentication-answer-mailing-orange,
#authentication-answer-phoneemail-orange,
#authentication-answer-password {
    background-color: #F8F8F8;
    border: none;
    border-left: 6px solid #FF9000;
    border-radius: 0px;
    box-shadow: none;
    margin-left: 20px;
    width: 100px;
}

#authentication-answer-mailing-blue-error,
#authentication-answer-mailing-orange-error,
#authentication-answer-phoneemail-orange-error,
#authentication-answer-password-error {
    background-color: #F8F8F8;
    border: none;
    border-left: 6px solid #C60F13;
    border-radius: 0px;
    box-shadow: none;
    margin-left: 20px;
    width: 100px;
}

.authentication-answer-error-message {
    color: #C60F13;
    padding-left: 20px;
}

.button-grid-container {
    background-color: #ECECEC;
    width: 270px;
    margin: 10px 0px;
}

.button-grid {
    display: table;
    width: 250px;
    padding-left: 10px;
    padding-top: 30px;
}

.button-grid-row {
    display: table-row;
}

.button-grid-cell {
    display: table-cell;
}

    .button-grid-cell button {
        height: 50px;
        margin-top: -8px;
        padding: 5px;
        width: 70px;
    }

/* SMS table */
.sms-carrier .columns span:nth-of-type(1) {
    background-color: #f1f1f1;
    padding: 5px;
    display: block;
}

.sms-carrier .columns span:nth-of-type(2) {
    padding: 5px;
    border: 1px solid #f1f1f1;
    display: block;
    margin-top: 1px;
    margin-bottom: 5px;
}
/* SMS table */

/* module checkboxes */
.digital-forms-module-dropdown input[type="checkbox"] + label > span {
    display: inline-block;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    width: 23px;
    height: 21px;
    margin: -8px 1px 0px -5px;
    vertical-align: middle;
    background: url(../../../images/check_box_sheet_grey.png) left top no-repeat;
    cursor: pointer;
}

.digital-forms-module-dropdown input[type="checkbox"]:checked + label > span {
    background: url(../../../images/check_box_sheet_grey.png) -21px top no-repeat;
}

.digital-forms-module-dropdown input[type="checkbox"] + label > div {
    color: #000;
    display: inline;
    font-family: 'Open Sans', sans-serif;
}
/* module checkboxes */

/*module panel*/
#device-management div.panel {
    margin-left: 30px;
    margin-right: 30px;
    border-radius: 3px;
}
/*module panel*/

/*button button radius .input-button-continue*/
#input-button-continue {
    margin: 10px;
    opacity: 1;
    background-color: #076191;
}
/*button button radius .input-button-continue*/

/* Bank Account Info*/
.primary-bank-account-icon {
    color: #808080;
    display: inline-block;
    vertical-align: middle;
    margin-top: inherit;
}

.primary-bank-account-text {
    display: inline-block;
    vertical-align: middle;
}

    .primary-bank-account-text::before {
        content: "Primary ";
    }

.account-ending-in {
    vertical-align: middle;
}

    .account-ending-in::after {
        content: "  ";
    }

.bank-account-number {
    display: inline
}

.verified-star-icon::after {
    content: "Verified";
}

.bank-account-tabs li span {
    font-size: 12px;
}

.primary-bank-account-checkbox {
    margin-top: -1px;
}

@media screen and (max-width: 768px) {
    .bank-account-tabs ul.tabs li {
        float: none !important;
        border-bottom: 1px solid #808080;
        margin-top: 0px !important;
        font-size: 12px;
        line-height: 1;
    }

        .bank-account-tabs ul.tabs li a {
            padding-top: 5px;
            padding-bottom: 5px;
        }
}


input.routingnumber::-ms-clear {
    display: none;
}

input.routingNumberOk {
    border-color: #cccccc;
}

input.routingNumberWrong,
input.routingNumberWrong:focus {
    border-color: #c60f13;
}
/* Bank Account Info*/



/*module Device-management-remove-devices*/
#management-remove-devices {
    margin: auto;
}
/*module Device-management-remove-devices*/

/*module Device-management-remove-devices*/
#h-removed-device {
    margin-left: 15px;
}
/*module Device-management-remove-devices*/

.bank-account-tab-warning {
    display: none;
    margin-top: 30px;
}

#remove-bank-account-info button.yes-button {
    color: white;
}

#remove-bank-account-info-bav button.yes-button {
    color: white;
}

.form-frame { /* content frame */
    border: 1px solid #076191;
    border-radius: 3px;
    margin-bottom: 40px;
}

.form-frame-header { /* content frame header */
    background-color: #0d649a;
    color: #ffffff;
    font-size: 1.6875rem;
    font-weight: 300;
    letter-spacing: 0.05rem;
    padding: 12px 15px;
}

aside .form-frame-header {
    font-size: 1.2rem;
    padding: 15px 15px 16px 15px;
}

.form-frame-header h1,
.form-frame-header h2,
.form-frame-header h3,
.form-frame-header h4,
.form-frame-header h5,
.form-frame-header h6 {
    color: #ffffff;
}

.text-centered {
    text-align: center;
}

.form-frame-subheader {
    margin-right: 18px;
    margin-bottom: 30px;
    margin-left: 18px;
}

    .form-frame-subheader hr {
        border: none;
        border-top: 1px solid #cdcdcd;
        margin: 0 auto;
    }

/* content frame body */
.form-frame-content {
    padding: 20px;
}

    .form-frame-content ul {
        margin-left: 40px;
    }

        .form-frame-content ul li {
            margin-bottom: 5px;
        }

        .form-frame-content ul ul {
            margin-top: 10px;
            margin-bottom: 10px;
            margin-left: 20px;
        }

    .form-frame-content .form-hover-question {
        cursor: help !important;
    }

    .form-frame-content .info-note,
    .form-frame-content .form-comments-label {
        font-size: 0.875rem;
    }

    .form-frame-content .comments-note {
        font-size: 13px;
        padding-top: 7px;
    }

    .form-frame-content .payment-date {
        float: left;
        width: 80%;
    }

    .form-frame-content .datepicker-button {
        background-color: #ffffff;
        color: #424242;
        float: left;
        margin: 0;
        padding: 0 0 0 5px;
    }

    .form-frame-content .upload-section {
        margin-top: 40px;
    }

        .form-frame-content .upload-section .upload-label p {
            font-size: 0.9rem;
            padding-top: 11px;
            text-align: right;
        }

        .form-frame-content .upload-section .upload-label-hints p {
            font-size: 0.9rem;
        }

        .form-frame-content .upload-section button {
            margin-left: -10px;
        }

    /*.form-frame-content textarea {
        margin-top: -15px;
        margin-bottom: -5px;
    }*/

aside .form-frame-content h5 {
    font-weight: 600;
}

.form-label-listed-posted {
    position: relative;
    top: -26px;
}

.form-frame-content .form-label {
    position: relative;
    top: -26px;
}

.form-frame-content .form-input-label-hyperlink {
    font-size: 0.825rem;
    text-decoration: underline;
}

.form-frame-content .form-confirm-data {
    padding: 20px;
}

    .form-frame-content .form-confirm-data .row {
        padding-bottom: 15px;
        padding-top: 15px;
    }

        .form-frame-content .form-confirm-data .row:nth-child(odd) {
            background-color: #e1effa;
        }
/* end content frame body */

/* file upload modal styling */
.form-uploads-container .uploads-row-background {
    background-color: #d3e6f3;
    border-radius: 3px;
    height: 2.5rem;
    margin-left: 30px;
    margin-right: 30px;
}

.form-uploads-container input[type=file] {
    color: #424242;
    padding: 10px;
    font-size: 0.9rem;
    /*position:absolute;   this was for multiple-selection of files
    opacity: 0;*/
}

.form-uploads-container .uploads-clear-button {
    border-radius: 2px;
    color: #ffffff;
    float: right;
    font-size: 0.8rem;
    margin: 10px 10px 0 0;
    padding: 3px 10px;
    background-color: #5394be;
}

    .form-uploads-container .uploads-clear-button:hover {
        background-color: #0d649a;
    }
/* end file upload modal styling */

/* select (dropdown) styling */
.form-select-container {
    width: 82%;
}

.form-select {
    /* alters some properties from base css for select element */
    font-weight: 300 !important;
    height: 2.3125rem;
    padding: 0.5rem;
    position: unset;
}
/* end select styling */

/* radio button styling */
.form-radio-container ul {
    list-style: none;
}

    .form-radio-container ul li {
        height: 40px;
        margin-bottom: -5px;
    }

        .form-radio-container ul li input[type=radio] {
            display: block;
            opacity: 0;
            cursor: pointer;
            position: relative;
            left: -27px;
            top: 12px;
            z-index: 1;
            margin-bottom: 0;
        }

        .form-radio-container ul li label {
            cursor: pointer;
        }

.form-radio-container .form-radio-button {
    border: 1px solid #aaaaaa;
    border-radius: 10px;
    height: 20px;
    width: 20px;
    position: relative;
    left: -30px;
    top: -5px;
}

    .form-radio-container .form-radio-button::before {
        display: block;
        content: '';
        border-radius: 6px;
        height: 12px;
        width: 12px;
        position: relative;
        left: 3px;
        top: 3px;
    }

.form-radio-container input[type=radio]:checked ~ .form-radio-button::before {
    background-color: #0875b0;
}

.form-radio-container input[type=radio]:checked ~ label {
    color: #0875b0;
}
/* end radio button styling */

/* checkbox styling */
.form-checkbox-container ul {
    list-style: none;
}

    .form-checkbox-container ul li {
        height: 40px;
        margin-bottom: -5px;
    }

        .form-checkbox-container ul li input[type=checkbox] {
            display: block;
            opacity: 0;
            cursor: pointer;
            position: relative;
            left: -27px;
            top: 12px;
            z-index: 1;
            margin-bottom: 0;
        }

        .form-checkbox-container ul li label {
            cursor: pointer;
            position: relative;
            top: -26px;
        }

.form-checkbox-container .form-check-box {
    border: 1px solid #aaaaaa;
    border-radius: 5px;
    height: 20px;
    width: 20px;
    position: relative;
    left: -30px;
    top: -5px;
}

    .form-checkbox-container .form-check-box::before {
        display: block;
        content: '';
        border-radius: 2px;
        height: 13px;
        width: 7px;
        position: relative;
        left: 6px;
        top: 1px;
    }

.form-checkbox-container input[type=checkbox]:checked ~ .form-check-box::before {
    border: solid #0875b0;
    border-width: 0 2px 2px 0;
    transform: rotate(40deg);
}

.form-checkbox-container input[type=checkbox]:checked ~ label {
    color: #0875b0;
}
/* end checkbox styling */

.form-checkbox-container .recurring-charge-amount {
    margin-top: 5px;
}

    .form-checkbox-container .recurring-charge-amount ul {
        margin-top: -3px;
        height: 35px;
    }

        .form-checkbox-container .recurring-charge-amount ul li {
            display: inline-block;
            margin: 0 50px 0 10px;
        }

    .form-checkbox-container .recurring-charge-amount input[type=text] {
        width: 40%;
    }

    .form-frame-content .form-uploads-container .uploaded p {
        font-size: 0.9rem; 
        padding-top: 11px;
        text-align: left;
    }

    .form-frame-content .form-uploads-container .uploaded label {
        font-size: 0.9rem;
        margin-left: 10px;
    }

.form-date-row {
    margin: 10px 0;
}

#digital-customer-service-upload.reveal-modal {
    top: 100px !important;
    position: absolute !important;
    padding: 2.8rem 1.875rem;
}

@media only screen and (max-device-height: 1024px) {
    #digital-customer-service-upload.reveal-modal {
        height: auto !important;
    }
}

@media screen and (max-width: 640px) {
    .form-label {
        font-size: 0.88rem;
    }

    .form-frame-content ul {
        margin-left: 20px;
    }

    .form-frame-content .form-confirm-data .row {
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .form-frame-content .form-confirm-data .large-3,
    .form-frame-content .form-confirm-data .medium-3 {
        text-align: left !important;
        padding-bottom: 5px;
    }

    .form-frame-content .upload-section {
        margin-top: 20px;
    }

        .form-frame-content .upload-section .upload-label p {
            text-align: left;
            margin-bottom: -5px;
        }

        .form-frame-content .upload-section .upload-label-hints p {
            margin-top: -15px;
            padding-top: 0;
        }

        .form-frame-content .upload-section button {
            margin-top: 10px;
            margin-left: 0;
        }

    #form-upload .form-frame {
        margin-left: -30px;
        margin-right: -30px;
    }

    .form-uploads-container .uploads-row-background {
        margin-left: 10px;
        margin-bottom: 10px;
        height: 6rem;
    }

    .form-uploads-container input[type=file] {
        padding-left: 0;
        margin-left: -5px;
    }

    .form-radio-container,
    .form-checkbox-container {
        margin-left: 20px;
    }

        .form-radio-container .margin-for-mobile {
            margin-left: 20px;
        }

        .form-radio-container ul li {
            height: 45px;
        }

            .form-radio-container ul li label {
                line-height: 1rem;
                top: -55%;
            }

        .form-checkbox-container ul li {
            height: 45px;
        }

            .form-checkbox-container ul li label {
                line-height: 1rem;
                top: -55%;
            }

        .form-checkbox-container .recurring-charge-amount input[type=text] {
            width: 60%;
        }

    .form-select-container {
        width: 100%;
    }

        .form-select-container .form-select {
            width: 98%;
        }

            .form-select-container .form-select option {
                overflow-wrap: break-word;
            }

    .mobile-radio-check-position {
        margin-left: -18px;
    }

    aside .form-frame-content p {
        font-size: 1rem;
    }
}

@media screen and (max-width: 360px) {
    .form-radio-container,
    .form-checkbox-container {
        margin-left: 10px;
    }

        .form-radio-container ul li,
        .form-checkbox-container ul li {
            margin-bottom: 10px;
        }

        .form-checkbox-container .recurring-charge-amount {
            margin-left: 3px;
        }

            .form-checkbox-container .recurring-charge-amount input[type=text] {
                width: 80%;
            }

        .form-radio-container .margin-for-mobile {
            margin-left: 10px !important;
        }

    .mobile-radio-check-position {
        margin-left: -27px;
    }
}