/*****************************************************
*   Global Settings
*****************************************************/
html {
    font-size: 100.01%;
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
}
/*div { position:sticky;}*/

/********** Backward compatibility for one-off pages (i.e. Privacy and Refund Policy) **********/
#form1 {
    height: 100%;
}

    #form1 div {
        position: static;
    }

/* IE Doesn't play well with disabled textboxes and forces a gray color; setting the readonly attribute to false 
	mimicks the uneditable function of the textbox without the enforced gray color. This however has a downside
	since the browser still submits readonly textboxes vs disabled where the form fully ignores the control.  */
/*input[type="text"][readonly],
input[type="tel"][readonly],
input[type="number"][readonly],
input[type="email"][readonly]{border:0px none;width:100%;height:auto;padding:0px;font-size:inherit;}*/

/* hides the spin-button */
input[type=number] {
    -moz-appearance: textfield;
}

    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/*****************************************************
*   Color Schemes 
*****************************************************/

/********** Background Color **********/
body {
    background-color: #f2f4fa;
}

#aspnetForm, .rows_odd, .popup, .progressOff, .progressNext, .magnifiedImage {
    background-color: #FFFFFF;
}
/*div,tableForm,input[type="text"][readonly],input[type="email"][readonly],input[type="number"][readonly],input[type="tel"][readonly] {background-color:transparent;}*/
.button_main[disabled], .button_secondary[disabled], .button_tertiary[disabled] {
    background-color: #CCCCCC;
}

.rows_even {
    background-color: #e5e8f5;
}

.PagerStyle {
    background-color: #e0ddd5;
}

.button_main, .progressOn {
    background-color: #003366;
}

.button_secondary, .collapsePanelHeader {
    background-color: #336699;
}

.button_tertiary {
    background-color: #666666;
}

.menu a[disabled], .menu a[disabled] li, .menu a[disabled]:hover li {
    background-color: #e8f2fc;
}

.message, .confirmation, .info, .warning {
    background-color: #FFFFCC;
}

.modalBackground {
    background-color: Gray;
}

.UpdateProgressBackground {
    background-color: #EEEEEE;
}

/********** Border Color **********/
/*input[type="text"][readonly],input[type="email"][readonly],input[type="number"][readonly],input[type="tel"][readonly] {border-color:transparent;}*/
.tableForm, .popup, .TermsAndConditionsControl .divTermsAndConditions, .TermsAndConditionsControl .divTermsAndConditionsFrame {
    border-color: #CCCCCC;
}

.highlightBorder {
    border-color: #FF0000;
}

.button_main, .button_secondary, .button_tertiary, .button_optional {
    border-color: #515151;
}

.mainPage, .menu ul, .CellSeparator, .header, .info, .warning {
    border-color: #336699;
}

.magnifiedImage, .popup, .progressNext {
    border-top-color: #336699;
}

.center, .right {
    border-color: #b2bbe3;
}

.message {
    border-color: #990000;
}

.info, .warning {
    border-top-color: #336699;
}

.confirmation {
    border-color: #009933;
}

.button_main[disabled], .button_secondary[disabled], .button_tertiary[disabled], .progressOff {
    border-color: #999999;
}

.progressOn {
    border-color: #003366;
}

/********** Text Color **********/
h1, h4, .navigation, .menu a, .menu a:hover, .menu a:visited, .menu a[disabled], .menu a[disabled] li {
    color: #003366;
}

h3 {
    color: #1A1A1A;
}

h2, a:link, .headerLink a:visited, .headerLink a:hover, .menu a:hover, .progressNext {
    color: #336699;
}

a:visited {
    color: #660099;
}

th a:hover, a:hover {
    color: #6699FF;
}

body, p, table, .textLink a:link, .textLink a:visited, .textLink a:hover, .labels, .message li, .confirmation li, .info li, .popup {
    color: #333333;
}

.highlight {
    color: #FF0000;
}
/*a:link, a:visited,.button_main, .button_secondary, .button_tertiary, .button_optional,.progressOn,.collapsePanelHeader {color: #FFFFFF;}*/
.message .boldTxt, .confirmation .boldTxt, .info .boldTxt, .message .icon, .info li {
    color: #000000;
}

