/*************** NYC Colors *************************/
.registration-outer{
    background-color: #1771b7;
}

.login-footer{
    background: #333333;
}

.text-steps{
    color: #1771b7; margin-bottom: 20px;
}

.header-left-col img{
    width: 82%;margin: 2% 0 0% 5%;
}

.header-login img{
    width: 35%;
}

.main-left-col{
    background-color: #0a5796!important;
}

.accordion-container{
    background-color: #0a5796;
}

.set > a:hover{
    background-color: #3381c1!important;
}
.set > a.active {
    background-color: #3381c1!important;
}
.content{
    background-color: #3381c1!important;
}

ul.tabs li.active{
    background-color: #1771b7!important;
}

ul.tabs li.active::after{
    border-top-color: #1771b7;
}

ul.tabs li{
    background-color: #b8c9d6;
}

.breakdown-more, .edit-transit{
    color: #1771b7;
}

.middle-col2 p{
    border: 2px solid #1771b7;
}

.middle-col2 .status-right .fa-truck, 
.middle-col2 .status-right .fa-calendar, 
.middle-col2 .status-right .fa-share-square-o, 
.middle-col2 .status-right .fa-share-square, 
.middle-col2 .status-right .fa-ban, 
.middle-col2 .status-right .fa-usd, 
.middle-col2 .status-right .fa-money, 
.middle-col2 .status-right .fa-check, 
.middle-col2 .status-right .fa-clock-o, 
.middle-col2 .status-right .fa-lock, 
.middle-col2 .status-right .fa-spinner, 
.middle-col2 .status-right .fa-check-square-o{
    background-color: #1771b7;
}

.a-links{
    color: #1771b7;
}

.a-links:hover, .a-link-small:hover{
    color: #333333;
}

.current-order-cta{
    background-color: #efefef;
}

footer{
    background-color: #333333;
}

.cs-phone{
    color: #1771b7;
}

.order-steps{
    background-color: #f5f5f5;
}

.steps-active{
    color: #0b84c3;
}

.steps-number-active{
    background-color: #0b84c3;
}

.steps-notcomplete{
    color: #cbcbcb;
}

