a.detail_cmd { 
        float:left;
        background:url("/Images/Icons/sprites3.png") top left no-repeat; 
        width:32px; 
        height:30px; 
        background-position:-7px -529px; 
        margin: 0 4px;
        display: block; 
    }
            
    a.detail_cmd:hover { 
               
        background-position:-7px -49px; 
    }
            
.detail_disabled { 
    float:left;
    background:url("/Images/Icons/sprites3.png") top left no-repeat; 
    width:32px; 
    height:30px; 
    background-position:-7px -1167px; 
    margin: 0 4px;
    display: block; 
}
.stment_view_cmd { 
    float:left;
    background:url("/Images/Icons/sprites3.png") top left no-repeat; 
    width:22px; 
    height:30px; 
    background-position:-10px -410px; 
    margin: 0 4px;
    display: block; 
}
a.stment_view_cmd:hover { 
    width:22px; 
    height:30px; 
    background-position:-10px -210px; 
}
.stment_view_disabled  { 
    float:left;
    background:url("/Images/Icons/sprites3.png") top left no-repeat; 
    width:32px; 
    height:30px; 
    background-position:-10px -1056px; 
    margin: 0 2px;
    display: block; 
}
#searchclear_apamount{
    position: absolute;
    right: 15.5em;
    top:2.5em;
    bottom: 0;
    /*height: 14px;*/
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

div {
    font-family: 'Palatino Linotype','Book Antiqua', Palatino, serif;
}

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

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

#settings .form-control {
    margin-top: 14px;
}

#settings h4 {
    margin: 30px 0 0 0;
}


#settings .control-label {
    margin-top: 20px;
    text-align: right;
}

#settings .billpreftxt {
    padding-top: 20px; 
    font-size: 90%;
}

#settings .prefchk {
    margin-top: 20px;
    padding-left: 0;
}

.cntrlbtns {
    padding: 32px;
}

/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
    background-color: #fee;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

#herologo {
    /*background: #fff;*/
    background: transparent
}

#MultiAuthentication table th, #MultiAuthentication table td {
    border-top: none;
}

body {
    background-color: #f5f5f5;
}

.navbar-inverse .navbar-nav > li > a {
    color: #fff;
}

    .navbar-inverse .navbar-nav > li > a:hover {
        color: #ccc;
    }

    .secnavlinks {
        width: 128px;
    }

    #logofflnk span.glyphicon-log-out {
        width: 10px;
    }

input::-ms-clear {
  display: none;
}

@media print {
   
     #showtitle-title,
     footer,
     #footerL,
     .noprint {
        display: none;
    }

    /* do not use background images in printable files -- many browsers will not print CSS background images */
    #receiptLogo {
          width: 200px; height: 64px; 
         /*background: url(../WebDocuments/PPA01/logo.jpg) 0 0  no-repeat !important; width: 200px; height: 64px;  display: block !important; background-size: 100% !important;*/
    }

   

    #logoarea {
        display: inline;
    }

    .billlabel,
    .billtext {
        float: left;
    }

    .billlabel {
        margin-left: 20px;
        font-weight: bold;
        width: 100px;
        text-align: right;
        margin-right: 12px;
    }

       .billlabel {
            clear: left;
       }

    #payinfo-print,
    #billinfo-print {
        border: 1px solid #999;
        padding: 0 12px;
        height: 200px;
        font-family: 'Times New Roman', serif;
    }



    #billinfo-print > h3,
    #payinfo-print > h3 {
        background: #555 !important;
        color: white !important;
        padding: 4px;
    }

    #billinfo-print > div {
          font-family: 'Times New Roman', serif;
    } 
    
}

@media screen {
    #billinfo-print,
    #receiptLogo,
    #logoarea {
        display: none;
    }
}

#nextstepbtn > button {
    color: #fff;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 16px;
    padding: 8px 30px 8px 30px;
}

.steptree .btn:hover,
.steptree .btn:active,
#pay-container > div > a > span:hover,
#pay-container > div > a > span:active,
#pay-container > div > a:hover,
#pay-container > div > a:active {
    background-color: secondaryGradient;
    color: #000000;
}

.reqElement {
    color: #ff0000;
}

.asterisk {
    color: red;
    float: right;
}
/*Needed to keep label in alignment when there are no asterisks marking require fields*/
.sansasterisk {
    visibility: hidden;
    float: right;
}

.required {
    float: right;
    width: 70px;
    margin-right: 3px;
}
/* Hover-focus state, but only for links*/
/* a {
        &.label:hover, 
        &.label:focus, 
        &.badge:hover, 
        &.badge:focus {
            color: @white;
            text-decoration: none;
            cursor: pointer;
    }

} */

/*#Step2_CreditCardExpirationMonth {
    padding: 6px 12px;
    width:100%;
    border: 1px solid rgb(204, 204, 204)  ;
    border-radius: 3px;
}*/