.button_main[disabled], .button_secondary[disabled], .button_tertiary[disabled], .popup p {
    color: #666666;
}

.progressOff {
    color: #999999;
}

/*****************************************************
*   Text Schemes
*****************************************************/
/********** Global Font Sizes **********/
body.view-lg, .headerLink, .headerLogout {
    font-size: 0.8em;
}

.header {
    font-size: 1.25em;
}

/********** Links **********/
a:link, a:visited, a:hover {
    text-decoration: none;
    padding: 0;
    border: none;
    margin: 0;
}

a:hover {
    text-decoration: underline;
}

.NavigationLink:link {
    padding-left: 10px;
    padding-right: 10px;
}

.textLink a {
    outline: none;
}

    .textLink a:link, .textLink a:visited, .textLink a:hover {
        text-decoration: none;
        margin: 0;
        cursor: default;
    }

/********** Paragraph **********/
p {
    padding: 0 0 5px 2px;
    margin: 0;
    line-height: 1.3em;
}

/********** Headings **********/
h1, h2, h3, h4 {
    text-transform: none;
    text-align: left;
    font-weight: bold;
    margin: 0px;
    border: none;
    padding: 5px 0 3px 2px;
}

h1 {
    padding: 20px 0 5px 4px;
    font-size: 1.1em;
}

.mainPage h1 {
    font-size: 1.375em;
}

h2 {
    font-size: 1.25em;
}

h3 {
    font-size: 0.9em;
}

.mainPage h3 {
    font-size: 1.125em;
}

h4 {
    font-size: 1em;
    font-weight: normal;
}

/********** Display Items Highlight  **********/
#DisplayItems .DisplayItem14, #DisplayItems .DisplayItem14 input[readonly], /* Scheduled Date */
#DisplayItems .DisplayItem8, #DisplayItems .DisplayItem8 input[readonly] /* Total Amount */ {
    font-weight: bold;
}

#DisplayItems .valueColumn {
    white-space: nowrap;
}

#DisplayItems .detailsColumn {
    width: 45%;
}

/********** Custom Text Classes  **********/
.boldTxt {
    font-weight: bold;
}

.wrap, .wrap a:link {
    text-wrap: normal;
    white-space: pre-wrap;
}