.steps-number-notcomplete{
    background-color: #cbcbcb;}

.select-commute{
    border: 5px solid #0a5796;
    background-color: #0a5796;
}
.select-commute:hover{
    border: 5px solid #333333;
    background-color: #333333;
    transition: all .5s ease;
}

.selected{
    background-color: #cccccc;
    border: 5px solid #0a5796;
}

.selected i{
    color: #0a5796;
}

.selected a .transportation-text{
    color: #0a5796;
}

.selected{
    background-color: #f5f5f5;
    border: 5px solid #00a78e;
}

.selected i{
    color: #00a78e;
}

.selected a .transportation-text{
    color: #00a78e;
}

.header-block{
    background-color: #1771b7;
}

.small-button{
    background-color: #1771b7;
    border: 1px solid #1771b7;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.small-button:hover{
    background-color: #333333;
    transition: all .5s ease;
    border: 1px solid #333333;
}

.large-button{
    background-color: #1771b7;
    border: 1px solid #1771b7;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.large-button:hover{
    background-color: #333333;
    transition: all .5s ease;
    border: 1px solid #333333;
}

.profile-section{
    background-color: #00a78e;
}

.profile-section > a.active{
    background-color: #00a78e;
}

.switch-field input:checked + label{
    background-color: #0b84c3;
}

.cm-success{
    color: #0b84c3;
}

.steps-complete{
    color: #ffffff;
}

.steps-complete .fa-check{
    background-color: #58a611;
}

.steps-number-active{
    background-color: #1771b7;
}

.steps-active{
    color: #1771b7;
}

.steps-number-notcomplete{
    background-color: #888888;
}

.steps-notcomplete{
    color: #888888;
}

.product-use-list{
    color: #0b84c3;
}

ul.search-toggle li.active{
    background-color: #0b84c3;
}

.order-details .fa-plus-square{
    color: #0b84c3;
}

.month-picker-month-table td{
    background-color: #0b84c3;
}

li.active a{
    background: #0b84c3;
}

.complete i{
    color: #0b84c3;
}

.small-button-reverse{
    border: 1px solid #0b84c3;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;-webkit-appearance: none;
}

.small-button:hover{
    background: #333333;
}

.saved-button{
    border: 1px solid #0b84c3;
    color: #0b84c3;
}

.success-edit-order{
    background-color: #0b84c3;
}

.success-pwreset{
    color: #0b84c3;
}

.success{
    color: #0b84c3;
}

.app-success{
    border: 1px solid #0b84c3;
    color: #0b84c3;
}

.claim-details-notes i{
    color: #0b84c3;
}

.icon{
    background-color: #0b84c3;
}

.page-outline:hover{
    background-color: #333333;
}

.page-outline{
    border: 1px solid #1771b7;
    border-radius: 2px;
}

.next-page i{
    color: #1771b7;
}

.next-page .active-page a{ 
    background-color: #1771b7;
}

.number-steps{
    background-color: #0b84c3;
}

.text-steps{
    color: #0b84c3;
}

.back-links a{
    color: #0b84c3;
}

.lost-card{
    color: #0b84c3!important;
}

.popup-container ol li:before{
    background: #0b84c3;
}

.overlay{
    background-color: #0b84c3;
}

.edit-delete{
    color: #0b84c3;
}

a{
    color: #1771b7;
}

.more-orders{
    color: #0b84c3;
}

.transaction-more, 
.transaction-more-2, 
.transaction-more-3, 
.transaction-more-4{
    color: #0b84c3;
}

.filter-by input[type='checkbox']:checked + label:before{
    -moz-box-shadow: inset 0 0 0 10px #0b84c3;
    -webkit-box-shadow: inset 0 0 0 10px #0b84c3;
    box-shadow: inset 0 0 0 10px #0b84c3;
}

.snapshot figure i{
    color: #0b84c3;
}

.edit-order{
    color: #0b84c3;
}

.header-block-sm{
    background-color: #1771b7;
}

.claim-instructions li:before{
    color: #0b84c3;
}

.zip-container{
    color: #0b84c3;
}

.tab_drawer_heading{
    background-color: #0b84c3;
}

.add-button{
    background: #0b84c3;
    border: 2px solid #0b84c3;
}

.add-product{
    border: 5px solid #0b84c3;
    background-color: #0b84c3;
}

.select-habits{
    border: 5px solid #0b84c3;
    background-color: #0b84c3;
}

.review-container h3{
    background-color: #0b84c3;
}

.cm-top .fa-commenting, 
.cm-top .fa-mobile{
    color: #0b84c3;
}

.contact-block{
    background-color: #00a78e;
}

.benefits-block{
    background-color: #00a78e;
}

.select-button{
    background: #0b84c3
}

.cm-section{
    background-color: #0b84c3;
}

.faq-popular-container h3{
    background-color: #0b84c3;
}
.profile-section {
    background-color: #0a5796;
}
.profile-section > a.active {
    background-color: #3381c1;
}
.contact-block {
    background-color: #0a5796;
}

/*************** NYC Dashboard Styles *************************/
strong{
    font-weight: 600;
}
.top-blocks p{
    line-height: 24px;
}
.block-icon .fa-credit-card-alt{
    font-size: 26px;
    padding-top: 3px;
}
.italic{
    font-style: italic;
}

/*************** NYC Commuter Account & Responsive Tables *************************/
.ca-table {
    width: 100%;
    font-size: 16px;
    border-top: 1px solid #cccccc;
}
.ca-current .type-col1 {
    width: 152px;
}
.ca-table thead {
     position: absolute;
     clip: rect(1px 1px 1px 1px);
     /* IE6, IE7 */
     clip: rect(1px, 1px, 1px, 1px);
     padding: 0;
     border: 0;
     height: 1px;
     width: 1px;
     overflow: hidden;
}
.ca-table thead th {
     font-weight: 500;
}
.ca-tablee thead th:first-of-type {
     text-align: left;
}
.ca-table tbody,
.ca-table tr,
.ca-table th,
.ca-table td {
     display: block;
     padding: 0;
     text-align: left;
     white-space: normal;
}
.ca-table tbody{
       border-bottom: 1px solid #cccccc
}
   
.ca-table th,
.ca-table td {
     padding: 10px 20px 10px 0px;
     vertical-align: top;
     position: relative;
     padding-left: 50%;
}
.ca-table tbody tr:last-of-type {
     margin-bottom: 0;
}
.ca-table tbody td[data-title]:before {
     content: attr(data-title);
     font-weight: 400;
     width: 135px;
     position: absolute;
     width: 45%;
     white-space: nowrap;
     top: 6px;
     left: 0px;
}
.cm-export{
    padding: 0px;
}
@media (min-width: 960px) {
     .ca-table thead {
       position: relative;
       clip: auto;
       height: auto;
       width: auto;
       overflow: auto;
    }
.ca-table tr {
       display: table-row;
    }
.ca-table th,
.ca-table td {
       display: table-cell;
    }
.ca-table tbody {
       display: table-row-group;
    }
.ca-table tbody tr {
    display: table-row;
    border-width: 1px;
    }
.ca-table tbody td[data-title]:before {
    content: none;
    }
.ca-table th{
    padding: 15px 10px 0px 0px;
    vertical-align: top;
    }
.ca-table td {
    padding: 10px 35px 10px 0px;
    vertical-align: top;
    }
.ca-table thead:nth-of-type(even){
    border-top: 20px solid transparent;
    }
}
@media (min-width: 992px) {
 .ca-table th, .ca-table td{
   vertical-align: top;
 }

}
@media (max-width: 480px){
   .ca-table tbody{
   padding-bottom: 15px;
   }
   .cm-export {
    text-align: center;
    }
    .main-right-col {
    margin-top: 20px;
    }
    .funds-transfer .transfer-amount{
    width: 100%
    }
    .funds-transfer select{
    width: 100%
    }
    .funds-transfer .popup .popup-inner {
    left: 50%;
    }
}
@media only screen and (max-width: 768px){

.ca-table td:last-of-type

{ width:100%; margin-left:-50%; }
 
}
/*Funds Transfer*/

.funds-transfer form{
    text-align: left;
}
.transfer-fee{
    margin: 7px 0px 14px 0px;
}
.transfer-fee input{
    margin-top: 10px;
}
.funds-transfer .popup .popup-container p {
    margin-bottom: 0px;
}
.funds-transfer .popup .popup-inner{
    top: 35%;
    left: 60%;
}
.transfer-table th, .transfer-table td{
    border: 1px solid #000000;
    padding: 10px;
}
.transfer-table th{
    background-color: #e3f2fe;
    font-weight: bold;
}
.accept-text{
    line-height: 20px;
    font-size: 14px;
}
.transfer-details{
    margin-top: 40px;
    text-align: left;
}
.transfer-details table th{
    font-weight: bold;
}
.transfer-details p{
    margin: 20px 0px;
}
.transfer-details table th:first-of-type{
    padding-right: 25px;
}

/********* Login Page ********/
.main-content-login {
    padding: 40px 40px 130px 40px;
    background-color: #1771b7;
    width: 100%;
    background-image: none;
    margin-left: 0px;
}
.sign-up {
    background-color: #efefef;
    text-align: center;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    padding: 15px 0px;
}
.login-container a{
    text-decoration: none;
}
.login-button {
    display: block;
    /* width: 100%; */
    background: #1771b7;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    text-align: center;
    font-weight: 300;
    margin-top: 25px;
    margin-bottom: 13px;
    padding: 10px;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.login-button:hover{
    background-color: #333333;
}

/******** Other Styles *********/

.important{
    font-size: 14px;
    margin-top: 5px;
    line-height: 18px;
}

/****** Transit Card Replacement *****/

#pickuptext {
    margin: 3px 0px 20px 0px;
}

#pickuptext input{
    padding: 3px;
}
.pickup-date{
    margin-bottom: 20px;
}