#spritelist {
    position: relative;
    margin-left: -40px;
}

    #spritelist li {
        margin: 0 14px 8px 0;
        padding: 0;
        list-style: none;
        top: 0;
    }

    #spritelist li,
    #spritelist a {
        height: 32px;
        display: block;
        float: left;
    }

        #spritelist a:hover {
            height: 38PX;
            width: 56px;
            margin-right: 6px;
        }

.crdvisa a {
    float: left;
    background: transparent url('../Images/credit_cards_sprite.png') 0 0 no-repeat;
    width: 54px;
    margin-right: 8px;
    display: block;
}

    .crdvisa a:hover,
    .crdmc a:hover,
    .crddiscover a:hover,
    .crdamexpress a:hover {
        border: 1px solid #666;
        height: 38px;
    }

.crdmc a {
    float: left;
    background: transparent url('/Images/credit_cards_sprite.png') -61px 0 no-repeat;
    width: 54px;
    margin-right: 8px;
    display: block;
}

.crddiscover a {
    float: left;
    background: transparent url('/Images/credit_cards_sprite.png') -121px 0 no-repeat;
    width: 54px;
    margin-right: 8px;
    display: block;
}

.crdamexpress a {
    float: left;
    background: transparent url('/Images/credit_cards_sprite.png') -182px 0 no-repeat;
    width: 54px;
    margin-right: 8px;
    display: block;
}

.cd {
    margin-left: 9px;
    height: 44px;
}

.minorrowhead {
    background-color: #e5e5e5;
    margin-top: 4px;
}

.featurebox {
    border: 1px solid #c5c5c5;
    border-left: 0;
    background-color: #fff;
    min-height: 275px;
}

.featurebox h5 {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 100;
    line-height: 25px;
    padding: 3px 35px 12px 35px;
}

#fboxes .featurebox:first-child {
    border-left: 1px solid #ccc;
}

#secondary-navbar,
#fboxes {
    box-shadow: 0 5px 12px -2px #c5c5c5;
}

#secondary-navbar {
    margin-top: 0px;
}

#mainbtn {
    clear: both;
}

#menubg {
    margin-top: 28px;
}

#visitPromo {
    display: none;
}

/*rearranges buttons on small screens*/
#btncontainer {
    width: 100%;
    text-align: right;
    padding-bottom: 50px;
}

#cancelbtn {
    margin-top: 55px;
    padding-top: 9px;
}

#nextstepbtn {
    margin-top: -110px;
}

/* moves body container upfor small screens */
#maincontent {
    margin-top: -60px;
}

#stp3pay > h1 {
    margin-top: 26px;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    #welcomeLnk > a,
#payNowLnk > a,
#web > a {
    margin-left: 4px;
}*/

/*#welcomeLnk > span,
#payNowLnk > span,
#web > span {
    float: left;
    margin-top: 16px;
}*/

/* following styles control responsive design */

/*===============================================================*/
/*small iphone retina dispaly 320px width */
/*===============================================================*/

.ttlsteps {
    font-size: 105px;
    text-align: left;
    margin-top: -30px;
    margin-left: 106px;
}

.instructions {
    margin-top: 25px;
    margin-left: 45px;
    font-size: 21px;
    width: 190px;
}

.instructions2 {
    margin-top: -30px;
    margin-left: 82px;
    text-align: center;
    font-size: 21px;
    text-align: left;
    width: 100%;
}

.btnlink {
    margin: 20px 30px;
    text-align: center;
    float: left;
    padding: 10px 8px 12px;
    color: #ffffff;
    font-size: 27px;
    line-height: 25px;
    width: 210px;
    background-color: #222222;
}

.btn-default {
    color: #ffffff;
    background-color: #222222;
}
.btn-default:disabled {
    color: #c5c5c5;    
}

.btn-default:disabled:hover {
    color: #c5c5c5;
    background-color: #222222;
    
      
}

/*#pay-container {
    width: 100%;
}*/

.payButton {
    background: transparent url('/Images/money.png') no-repeat scroll left center;
    padding: 0 5px 0 40px;
}

.btnlink:hover {
    color: #fff;
    text-decoration: none;
}


.majorhead h1 {
    font-size: 18px;
}

#logocontainer {
    margin-left: -15px;
    width: 187px;
}

#AccountNumber,
#StatementDate {
    width: 85%;
    float: left;
    margin-left: 8px;
}

#payNowAcct > label,
#payNowStDate > label {
    margin-right: 12px;
}

.reqElement {
    float: left;
}

#txtenterinfo {
    text-align: left;
    margin-bottom: 9px;
}

#nextstepbtn > button {
    font-size: 16px;
    width: 98%;
}


/*#Cancel {
    margin-bottom: 12px;
}*/