.center, .right {
    padding-right: 3px;
    margin: 0;
    border-right-width: 1px;
    border-right-style: solid;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.required {
    font-size: 1.2em;
    font-weight: bold;
    color: #990000;
    text-align: center;
}

.highlightBorder {
    border-width: 2px;
    border-style: solid;
    padding: 2px;
}

/*****************************************************
*   Tables and Grids
*****************************************************/

/* backward compatibility; this should be removed later on once clean up is done */
.column5percent {
    width: 5%;
}

.column7percent {
    width: 7%;
}

.column10percent {
    width: 10%;
}

.column12percent {
    width: 12%;
}

.column15percent {
    width: 15%;
}

.column16percent {
    width: 16%;
}

.column20percent {
    width: 20%;
}

.column25percent {
    width: 25%;
}

.column30percent {
    width: 30%;
}

.column35percent {
    width: 35%;
}

.column40percent {
    width: 40%;
}

.column45percent {
    width: 45%;
}

.column50percent {
    width: 50%;
}

.column55percent {
    width: 55%;
}

.column60percent {
    width: 60%;
}

.column65percent {
    width: 65%;
}

.column70percent {
    width: 70%;
}

.column75percent {
    width: 75%;
}

.column80percent {
    width: 80%;
}

.column85percent {
    width: 85%;
}

.column90percent {
    width: 90%;
}

.column95percent {
    width: 95%;
}

.column100percent {
    width: 100%;
}

/*table {margin:0px;padding:0px;}*/
/*th {font-weight: bold;text-align: left;margin: 0px;padding:2px 3px;}
th .center {text-align: center;}
td {padding: 2px;}*/

.tableForm, .tableForm th {
    vertical-align: middle;
}

.tableForm {
    border-width: 1px;
    border-style: solid;
    width: 98%;
    margin: 0px 0px 5px 0px;
    padding: 3px 5px;
}

    .tableForm tr {
        padding: 0px 3px;
    }

    .tableForm td {
        padding: 5px 0px 5px 3px;
        border: none;
    }

    .tableForm .labels {
        padding-left: 5px;
    }

    .tableForm .subLabels {
        font-size: 0.9em;
        font-weight: normal;
    }

    .tableForm .verticalAlign {
        vertical-align: text-top;
    }

    .tableForm .creditcards {
        vertical-align: middle;
        padding: 3px;
    }

    .tableForm .tableWidth {
        width: 98%;
        margin: 0px;
    }

        .tableForm .tableWidth td {
            padding-top: 3px;
            padding-bottom: 3px;
        }

    .tableForm .tableMax, .tableMax {
        width: 100%;
        margin: 0px;
        padding: 0px;
        border: none;
    }

/*.parentTable td {font-size:1em;margin:0px;padding:0px;}
.parentTable .tableWidth td {font-size:0.8em;}*/

.tableWidth {
    width: 98%;
}

.rows_even, .rows_odd {
    margin: 0;
    padding-top: 2px 0px 2px 2px;
}

.PagerStyle td {
    text-align: center;
}

.paging table {
    margin: 0px;
    padding: 0px;
}

.paging td {
    padding: 2px 3px 1px;
}

    .paging td a:visited, .paging td a:hover {
        text-decoration: underline;
    }

.PagerStyle td a:link, .PagerStyle td a:hover, .PagerStyle td a[disabled=disabled] {
    padding-left: 2px;
    padding-right: 2px;
}

.ActionHeader, .ActionColumn, .ViewColumn, .RadioButtonColumn, .EditColumn, .DeleteColumn, .MakePaymentColumn, .APSColumn {
    text-align: center;
}

.CellSeparator {
    border-left-width: 1px;
    border-left-style: solid;
}

.headerRow, .headerRow td, .tableForm tr.headerRow, .tableWidth tr.headerRow td {
    height: 0px;
    margin: 0px;
    padding: 0px;
}

.divSection {
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 2px 0px;
}

.divCell {
    display: inline-block;
    padding: 3px 0px;
    vertical-align: middle;
    *float: left;
}

.divLineBreak {
    height: 1em;
}

div.divSection.option .description {
    width: 90%;
}

.labelColumn, .validatorColumn, .valueColumn, .commentsColumn, .separatorColumn {
    vertical-align: middle;
}

.ScheduledDateRow .labelColumn {
    vertical-align: top;
}

.labelColumn {
    width: 25%;
}

.validatorColumn {
    width: 25px;
}

.separatorColumn {
    width: 1%;
}

.valueColumn {
    width: auto;
}

.commentsColumn {
    width: auto;
}

.detailsColumn {
    width: 70%;
}

.buttonsColumn {
    width: 28%;
}

.col-left, .col-right {
    width: 50%;
    *width: 49%;
    height: 100%;
    float: left;
}

.col-right {
    float: right;
}

/** Hides rows that are not editable **/
.RowDisabled, .RowDisabled .required, .RowDisabled input[type="text"], .RowDisabled input[type="email"], .RowDisabled input[type="tel"], .RowDisabled input[type="number"] {
    display: none;
}
/** Always display the Payment Row even if not editable **/
.PaymentRow {
}

.GridView .GridRow {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.GridView .GridCell {
    display: block;
    float: left;
    padding: 0px 2px 0px 0px;
    word-wrap: break-word;
}

.GridView .ActionColumn {
    float: right;
    display: table-column-group;
}

    .GridView .ActionColumn .GridCell {
        float: right;
        padding-right: 5px;
    }

        .GridView .ActionColumn .GridCell a[disabled] {
            visibility: hidden;
        }

.GridView th .GridCell a:link {
    white-space: pre-wrap;
    *white-space: normal;
}

.GridView th .GridCell img.Sort {
    vertical-align: middle;
}

/* Hide the ExtendedGridView Sorting Arrows */
.GridView th img:not(.Sort) {
    display: none;
}

.GridView th img {
    *display: none;
}

    .GridView th img.Sort {
        *display: inline-block;
    }

/*****************************************************
*   Images
*****************************************************/
img {
    border: none;
    margin: 0;
    padding: 0;
}

.icon {
    vertical-align: middle;
}

.message .icon, .confirmation .icon, .info .icon, .warning .icon {
    width: 22px;
    height: 22px;
}

.ArrowUpImage {
    width: 11px;
    height: 13px;
}

.ArrowDownImage {
    width: 11px;
    height: 14px;
}

.ArrowNeutralImage {
    width: 12px;
    height: 13px;
}

.EditImage {
    width: 3px;
    height: 18px;
}

.DeleteImage {
    height: 18px;
    width: 14px;
}

.ViewImage {
    height: 14px;
    width: 14px;
}

.eBillAlertImage {
    height: 14px;
    width: 14px;
}

.AMX {
    width: 39px;
    height: 25px;
}

.VIS, .VID {
    width: 46px;
    height: 25px;
}

.DCV {
    width: 52px;
    height: 25px;
}

.MST, .MSD {
    width: 45px;
    height: 25px;
}

.CHK, .SAV, .EFT {
    width: 69px;
    height: 25px;
}

.MakePaymentImage {
    width: 16px;
    height: 18px;
}

.AutoPayImage {
    width: 16px;
    height: 16px;
}

.iconCentered {
    vertical-align: middle;
    text-align: center;
    padding: 10px 5px;
}

.AutoPayImage, .MakePaymentImage, .EditImage, .DeleteImage, .eBillAlertImage, .MakePaymentImage, .AutoPaymImage, .CloneImage, .WarningImage {
    margin-right: 2px;
    padding-right: 3px;
}

.magnifiedImage {
    position: absolute;
    z-index: 100;
    top: 0px;
    left: 0px;
    border-width: 2px;
    border-style: groove;
}

/*****************************************************
*   Custom Buttons 
*****************************************************/
.buttonPosition, .buttonPositionLeft, .buttonPositionCenter, .buttonPositionBottomCenter {
    width: 100%;
}

.buttonPosition {
    text-align: right;
}

.buttonPositionLeft {
    text-align: left;
}

.buttonPositionCenter, .buttonPositionBottomCenter {
    text-align: center;
}

.buttonPositionBottomCenter {
    position: absolute;
    bottom: 10px;
    left: 0px;
}

.button_main, .button_secondary, .button_tertiary, .button_optional {
    border-width: 1px;
    border-style: solid;
    padding: 4px;
    margin: 4px 2px 4px 0px;
    cursor: pointer;
}

.button_optional {
    display: none;
}

/*****************************************************
*   Print Controls 
*****************************************************/
#PrintFooter, #PrintHeader {
    display: none;
}

.PrintControls img {
    width: 1.1em;
    height: 1.1em;
    margin-right: 5px;
}


/*****************************************************
*   Message Areas 
*****************************************************/
.message, .confirmation, .info, .warning {
    width: 98%;
    margin: 5px 0px;
    border-top-width: 2px;
    border-top-style: solid;
    background-image: url(../../Images/messages.gif);
    background-position: bottom;
    background-repeat: repeat-x;
    padding: 5px;
    outline: none;
    padding-bottom: 15px;
}

    .message ul, .confirmation ul, .info ul, .warning ul {
        display: inline-block;
        width: 80%;
        *float: left;
        *margin-top: 15px;
        *padding-bottom: 15px;
    }

    .message li, .confirmation li, .info li, .warning li {
        line-height: 1.5em;
        text-align: left;
    }

    .message .icon, .confirmation .icon, .info .icon, .warning .icon {
        display: inline-block;
        margin-left: 25px;
        padding: 15px 0px;
        vertical-align: top;
        *float: left;
    }

    .message ul {
        list-style-type: disc;
    }

    .confirmation ul, .info ul, .warning ul {
        list-style-type: none;
    }

    .warning input[type="button"] {
        margin-left: 95px;
    }

.mobileLabel {
    display: none;
}