/****** Updates to font Awesome in Header *****/
.menu-nav-right ul .my-account, .menu-nav-right ul .my-notifications{
    width: 30px;
    height: 30px;
    border-radius: 100px;
    border: 1px solid #aaaaaa;
/*    text-align: center;
*/    padding: 5px;
}
.menu-nav-right ul li a img{
    width: 100%;
}
/************ How to Guides ************/

.guides-wrapper{
    width: 100%;
    margin: 20px auto 50px auto;
}
.guides-header{
    text-align: center;
    padding: 60px 120px;
}
.guides-header h1{
    font-weight: 300;
    font-size: 40px;
    letter-spacing: 1px;
    width: 70%;
    margin: 0 auto;
    line-height: 60px;
}
.guides-row{
    text-align: left;
    font-weight: 300;
    margin-bottom: 30px;
}
.guides-row:first-of-type {
    margin-top: 0px;
}

.guides-row h3{
    margin-bottom: 20px;
}
.guides-col {
    float: left;
    width: 20%;
    margin-right: 33px;
}
.guides-col:last-of-type {
    margin-right: 0px;
}
.guides-col p{
    width: 90%;
}
.guides-col a{
    color: #0a5796;
    text-decoration: none;
}
.guides-row img {
    border: 1px solid #444;
    width: 100%;
}
.guides-section{
    margin-bottom: 50px;
}


@media only screen and (max-width: 480px){
    .guides-col {
        float: none;
        width: 100%;
        text-align: center;
        margin-bottom: 25px;
    }
    .guides-row img {
        width: 80%;
    }
    .guides-row h4 {
        text-align: center;
    }
}
/*********** Card Activation Pages ***********/
.activate-text h1 {
    color: #1771b7;
}
.activate .tooltip {
    color: #1771b7;
    margin-left: 0px;
}

.activate-wrapper {
    width: 80%;
    margin: 0px auto;
    padding: 40px 0px;
}

.activate-wrapper .login-container {
    margin: 20px auto 0px auto;
    width: 50%;
}

.activate-text {
    width: 55%;
    display: inline-block;
    vertical-align: top;
    margin-right: 80px;
}

@media only screen and (max-width: 550px){
    .activate-text {
    top: 240px;
    }
}
.header-left-col img {
    width: 72%;
    margin: 2% 0 0% 5%;
    !image-2020-02-03-17-07-12-147.png!
}