/* styles to size steps items on smaller screens */

.stepcode {
    font-size: 20px;
    font-weight: 400;
}

.stepitem {
    font-size: 30px;
}

.stepdescription {
    font-size: 14px;
    font-weight: 400;
}

#stp3pay h1 {
    margin-top: -12px;
    font-size: 22px;
}

#stp3pay h3 {
    margin-top: -6px;
    font-size: 16px;
}


#specnote {
    margin-top: 9px;
    margin-bottom: 12px;
}

#stp2billing {
    text-align: left;
}

.recieptnote {
    font-size: 18px;
}

#logocontainer {
    width: 187px;
}

.tertiaryGradient {
    padding: 7px 0;
}

.smallTxt {
    font-size: 10px;
}

@media only screen and (min-width : 320px) {

    #stp3pay > h1 {
        margin-top: 22px;
    }


    #secnav li span,
    #secnav > li.responsiveLink {
        float: left;
        margin-left: 24px;
        margin-top: 11px;
    }

    #secnav > li.responsiveLink {
        margin-top: 0px;
        width: 80%;
    }

    #secnav {
        margin-top: 24px;
          height: 50px
    }

    #logoutForm > a  {
        margin-left: -20px;
      
    }



    #secnav li a,
    #web > a {
        margin-left: 30px;
        
    }

        #secnav li:hover,
        #secnav li a:hover,
        #secnav > li.responsiveLink:hover,
        #secnav > li.responsiveLink > a:hover {
            color: #FFFFFF;
            opacity: 0.9;
        }

    #secnav > li.responsiveLink {
        width: 120%;
        padding-left: 40px;
        margin-left: -15px;
    }

    #logoutForm {
        ;
    }


    #footerR {
        text-align: right;
    }
}

@media only screen and (min-width : 360px) {
    .reqElement {
        /*margin-top: -42px;
        margin-left: 4px;*/
        float: left;
        margin-top: 6px;
    }

    #AccountNumber,
    #StatementDate {
        width: 90%;
        float: left;
        margin-left: 8px;
    }

    #payNowAcct > label,
    #payNowStDate > label {
        margin-left: 12px;
        float: right;
        text-align: right;
    }

    #nextstepbtn > button {
        font-size: 24px;
        width: 330px;
    }

    a.button:hover {
        font-size: 24px;
        width: 330px;
        color:#000000;
    }

    /*#Cancel {
        margin-bottom: 12px;
    }*/

    #cancelbtn {
        margin-top: 70px;
    }


    .required {
        float: right;
        width: 80px;
        margin-right: 3PX;
    }
}


/* ===============================================================*/
/* small devices, phones 480px width */
/* ===============================================================*/

@media only screen and (min-width : 488px) {



    /*.navbar-collapse.in {
        overflow-y: visible;
    }*/


    #footerR {
        text-align: right;
    }

    .majorhead h1 {
        font-size: 22px;
    }



    #txtenterinfo {
        text-align: left;
    }

    .required {
        float: right;
        width: 200px;
        margin-right: 3PX;
    }

    .asterisk {
        margin-top: 9px;
    }
}




/*===============================================================*/
/*small tablets, kindle fire 540px width */
/*===============================================================*/
@media only screen and (min-width : 540px) {

    .btnlink {
        margin-top: -96px;
        margin-left: 172px;
        float: left;
        padding: 10px;
        color: #ffffff;
        font-size: 27px;
        line-height: 25px;
        width: 180px;
    }

    .responsiveLink {
        display: none;
    }





    #logocontainer {
        width: 187px;
    }


    .navbar-collapse.in {
        overflow-y: visible;
    }

    #mainbtn {
        clear: none;
    }

    #cancelbtn {
        margin-top: 0;
    }

    #nextstepbtn {
        margin-top: 0;
    }
}



/*===============================================================*/
/*small devices, tablets 768px width */
/*===============================================================*/
@media only screen and (min-width : 768px) {

    .ttlsteps {
        margin: 0 0 0 -18px;
        font-size: 175px;
        line-height: 250px;
        float: left;
    }

    .instructions {
        margin-top: 112px;
        float: left;
    }

    .instructions2 {
        margin: 112px 0 0 -6px;
        float: left;
        width: 102px;
    }

    .btnlink {
        margin-top: -102px;
        margin-left: 303px;
        float: left;
        padding: 10px;
        color: #ffffff;
        font-size: 27px;
        line-height: 25px;
        width: 180px;
    }

    #logocontainer {
        width: 340px;
    }

    /* moves body container down for larger screens */
    #maincontent {
        margin-top: 0;
    }

    #menubg {
        margin-top: 0;
    }

    #secondary-navbar {
        margin-top: 51px;
    }

    .responsiveLink {
        display: none !important;
    }

    #visitPromo {
        display: block;
    }

    .minorrowhead {
        background-color: transparent;
        margin-top: 0;
    }

    .majorhead h1 {
        font-size: 26px;
    }

    #secnav {
        margin-left: 200px;
    }


    #secnav {
        margin-top: 0px;
    }

    #secnav li span,
    #web > span {
        float: left;
        margin-top: 15px;
    }

 #logoutForm > span {
         margin-top: 0px !important ;

    }
    

    /*#secnav li a,
    #web > a {
        margin-left: -8px;
        float: left;
    }*/
    
    #logoutForm {
        height: 34px;
        margin-top: 16px;
    }

    .smallTxt {
        font-size: 22px;
    }

    /* styles to size steps items on larger screens */

    .stepcode {
        font-size: 50px;
        font-weight: 400;
    }

    .stepitem {
        font-size: 80px;
    }

    .stepdescription {
        font-size: 22px;
        font-weight: 400;
    }

    #stp3pay h1 {
        font-size: 36px;
        margin-top: 0;
    }

    #stp3pay h3 {
        font-size: 24px;
        margin-top: 0;
    }

    #specnote {
        margin-bottom: 9px;
        margin-top: 0;
    }

    #stp2billing {
        text-align: right;
    }

    .recieptnote {
        font-size: 30px;
    }

    #cancelbtn {
        margin-top: 0;
    }

    #nextstepbtn {
        margin-top: 0;
    }

    #stp3pay > h1 {
        margin-top: 16px;
    }
}


/*===============================================================*/
/*medium devices, desktops 982px width */
/*===============================================================*/
@media only screen and (min-width : 992px) {

    #logocontainer {
        margin-left: 0;
    }

    .btnlink {
        margin-top: 150px;
        margin-left: -86px;
        float: left;
        padding: 10px;
        color: #ffffff;
        font-size: 27px;
        line-height: 25px;
        width: 180px;
    }

    .btn-default {
        color: #ffffff;
    }

    a.button:hover {
        font-size: 24px;
        width: 330px;
        color:#000000;  
    }

    

    .secnav {
        margin-left: 400px;
    }

    .majorhead h1 {
        font-size: 36px;
    }

    .responsiveLink {
        display: none;
    }


    #logocontainer {
        width: 340px;
    }

    #btncontainer {
        margin-top: 140px;
        width: 100%;
        text-align: left;
        padding-bottom: 50px;
        padding-right: 60px;
    }

    #cancelbtn {
        margin-top: 0;
    }

    #nextstepbtn {
        margin-top: 0;
    }
}

@media screen and (min-width: 1050px) {
    .ttlsteps {
        font-size: 175px;
    }

    #secnav {
        margin-left: 384px;
    }
}

@media screen and (min-width: 1279px) {
    .ttlsteps {
        font-size: 175px;
    }

    #secnav {
        margin-left: 370px;
    }

    #btncontainer {
        margin-top: 140px;
        width: 100%;
        text-align: left;
        padding-bottom: 50px;
        padding-right: 60px;
    }
}

@media screen and (min-width: 1600px) {
}


@media screen and (min-width: 1700px) {

    #secnav {
        margin-left: 350px;
    }
}

/* set a max-width for horizontal fluid layout and make it centered */
.container,
.container-fluid,
.body-container {
    margin-right: auto;
    margin-left: auto;
    max-width: 930px; /* or 950px */
}

footer.row {
    max-width: 960px;
    /*background-color: #000000;*/
}

/* temporarily hard code footer text to white */

#footerL h4,
#footerL > a,
#footerR h4,
#footerR > a,
.ui-accordion .ui-accordion-header,
footer {
    color: #ffffff;
}

    #footerL > a:hover {
        text-decoration: none;
       
    }

    #footerR > a:hover {
        text-decoration: none;
       
    }

footer.contactAndInfoContainer {
    background-color: #222222;
}
.loader-temp {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid skyblue;
 border-bottom: 8px solid skyblue;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

* {
  box-sizing: border-box;
}
/*form {
  width: 300px;
  margin: 0 auto;
}*/
.form-field {
  width: 100%;
  height: 40px;
  position: relative;
  background: white;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: 0 0 3px 0px rgba(0, 0, 0, .3);
  padding: 0 10px;
}
iframe {
  width: 100%;
  height: 100%;
}
.form-field-group {
  display: flex;
  flex-flow: wrap;
}
.form-field-group div {
  flex: 0 0 50%;
}
.form-field-group div:first-child {
  border-radius: 4px 0 0 4px;
}
.form-field-group div:last-child {
  border-radius: 0 4px 4px 0;
}
.form-button {
  border: 1px solid #1f8ab0;
  background-color: #3b495c;
  border-color: #3b495c;
  color: #ced5e0;
  font-family: inherit;
  border-radius: 4px;
  font-size: 16px;
  height: 35px;
  width: 100%;
}