@import "../variables_Odyssey.less?v=5854";
/*------------------------------------*\
    Server-dependent Mixins
\*------------------------------------*/

//  Uses of the mixin should include a dummy semi-colon
//  if commas are passed into the params
.box-shadow(@declaration: 1px 1px 3px -1px rgba(0, 0, 0, .7);) when (@use-box-shadow = true) {
    -moz-box-shadow: @declaration;
    -webkit-box-shadow: @declaration;
    box-shadow: @declaration;
}

/*------------------------------------*\
    General Settings & HTML Elements
\*------------------------------------*/

html {
    color: @color-default-text;
    background-color: @color-default-bg;
    font-family: @font-family-base;
    font-size: @font-size-base;
    @media @kid-bear {
        font-size: 100%;
    }
}

body {
    color: @color-default-text;
    background-color: @color-default-bg;
}

a {
    color: @color-link;
    text-decoration: underline;
    .transition(all);
    &:hover, &:focus {
        color: @color-link-hover;
        text-decoration: none;
    }
    // Fixed issue with .btn links: should only apply to plain hyperlinks now
    &:visited {
        color: darken(@color-link, 20%); 
    }
}


/*------------------------------------*\
    Headings
\*------------------------------------*/ 

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: @font-heading;
    font-weight: normal;
    line-height: 100%;
    margin: 0 0 .5em 0;
}

h1, .h1 {
    color: @color-heading-1;
    font-size: (2em * .7);
    @media @teen-bear {
        font-size: 2em;
    }
}

h2, .h2 {
    font-size: (1.8em * .7);
    @media @teen-bear {
        font-size: 1.7em;
    }
}

h3, .h3 {
    font-size: (1.5em * .7);
    @media @teen-bear {
        font-size: 1.5em;
    }
}

h4, .h4 {
    color: @color-heading-4;
    font-size: 1.1em;
    @media @teen-bear {
        font-size: 1.2em;
    }
}

h5, .h5 {
    font-size: 1em;
    @media @teen-bear {
        font-size: 1.1em;
    }
}

.page-header {
    border: none;
    margin: .5em;
    padding: 0 .5em .5em .5em .5em;
    > * {
        margin: 0;
    }
    a {
        &:hover {
        text-decoration: none;
        }
    }
    @media @baby-bear {
        padding: 0 1em 1em 1em;
    }
}


/*------------------------------------*\
    Other Type Options
\*------------------------------------*/


.text-muted {
    color: @color-text-muted;
}

.text-highlight {
    color: @color-text-important;
}

.text-lowlight {
    color: @color-text-unimportant;
}

.text-bold {
    font-family: @font-default-bold;
}

.text-normal {
    font-family: @font-default;
    font-weight: normal;
}

.text-danger {
    color: @color-text-danger;
}

.text-good {
    color: @color-text-important;
}

.text-underlined {
    padding-bottom: .25em;
    .clearfix;
    &:after {
        border-bottom: 1px dotted @color-heading-1;
        content: '';
        width: 100%;
    }
}

// Link Variations
.link-muted {
    color: @color-link-muted;
    &:hover {
        color: @color-link-muted-hover;
    }
    &:visited {
        color: @color-link-muted;
    }
}

a > [class*="icon-"] {
    text-decoration: none;
}

[href^="mailto:"] {
    -ms-word-break: break-word;
    word-break: break-word;
}

[href^="tel:"] {
    @media @kid-bear {
        color: @color-default-text;
        cursor: default;
        text-decoration: none;
        &:hover {
            color: @color-default-text;
        }
        &:focus {
            color: @color-default-text;
        }
    }
}

::selection {
    .background-opacity(@color-link, .5);
}

::-moz-selection {
    .background-opacity(@color-link, .5);
}

/****************************************\

Layout

\*****************************************/

/*fix scroll bar*/
.main-container {
    display: inline-table;
}

/*For a sticky footer*/
.shell-wrapper {
    height: 100%;
    width: 100%;
}

/*For a sticky footer*/
.page-wrapper {
    background: @color-default-bg;
    //display: table-row;
    height: auto;
}

.primary-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.main {
    padding: @padding/2;
    @media @kid-bear {
        margin: 0 auto;
        max-width: 1100px;
        padding: @padding;
    }
    @media @mama-bear {
        padding: @padding @padding*2;

    }

}


/****************************************\
    Announcements
\*****************************************/

/* Alerts that span top of website, ex: for holidays, system maintenance, etc. */
.announcement {
    background-color: @color-module-light-bg;
    border: none;
    border-radius: 0;
    padding: @padding/2 @padding*1.5 @padding/2 @padding/2;
    position: relative;
    .clearfix;
    > .announcement-dismiss {
        top: .5em;
    }
    @media @kid-bear {
        text-align: center;
    }
}

// For announcements that slide down over content - in many cases are errors
.announcement-drop {
    background-color: fade(@color-module-light-bg, 90%);
    font-family: @font-default-bold;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1033;
    > .announcement-dismiss:hover {
        color: lighten(@color-default-text, 30%);
        cursor: pointer;
    }
}


/* Dismissal placement usually in top right of alert box */
.announcement-dismiss {
    padding: 0 @padding/4;
    position: absolute;
    right: 0;
    top: 0;
}

/* High priority alert colors */
.announcement-danger {
    background-color: @color-announcement-danger-bg;
    color:  @color-announcement-danger-text;
    a {
        color:  @color-announcement-danger-text;
        &:visited {
            color: @color-announcement-danger-text;
        }
    }
}

.announcement-danger.announcement-drop {
    background-color: fade(@color-announcement-danger-bg, 90%);
    color: @color-announcement-danger-text;
    a {
        color: @color-announcement-danger-text;
        &:visited {
            color: @color-announcement-danger-text;
        }
    }
}




/****************************************\

Header

\*****************************************/

.header {
    background: @color-header-primary-bg; /* Old browsers */
    background: -moz-linear-gradient(left, @color-header-primary-bg 33%, @color-header-secondary-bg 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(33%,@color-header-primary-bg), color-stop(100%,@color-header-secondary-bg)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, @color-header-primary-bg 33%,@color-header-secondary-bg 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, @color-header-primary-bg 33%,@color-header-secondary-bg 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, @color-header-primary-bg 33%,@color-header-secondary-bg 100%); /* IE10+ */
    background: linear-gradient(to right, @color-header-primary-bg 33%,@color-header-secondary-bg 100%); /* W3C */
    filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{color-header-primary-bg}', endColorstr='@{color-header-secondary-bg}',GradientType=1 )"; /* IE6-9 */
    border-bottom: 1px solid @color-header-border;
    color: @color-header-text;
    font-size: .8em;
    min-height: 3em;
    padding: .5em;
    .clearfix;

    a {
        color: @color-header-link;
    }

    @media @teen-bear {
        //min-height: 5em;
        padding: .5em 1em;
    }
}

/* Reins in logo and logout info for larger screens */
.header-main {
    margin: 0 auto;
    max-width: 1200px;
}

.header-branding {
    @media @baby-bear {
        display: inline-block;
    }
}

.header-logo {
    display: block;
    max-height: 3em;
    text-align: center;
    img {
        max-height: 3em;
        max-width: 280px;
    }
    @media @baby-bear {
        float: left;
        max-height: 6em;
        text-align: left;
        img {
            max-height: 4.5em;
            max-width: 350px;
        }
    }
}

.header-name {
    display: block;
    font-size: 1.3em;
    text-align: center;
    @media @baby-bear {
        display: inline-block;
        font-size: 1.7em;
        margin-left: 1em;
        text-align: left;
        margin-top: 1em;
        line-height: 1;    

    }
}

.header-admin {
    margin-top: 1em;
}

/* Centers logo and financial institution name vertically if flexbox is supported */
.flexbox {
    .header-main {
        display: flexbox;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;            
        -ms-align-items: center;
        -webkit-align-items: center;
        align-items: center;
        -ms-flex-pack: justify;
        @media @baby-bear {
            -ms-justify-content: space-between;
            -webkit-justify-content: space-between;
            justify-content: space-between;
        }
    }

    .header-branding {
        @media @baby-bear {
             display: flexbox;
             display: -webkit-box;
             display: -moz-box;
             display: -ms-flexbox;
             display: -webkit-flex;
             display: flex;      
             -ms-flex-align: center;      
            -ms-align-items: center;
            -webkit-align-items: center;
            align-items: center;
        }
    }

    .header-logo {
        -ms-flex-basis: auto;
        -webkit-flex-basis: auto;
        flex-basis: auto;
    }

    .header-name {
        @media @baby-bear {
            margin-top: 0;
        }
    }

    .header-admin {
        display: none;
        @media @teen-bear {
             display: flexbox;
             display: -webkit-box;
             display: -moz-box;
             display: -ms-flexbox;
             display: -webkit-flex;
             display: flex;            
             -ms-flex-direction: column;
            -webkit-flex-direction: column;
            flex-direction: column;
            -ms-flex-pack: center;
            margin-top: 0;
        }
    }
}


/* Where account nickname goes on smaller screens next to the menu button */
.nickname-menu {
    color: @color-nav-link;
    padding: .75em;
    .always-left;
}


/****************************************\

Menu

\*****************************************/


/* Adapted Brad Frost's toggle menu (http://codepen.io/bradfrost/pen/sHvaz) */

.main-nav {
    background-color: @color-nav-bg;
    border-bottom: @nav-border-width solid @nav-border-bottom-color;
    position: relative !important;
    width: 100%;
    z-index: 1031;
    .clearfix;
    @media @nav-breakpoint {
        .main-nav {
            padding: 0 1em;
        }
    }
}

a.menu-toggle {
    color: @color-nav-link;
    display: block;
    float: right;
    padding: .75em .75em .75em 0;
    @media @nav-breakpoint {
        display: none;
    }
}

.menu, .menu > ul ul {
    clear: both;
    max-height: 0;
    overflow: hidden;
    .transition(all);
    @media @nav-breakpoint {
        background: none;
        max-height: none;
        overflow: visible;
    }
}

.menu.active, .menu > ul ul.active {
    max-height: 55em;
}

.menu > ul {
    border-top: 1px solid darken(@color-nav-bg, 10%);
}

.menu li {
    margin: 0;
}

.menu li a {
    background-color: @color-nav-bg;
    border-bottom: 1px solid darken(@color-nav-bg, 10%);
    color: @color-nav-link;
    display: block;
    padding: 0.8em;
    position: relative;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    &:hover {
        color: @color-nav-link-hover;
        text-decoration: underline;
    }
    @media @nav-breakpoint {
        background-color: transparent;
        border: 0;
        font-size: .9em;
    }
}

.menu ul li ul li a {
    background-color: darken(@color-nav-bg, 10%);
}

/* Adds plus sign */
.menu li.has-subnav > a:after {
    content: '+';
    display: block;
    font-size: 1.5em;
    padding: 0.25em 0.5em;
    position: absolute;
    right: 0;
    top: .25em;
    @media @nav-breakpoint {
        content: "";
    }
}

/* Adds minus sign */
.menu li.has-subnav > a.active:after {
    content: "\2013";
    @media @nav-breakpoint {
        content: "";
    }
}

@media @nav-breakpoint {
    .menu {
        max-width: 1200px;
        margin: 0 auto;
        text-align: center;
    }

    .menu ul {
        border: 0;
        margin: 0 0 0 -0.25em;
    }

    .menu > ul ul {
        /*display: none;*/
        left: -9999px;
        position: absolute;
        /*opacity: 0;*/
        top: 2.5em;
        width: 12em;
        -webkit-transition: none;
        transition: none;
    }

    .menu > ul li:hover > div > ul, .menu > ul li:focus > div > ul, .menu > ul li > div.open > ul  {
        /*display: block;*/
        left: 0;/*
        opacity: 1;*/
    }

    .menu li.has-subnav > a:hover {
        text-decoration: none;
    }

    .menu > ul li {
        margin: 0 0.25em;
    }

    .menu > ul > li {
        display: inline-block;
        position: relative;
    }

    .menu > ul ul.active {
        left: 0;
    }
    .menu > ul ul li {
        position: relative;
    }

    .menu > ul ul li:hover {
        z-index: 100;
    }
}

.main-nav a > [class*="icon-"] {
    color: @color-nav-link;
}




/****************************************\

Footer

\*****************************************/

.footer {
    background-color: @color-footer-bg;
    border-top: 1px solid @color-footer-border;
    color: @color-footer-text;
    display: table-row;
    font-size: .8em;
    min-height: 5em;
    padding: .5em;
    .clearfix;
    @media @teen-bear {
        //height: 12em;
    }
    a {
        color: @color-footer-link;
        &:hover, &:visited {
            color: @color-footer-link;
        }
    }
}

.main-footer {
    margin: 0 auto;
    max-width: 1100px;
    padding: 0 @padding*2;
}



/****************************************\

Buttons

\*****************************************/



.btn {
    background-color: @color-button-default-bg;
    background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
    border: 1px solid @btn-border-color;
    border-radius: @btn-border-radius;
    .box-shadow(0 3px 0 0 darken(fade(@color-button-default-bg, 90%), 10%));
    color: @color-button-default-text;
    cursor: pointer;
    display: inline-block;
    margin-bottom: @margin/2;
    padding: @padding/2 @padding;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    vertical-align: top;
    &:hover, &:focus, &:active {
        background-color: darken(@color-button-default-bg, 10%);
        .box-shadow(0 3px 0 0 darken(fade(@color-button-default-bg, 90%), 30%));
        color: @color-button-default-text;
    }
    &.disabled, &[disabled] {
        background-color: @color-button-default-bg;
        .box-shadow(0 3px 0 0 darken(fade(@color-button-default-bg, 90%), 10%));
        color: @color-button-default-text;
    }

}

/* Button Sizes */
.btn-xs {
    font-size: .8em;
    padding: @padding/4;
    .box-shadow(0 1px 0 0 darken(fade(@color-button-default-bg, 90%), 10%));
    &:hover, &:focus, &:active {
        .box-shadow(0 1px 0 0 darken(fade(@color-button-default-bg, 90%), 30%));
    }
}

.btn-sm {
    font-size: .9em;
    padding: round(@padding/5, 1) @padding/2;
}

.btn-lg {
    font-size: 1.1em;
    padding: @padding @padding*1.5;
}

/* Button Variations */
.btn-primary, .btn-success {
    background-color: @color-button-primary-bg;
    .box-shadow(0 3px 0 0 darken(fade(@color-button-primary-bg, 90%), 10%));
    color: @color-button-primary-text;
    &:hover, &:focus, &:active {
        background-color: darken(@color-button-primary-bg, 10%);
        .box-shadow(0px 3px 0 0 darken(fade(@color-button-primary-bg, 90%), 30%));
        color: @color-button-primary-text;
    }
    &.btn-xs {
        .box-shadow(0 1px 0 0 darken(fade(@color-button-primary-bg, 90%), 10%));
        &:hover, &:focus, &:active {
            .box-shadow(0 1px 0 0 darken(fade(@color-button-primary-bg, 90%), 30%));
        }
    }
    &.disabled, &[disabled] {
        background-color: @color-button-primary-bg;
        .box-shadow(0 3px 0 0 darken(fade(@color-button-primary-bg, 90%), 10%));
        color: @color-button-primary-text;
    }
}

.btn-muted, .btn-danger {
    background-color: @color-button-muted-bg;
    .box-shadow(0 3px 0 0 darken(fade(@color-button-muted-bg, 90%), 10%));
    color: @color-button-muted-text;
    &:hover, &:focus, &:active {
        background-color: darken(@color-button-muted-bg, 10%);
        .box-shadow(0 3px 0 0 darken(fade(@color-button-muted-bg, 90%), 30%));
        color: @color-button-muted-text;
    }
    &.btn-xs {
        .box-shadow(0 1px 0 0 darken(fade(@color-button-muted-bg, 90%), 10%));
        &:hover, &:focus, &:active {
            .box-shadow(0 1px 0 0 darken(fade(@color-button-muted-bg, 90%), 30%));
        }
    }
    &.disabled, &[disabled] {
        background-color: @color-button-muted-bg;
        .box-shadow(0 3px 0 0 darken(fade(@color-button-muted-bg, 90%), 10%));
        color: @color-button-muted-text;
    }
}

.btn-secondary, .btn-info {
    background-color: @color-button-secondary-bg;
    .box-shadow(0 3px 0 0 darken(fade(@color-button-secondary-bg, 90%), 10%));
    color: @color-button-secondary-text;
    &:hover, &:focus, &:active {
        background-color: darken(@color-button-secondary-bg, 10%);
        .box-shadow(0 3px 0 0 darken(fade(@color-button-secondary-bg, 90%), 30%));
        color: @color-button-secondary-text;
    }
    &.btn-xs {
        .box-shadow(0 1px 0 0 darken(fade(@color-button-secondary-bg, 90%), 10%));
        &:hover, &:focus, &:active {
            .box-shadow(0 1px 0 0 darken(fade(@color-button-secondary-bg, 90%), 30%));
        }
    }
    &.disabled, &[disabled] {
        background-color: @color-button-secondary-bg;
        .box-shadow(0 3px 0 0 darken(fade(@color-button-secondary-bg, 90%), 10%));
        color: @color-button-secondary-text;
    }
}

.btn-active {
    background-color: darken(@color-button-secondary-bg, 10%);
    .box-shadow(0 3px 0 0 darken(fade(@color-button-secondary-bg, 90%), 30%));
    color: @color-button-secondary-text;
    position: relative;
    &:hover, &:focus, &:active {
        background-color: darken(@color-button-secondary-bg, 10%);
        .box-shadow(0 3px 0 0 darken(fade(@color-button-secondary-bg, 90%), 30%));
        color: @color-button-secondary-text;
    }
    &.btn-xs {
        .box-shadow(0 1px 0 0 darken(fade(@color-button-secondary-bg, 90%), 10%));
        &:hover, &:focus, &:active {
            .box-shadow(0 1px 0 0 darken(fade(@color-button-secondary-bg, 90%), 30%));
        }
    }
    &.disabled, &[disabled] {
        background-color: darken(@color-button-secondary-bg, 10%);
        .box-shadow(0 3px 0 0 darken(fade(@color-button-secondary-bg, 90%), 30%));
        color: @color-button-secondary-text;
    }
}


/* For a button that looks like a link.  */
.btn-link {
    background: none;
    border: none;
    box-shadow: none;
    color: @color-link;
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    &:hover, &:focus, &:active {
        background: none;
        box-shadow: none;
        color: @color-link-hover;
        text-decoration: none;
    }
    &.disabled, &[disabled] {
        background: none;
        border: none;
        box-shadow: none;
    }
}


/* Fixes inline display default of <a> tags */
a.btn {
    color: @color-button-default-text;
    display: inline-block;
    &:visited {
        color: @color-button-default-text;
    }
}

a.btn-primary {
    color: @color-button-primary-text;
    &:visited {
        color: @color-button-primary-text;
    }
}

a.btn-secondary {
    color: @color-button-secondary-text;
    &:visited {
        color: @color-button-secondary-text;
    }
}

a.btn-muted {
    color: @color-button-muted-text;
    &:visited {
        color: @color-button-muted-text;
    }
}


/* Displays button as a full-width block element on smaller devices for easier clicking */
.btn-block {
    display: block;
    margin-bottom: .5em;
    margin-top: 0;
    text-align: center;
    width: 100%;
    @media @kid-bear {
        display: inline-block;
        width: auto;
    }
}

.btn-block + .btn-block {
    margin-top: 0;
}

.btn-100 {
    display: block;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    width: 100%;
}

.btn-drilldown {
    overflow: hidden;
    position: relative;
    padding-right: 2em;
    &:after {
        content: "\2794";
        position: absolute;
        top: .3em;
        right: .5em;   
    }
}
// used to enclose toggleable buttons
.btn-toggle {
    display: inline;
    .btn-active {
        cursor: default;
    }
}

// fixes margins on buttons that appear in a section alone
.btn-solo {
    margin-bottom: 0;
}

// button (ususally a clear button) that is used along with labels/filters
.btn-label {
    border: none;
    box-shadow: none;
    line-height: 1;
    margin-top: .5em;
    padding: .5em 1em;
}

.message-badge {
    [class*="icon-"] {
        font-size: 150%;
    }
    .badge {
        background-color: @color-text-danger;
        color: @color-button-primary-text;
        font-size: 10px;
        padding: 2px 5px;
        min-width: inherit;
    }
}


/****************************************\

Forms

\*****************************************/


.fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

/* Used to wrap around label + input */ 
.field {
    padding-bottom: 1em;
} 

label, legend {
    border: none;
    display: inline-block;
    font-family: @font-default-bold;
    font-size: 1em;
    margin-bottom: .25em;
    .clearfix;
}

input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select {
    background-color: @color-form-input-bg;
    border: 1px solid @color-form-input-border; 
    -webkit-border-radius: 0;
    border-radius: 0;
    .box-shadow(inset 0 0 0 transparent);
    color: @color-default-text;
    display: inline-block;
    font-size: .9em;
    margin-bottom: @margin/2;
    margin-right: 2px;
    padding: round(@padding/3, 1) @padding/2;
    position: relative;
    vertical-align: middle;
    &[disabled],
    &[readonly],
    fieldset[disabled] & {
        cursor: auto;
        opacity: .65;
    }
    &::-webkit-input-placeholder { color: @color-link-muted; }
    &::-moz-placeholder { color: @color-link-muted; } /* firefox 19+ */
    &:-ms-input-placeholder { color: @color-link-muted;} /* ie */
    &:-moz-placeholder { color:@color-link-muted; }
}

input[type="date"] {
    line-height: 1 !important;
}

/* Displays radio and checkboxes next to their labels */
input[type="checkbox"], input[type="radio"] {
    display: inline-block !important;
    margin: 0;
    vertical-align: middle;
}

/* Clears inputs with a column class */
input[class^="col-"], select[class^="col-"] {
    .clearfix;
    margin-bottom: .5em;
}

select {
    background: none;
    background-color: @color-form-input-bg;
    -webkit-border-radius: 0;
    border-radius: 0;
    color: @color-default-text;
    font-size: .9em !important; /* to override angular settings */
    height: 31px; /* makes selects the same size as inputs and small buttons */
    margin-bottom: .5em;
    min-height: 2em;
    position: relative;
    vertical-align: middle;
}

.ie9-select select {
    min-width: 200px;
    max-width: 400px;
}

.checkboxes, .radios { /* Differentiates checkbox and radio labels from overarching field label */
    > label {
        font-weight: normal;
    }
    @media @kid-bear {
        font-size: .9em;
    }
    input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select {
        font-size: 1em;
    }
    > .btn {
        margin-bottom: .5em;
    }
}

.input-block {
    width: 100%;
    margin-right: 0;
}

/* For inputs that are by themselves (search boxes in headers, etc.)*/
input.input-solo, .fields-solo > * {
    margin-bottom: 0;
}

/* Stacked form: labels on top of inputs */
.form-stacked {
    select, input {
        display: block;
    }

    label, p {
        display: block;
    }

    .btn { /* adds similar margin when buttons are in a form */
        margin-bottom: @margin/2;
    }

    .field {
        display: block;
        .clearfix;
    }
}

/* Horizontal form: labels to left of form */
.form-horizontal {
    label {
        @media @teen-bear {
            text-align: right;
            padding-right: .5em;
        }
    }

    .field {
        .clearfix;
    }
}


/* For inputs that need to be aligned next to one another.  Also see .field-inline */
.input-inline {
    display: inline-block !important;
}

.field-condensed {
    padding-bottom: 0;
    .field {
        padding-bottom: .25em;
    }
}

/* Displays an input and a button attached to each other */
.field-group {
    display: table;

    > input, > select {
        display: table-cell;
        float: left;
        height: 30px;
        margin-bottom: 0;
        margin-right: 0;
        width: 100%;
    }

    > span {
        display: table-cell;
        vertical-align: middle;
        width: 1%;
    }

    .btn {
        .btn-sm;
        border-radius: 0 @btn-border-radius @btn-border-radius 0;
        box-shadow: none;
        line-height: 1.45;
        margin-bottom: 0;
        padding: round(@padding/3, 1);
        &:hover {
            box-shadow: none;
        }
    }
}

/* make sure small buttons match input height in field group */
.text-small .field-group .btn {
    font-size: .9em;
}

/* Help text */
.form-help {
    color: @color-text-muted;
    line-height: 1;
    margin: 0;
    .text-smaller;
}

/* Remove additional margin when in a form */
form p {
    margin: 0;
}






/****************************************\

Grid

\*****************************************/


.grid {
    .clearfix;
    position: relative;
}

/* Regular columns that move to width: 100% at the breakpoint */
.col-5, .col-10, .col-15, .col-20, .col-25, .col-30, .col-33, .col-35, .col-40, .col-45, .col-50, .col-55, .col-60, .col-65, .col-70, .col-75, .col-80, .col-85, .col-90, .col-95, .col-100 {
    width: 100%;
}

@media @teen-bear {
    [class*='col-'] {
        float: left;
        margin: 0;
    }
    .btn[class*='col-'] {
        margin-right: 2%;
        + .btn[class*='col-']:last-child {
            margin-right: 0;
        }
    }

    @iterations: 100;

    .loopingClass (@index) when (@index > 0) {
        .col-@{index} {
            width: percentage(@index * 0.01 );
        }
        .btn.col-@{index} {
            width: percentage((@index - 2) * 0.01 );
        }
        .loopingClass(@index - 5);
    }

    .loopingClass (0) {}

    .loopingClass (@iterations);

    .col-33 {
        width: 33.33%;
    }

    .col-16 {
        width: 16.66%;
    }

    .btn.col-33 {
        width: 31.33%;
    }

    .col-right {
        float: right !important;
    }

    .col-text-right {
        text-align: right;
    }

}


/* Columns that are constant no matter viewport width */
@iterations: 100;

.loopingClass (@index) when (@index > 0) {
    .col-c-@{index} {
        float: left;
        width: percentage(@index * 0.01 );
    }
    .btn.col-c-@{index} {
        width: percentage((@index - 1) * 0.01 );
    }
    .loopingClass(@index - 1);
}

.loopingClass (0) {}

.loopingClass (@iterations);

.col-c-33 {
    width: 33.33%;
}

.col-c-16 {
    width: 16.66%;
}

.btn.col-c-33 {
    width: 31.33%;
}

/* For the expense management buttons use case*/
.btn.col-c-50-33 {
    float: left;
    margin-bottom: .5em;
    width: 48%;
    @media @mama-bear {
        width: 31.33%;
    }  
}


.btn[class*='col-c'] {
    margin-right: 2%;
    + .btn[class*='col-c']:last-child {
        margin-right: 0;
    }
}




/****************************************\

Module

\*****************************************/



/* Adds padding + margin around a particular item on the page */
.module {
    background-color: transparent;
    margin: @margin/2 0;
    padding: @padding/2;
    .clearfix;
    @media @baby-bear {
        margin: @margin/2;
        padding: @padding;
    }
}

/* Mostly used in nesting */
.module-condensed {
    margin: 0;
}

.module-border {
    border: 1px solid @color-default-border;
}

.module-light {
    background-color: @color-module-light-bg;
}

.module-dark {
    background-color: @color-module-dark-bg;
}

/* Gives more horizontal space on smaller screens */
.module.module-dark {
    padding: @padding/2;
    @media @baby-bear {
        padding: @padding;
    }
}

/* Evens out margin when modules are stacked*/
.module + .module {
    margin-top: 1em;
}

/* To not double up borders when 2 bordered modules are next to each other */
.module-border + .module-border {
    border-top: none;
}

/* Fixes doubled-up margins */
.module > .module {
    margin: 0;
}

/* Fixes extra margin at end of a box */
.module > .module:last-child {
    margin-bottom: 0;
}




/****************************************\

Lists

\*****************************************/

/* UL lists */
.list-unordered > li {
    list-style-type: square;
    list-style-position: outside;
    margin-left: 1rem;
    position: relative;
}

/*  OL lists */
.list-ordered > li {
    list-style-type: decimal;
    list-style-position: inside;
}

/* Header for a larger (non ul, usually) list */
.list-header {
    border-bottom: 1px solid @color-default-border;
    margin: 0;
    position: relative;
    padding: @padding @padding/2;
    @media @baby-bear {
        padding: @padding;
    }
    &.highlighted {
        background-color: @color-accent-light;
    }
    > h2, > h3, > h4, > input, > .btn {
        margin: 0;
    }
}

.list-item .text-highlight {
    text-decoration: underline;
}

.list-item:hover .text-highlight {
    text-decoration: none;
}

/* Border between items */
.list-item {
    border-bottom: 1px solid @color-default-border;
    padding: @padding/2 @padding;
    position: relative;
    margin-bottom: 0;
    .clearfix;
    h4 {
        margin-bottom: 0;
    }
}

/* Lines up buttons correctly */
.list-item .btn {
    margin-top: 0;
}




/****************************************\

Labels

\*****************************************/

.label {
    background-color: @color-nav-bg; // This differs from Iliad
    border: none;
    border-radius: @btn-border-radius;
    color: @color-label-text;
    display: inline-block;
    font-size: .8em;
    font-weight: normal !important;
    margin-bottom: @margin/2;
    margin-top: @margin/2;
    padding: @padding/2;
    text-decoration: none; 
}

/* Labels with closes need specific padding to show the close icon - used in transaction filters */
.label-x {
      position: relative;
      display: inline-block;
      padding: @padding/2 @padding;
      overflow: hidden;
      vertical-align: middle;
      cursor: pointer;
      .transition(all);
      .close {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: 100%;
        padding: @padding/2;
        text-align: right;
        text-decoration: none;
        cursor: pointer;
        filter: alpha(opacity=0);
        opacity: 0;
        .transition(all);

        }
    .close:after {
        content: "x";
    }

    &:hover, &:focus, &:active {
        background-color: darken(@color-accent-dark, 10%);
        color: @color-label-text;
        opacity: 1;
        padding-right: @padding*1.5;
        padding-left: @padding/2;
    }
    &:hover {
        .close {
          filter: none;
          opacity: 1;
          padding: @padding/2;
        }
        .close:after {
            color: @color-label-text;
        }

    }
}

.label + .label {
    margin-left: @margin/2;
}

/* For merchant funded rewards footer area*/
.list-footer {
    border-top: 1px solid @color-default-border;
    margin-top: @margin;
    padding: @padding @padding 0 @padding;
} 


/****************************************\

Navicon

\*****************************************/


.lte-ie8 .navicon-button {
    display: none !important;
}

.navicon-button {
    cursor: pointer;
    display: inline-block;
    position: relative; /* To absolutely position elements inside */
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
}


.navicon { /* Center bar */
    background-color: @color-default-text;
    display: block;
    height: @bar-height;
    margin-bottom: @bar-height;
    position: relative;
    width: @bar-width;
    .transition(all);

    &:after, &:before { /* Top and bottom bars */
        background-color: @color-default-text;
        content: "";
        display: block;
        height: @bar-height;
        position: absolute;
        width: @bar-width;
        .transition(all);
    }
}

/* Hamburger */
.navicon-button.x {
    margin-right: .3em;
    .navicon { /* Positioning top and bottom bars */
        background-color: @color-nav-link;
        &:after {
            background-color: @color-nav-link;
            top: @bar-height + .1em;
        }
        &:before {
            background-color: @color-nav-link;
            top: -(@bar-height + .1em);
        }
    }
}

.open.x .navicon { /* Angles bars to make the X */
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    &:after {
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        top: 0;
    }
    &:before {
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        top: 0;
    }
}


/* Plus sign */

.plus {
    .navicon:after { /* Rotates from horizontal to vertical for initial state*/
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

.open.plus .navicon { /* Don't have to rotate the whole thing 180 degrees but it makes the animation look a little spiffier */
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    &:after { /* Vertical back to horizontal */
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

.list-header .navicon, .list-header .navicon:before, .list-header .navicon:after {
    background-color: @color-heading-4;
}



/****************************************\

Pagination

\*****************************************/

.pagination {
    border-radius: 0;
    display: inline-block;
    margin: @margin;
    padding-left: 0;
    > li {
        display: inline; // Remove list-style and block-level defaults
        > a,
        > span {
            background-color: @color-button-default-bg;
            border: 1px solid @color-default-border;
            color: @color-button-default-text;
            float: left; // Collapse white-space
            line-height: 1;
            margin-left: -1px;
            padding: .5em;
            position: relative;
            text-decoration: none;
        }
        &:first-child {
            > a,
            > span {
                margin-left: 0;
                .border-left-radius(0);
            }
        }
        &:last-child {
            > a,
            > span {
                .border-right-radius(0);
            }
        }
    }
    > li > a,
    > li > span {
        &:hover,
        &:focus {
            background-color: @color-button-secondary-bg;
            border-color: @color-default-border;
            color: @color-button-secondary-text;
            cursor: pointer;
        }
    }
    > .active > a,
    > .active > span {
        &,
        &:hover,
        &:focus {
            background-color: @color-button-secondary-bg;
            border-color: @color-default-border;
            color: @color-button-secondary-text;
            cursor: default;
            z-index: 2;
        }
    }
    > .disabled > a,
    > .disabled > span {
        border-color: @color-default-border;
        &:hover,
        &:focus {
            border-color: @color-default-border;
        }

    }

}



/****************************************\

Nav Tabs

\*****************************************/

 .nav-tabs {
    border-bottom: 0;
    width: 100%;
    .clearfix;
    > li {
        float: left;
        position: relative;
        text-align: center;
        .clearfix;
        a, span { // Actual tabs (as links)
            background-color: @color-tab-default-bg;
            border: none;
            border-radius: 0;
            color: @color-tab-default-text;
            display: block;
            font-size: .8em;
            margin-right: 2px;
            padding: .5em .1em;
            text-decoration: none;
            word-break: break-word;
            &:hover {
                background-color: darken(@color-tab-default-bg, 10%);
            }
            @media @mama-bear {
                font-size: 1em;
                padding: .5em;
                word-break:normal;
            }
        }
        &.active {
            > a, span {
                background-color: @color-tab-active-bg;
                border: none;
                color: @color-tab-active-text;
                &:hover,
                &:focus {
                    background-color: @color-tab-active-bg;
                    border: none;
                    color: @color-tab-active-text;
                    cursor: default;
                }
            }
        }
        @media @teen-bear { 
            margin: 0;
        }
    }
}

// Fix for when we remove tabs based on configs
.adjustable-tabs .nav-tabs li:nth-child(1):nth-last-child(1), 
	.adjustable-tabs li:nth-child(1):nth-last-child(1) ~ li {
    width: 100%;
} 

.adjustable-tabs .nav-tabs li:nth-child(1):nth-last-child(2), 
	.adjustable-tabs li:nth-child(1):nth-last-child(2) ~ li {
    width: 50%;
} 

.adjustable-tabs .nav-tabs li:nth-child(1):nth-last-child(3), 
	.adjustable-tabs li:nth-child(1):nth-last-child(3) ~ li {
    width: 33.3%;
} 

.tabs-tall li {
    a, span {
        min-height: 50px;
        @media @baby-bear {
            min-height: inherit;
        }
    }
}

.tabs-bottom > ul > li {
    margin-bottom: 0;
    z-index: 1;
    &.active:after {
        border: solid transparent;
        border-top-color: @color-tab-active-bg;
        border-width: .5em;
        content: "";
        height: 0;
        left: 50%;
        margin-left: -.5em;
        position: absolute;
        pointer-events: none;
        top: 100%;
        width: 0;
        z-index: 10;
    }
}

.tabs-bottom > .nav-tabs > li:last-child a {
    margin-right: 0;
}

.tabs-right > li {
    border: 1px solid #ffffff;
    margin-bottom: 0;
    > span {
        margin-right: 0;
        &:hover {
            background-color:@color-tab-default-bg;
        }
    }
    &.active:after {
        border: solid transparent;
        border-top-color: @color-tab-active-bg;
        border-width: .5em;
        content: "";
        height: 0;
        left: 50%;
        margin-left: -.5em;
        pointer-events: none;
        position: absolute;
        top: 100%;
        width: 0;
        z-index: 10;
    }

    @media @teen-bear {
        &:after {
            border-top: 1.2em solid transparent; 
            border-bottom: 1.2em solid transparent;
            border-left: .5em solid @color-tab-default-bg;
            content: " ";
            display: block;
            height: 0;
            left: 100%;
            margin-top: -1.2em;
            position: absolute;
            top: 50%;
            width: 0;
            z-index: 2;
        }

        &:before {
            border-top: 1.2em solid transparent;
            border-bottom: 1.2em solid transparent;
            border-left: .5em solid white;
            content: " ";
            display: block;
            height: 0;
            left: 100%;
            margin-top: -1.2em;
            margin-left: 2px;
            position: absolute;
            top: 50%;
            width: 0;
            z-index: 1;
        }

        &.active:after {
            border-top: 1.2em solid transparent;
            border-bottom: 1.2em solid transparent;
            border-left: 0.5em solid @color-tab-active-bg;
            margin-left: 0;
            margin-top: -1.2em;
            left: 100%;
            top: 50%;
            z-index: 2;
        }
    }

    &:last-child:after {
        border: none;
    }

    &:last-child:before {
        border: none;
    }
}

.module-dark > .tabs > li, .module-dark > .steps li {
    border-color: @color-accent-light;
}

// Hide tabbable panes to start, show them when `.active`
.tab-content {
    background-color: @color-module-dark-bg;
    > .tab-pane {
        background-color: @color-module-light-bg;
        display: none;
        &:after {
            clear: both;
            content: "";
            display: table;
        }
    }
    > .active {
        display: block;
    }
}



/****************************************\

Payment Steps

\*****************************************/

.wizard {
    background-color: @color-module-light-bg;
    border: 1px solid @color-default-border;
}

.wizard .nav-tabs {
    display: none;
    @media @baby-bear {
        display: block;
    }
}

.wizard > .actions {
    padding: @padding;
}

.wizard > .actions div {
    display: inline-block;
}

.wizard > .actions a {
    display: inline-block;
}

.wizard .btn-active:not(.btn-sm):after {
    content: "\2713";
    position: absolute;
    top: .5em;
    right: .5em; 
}


/****************************************\

Toggles

\*****************************************/


.toggle {
    display: block;
    vertical-align: middle;

    @media @baby-bear {
        display: inline-block;
    }
}

.toggle-slide {
    overflow: hidden;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    direction: ltr;
}

.toggle-on {
    height: 20px;
    width: 40px;
    text-align: center;
    text-indent: -10px;
    line-height: 20px;
}

.toggle-off {
    height: 20px;
    width: 40px;
    margin-left: -10px;
    text-align: center;
    text-indent: 10px;
    line-height: 20px;
}

.toggle-slide .toggle-on, .toggle-slide .toggle-off, .toggle-slide .toggle-blob {
    float: left;
}

.toggle-blob {
    height: 20px;
    width: 20px;
    margin-left: -10px;
}

.toggle-inner {
    width: 80px;
    margin-left: -30px;
    -webkit-transition: 0.3s linear all;
    -moz-transition: 0.3s linear all;
    -o-transition: 0.3s linear all;
    transition: 0.3s linear all;
}

.toggle-inner.active {
    margin-left: 0px;
    -webkit-transition: 0.3s linear all;
    -moz-transition: 0.3s linear all;
    -o-transition: 0.3s linear all;
    transition: 0.3s linear all;
}

.toggle-slide .toggle-blob {
    position: relative;
    z-index: 99;
    cursor: hand;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.toggle-modern .toggle-slide {
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.2);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c0c5c9), color-stop(1, #a1a9af));
    background-image: -webkit-linear-gradient(#c0c5c9, #a1a9af);
    background-image: -moz-linear-gradient(#c0c5c9, #a1a9af);
    background-image: -o-linear-gradient(#c0c5c9, #a1a9af);
    background-image: -ms-linear-gradient(#c0c5c9, #a1a9af);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c0c5c9', endColorstr='#a1a9af');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#c0c5c9', endColorstr='#a1a9af')";
    .box-shadow(inset 0 2px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.15););
}

.toggle-modern .toggle-slide .toggle-on, .toggle-modern .toggle-slide .toggle-off {
    .transition(all);
    color: white;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
    font-size: 11px;
    .box-shadow(inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2););
}

.toggle-modern .toggle-slide .toggle-off, .toggle-modern .toggle-slide .toggle-off.active {
    background-color: @color-button-muted-bg;
    color: @color-button-muted-text;
}

.toggle-modern .toggle-slide .toggle-on, .toggle-modern .toggle-slide .toggle-on.active {
    background-color: @color-button-primary-bg;
    color: @color-button-primary-text;
}

.toggle-modern .toggle-select .toggle-off, .toggle-modern .toggle-select .toggle-on {
    background: none;
}

.toggle-modern .toggle-slide .toggle-blob {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c0c5c9), color-stop(1, #81898f));
    background-image: -webkit-linear-gradient(#c0c6c9, #81898f);
    background-image: -moz-linear-gradient(#c0c6c9, #81898f);
    background-image: -o-linear-gradient(#c0c6c9, #81898f);
    background-image: -ms-linear-gradient(#c0c6c9, #81898f);
    background-image: linear-gradient(#c0c6c9, #81898f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c0c6c9', endColorstr='#81898f');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#c0c5c9', endColorstr='#a1a9af')";
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.1), 1px 1px 2px rgba(0,0,0,0.2);
    border-radius: 3px;
}

.toggle-modern .toggle-slide .toggle-blob:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #a1a9af), color-stop(1, #a1a9af));
    background-image: -webkit-linear-gradient(#a1a9af, #81898f);
    background-image: -moz-linear-gradient(#a1a9af, #a1a9af);
    background-image: -o-linear-gradient(#a1a9af, #a1a9af);
    background-image: -ms-linear-gradient(#a1a9af, #a1a9af);
    background-image: linear-gradient(#a1a9af, #a1a9af);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1a9af', endColorstr='#a1a9af');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1a9af', endColorstr='#a1a9af')";
}


/****************************************\

Accordion

\*****************************************/

/* Used for the hidden info in an accordion */
.accordion-panel {
    background-color: @color-accent-light;
    border-bottom: 1px solid @color-default-border;
    padding: @padding/2 @padding;
    input, select, textarea {
        background-color: @color-module-light-bg;
    }
}

/* Nested accordions (mostly in expense management) */
.accordion-panel .accordion-panel {
    padding: @padding/2 @padding;
}

.accordion-panel .list-item {
    background-color: @color-module-light-bg;
}

.accordion .list-item {
    /* padding-bottom is to accommodate down arrow in accordions */
    padding: @padding/2 @padding/2 .8em @padding/2;
}

/* If header is toggleable, apply hover styles for user */
.accordion .list-item, .accordion .list-header {    
    cursor: pointer;
    &:hover {
        background-color: @color-accent-light;
    }
}

.accordion-disabled .list-item {
    /* padding-bottom is to accommodate down arrow in accordions */
    padding: @padding/2 @padding/2 .8em @padding/2;
}

/* If header is toggleable, apply hover styles for user */
.accordion-disabled .list-item, .accordion .list-header {    
    &:hover {
        background-color: @color-accent-light;
    }
}


/* For grouped transaction categories - kinda hacky but we don't have another class to use */
.accordion .list-header-group {
    border-top: 1px solid @color-default-border;
    cursor: default;
    &:hover {
        background-color: transparent;
    }
}

.accordion .list-item:before {
    color: @color-default-border;
    content: "\e812";
    font-family: "ezcard";
    position: absolute;
    bottom: -3px;
    left: 50%;
}

.accordion .list-item-open:before {
    color: @color-default-border;
    content: "\e814";
    font-family: "ezcard";
    position: absolute;
    bottom: -3px;
    left: 50%;
}

.accordion .list-item:hover:before {
    color: #4d4d4f;
}

.module-list .list-item:before {
    display: none;
}


/****************************************\

Modal
Overrides of bootstrap styles

\*****************************************/

.modal-dialog {
    margin: 1em auto;    
    max-width: 20em;
}

.modal-footer .btn {
    margin-bottom: 0;
}

@media @kid-bear {
    .modal-dialog {
        width: 30em;
        max-width: none;
    }
}

/* For expense management report printing */
.big-page-modal .modal {
    overflow-y: hidden;
}

.big-page-modal > .modal-dialog {
    height: 100%;
    padding: 30px;
    margin: 0 auto;
    max-width: none;
    width: 100%;

    @media @mama-bear {
        width: 90%;
    }

    @media @grandad-bear {
        width: 70%;
    }
}

.big-page-modal > .modal-content {
    height: 100%;
}

.big-page-modal > .modal-header {
    top: 0;
    width: 100%;
    height: 50px;
    position: absolute;
}

.big-page-modal > .modal-body {
    width: 100%;
    top: 50px;
    bottom: 80px;
    position: absolute;
    overflow-y: hidden;
}

.big-page-modal > .modal-footer {
    width: 100%;
    height: 80px;
    bottom: 0;
    position: absolute;
}


.modal-open .main-nav { // fix for introjs having weird z-indexes in modals
    z-index: 0;
}



/****************************************\

IntroJS

\*****************************************/


.introjs-helperNumberLayer {
    top: -16px !important;
    left: -16px !important;
    width: 25px;
    height: 25px;
    padding: 0px;
}

.introjs-helperLayer {
    background-color: rgba(255, 255, 255, .8) !important;
}

.introjs-button {
    background-image: none;
    background: @color-button-default-bg;
    border: none;
    box-shadow: none;
    font-family: @font-family-sans-serif;
    font-size: 12px;
    line-height: 1;
    padding-bottom: 5px;
    text-shadow: none;
    &:active, &:focus, &.introjs-nextbutton {
        background: none;
        .btn-primary;
        box-shadow: none !important;
    }
}

.introjs-skipbutton {
    color: @color-button-default-text;
    margin-right: 5px;
}

.introjs-overlay {
    background: rgba(0, 0, 0, .5);
}

.introjs-bullets {
    display: none;
}

.introjs-disabled.introjs-nextbutton, .introjs-disabled.introjs-prevbutton {
    display: none;
}


/****************************************\

Splash Page

\*****************************************/

.page-splash {
    z-index: 99998 !important;
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    pointer-events: auto;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    .transition(background-color);
}

.page-splash-message {
    color: white;
    font-size: 400%;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: normal;
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 250px;
}

.page-splash-message.page-splash-message-subtle {
    font-size: 200%;
    margin: 0 auto;
}

/* For page load */
.page-splash .spinner {
    margin: 0 auto;
    left: auto;
    top: 150px !important;
}

/* For loading transactions */
.spinner-small {
    position: absolute;
    top: 50%;
    right: 30px;
}

// for centering spinner in modals
.modal-body .spinner-small {
  top: 50px;
  right: 50%;
}



/****************************************\

Animations

\*****************************************/

.basic-animation.ng-enter {
    -webkit-transition: 0.3s linear all;
    -moz-transition: 0.3s linear all;
    -o-transition: 0.3s linear all;
    transition: 0.3s linear all;
    opacity: 0;
}

.basic-animation.ng-enter.ng-enter-active {
    opacity: 1;
}

.dissolve-animation.ng-hide-remove {
    display: inline !important;
}

.dissolve-animation.ng-hide-remove,
.dissolve-animation.ng-hide-add {
    -webkit-transition: 0.3s linear all;
    -moz-transition: 0.3s linear all;
    -o-transition: 0.3s linear all;
    transition: 0.3s linear all;
}

.dissolve-animation.ng-hide-remove.ng-hide-remove-active,
.dissolve-animation.ng-hide-add {
    opacity: 1;
}

.dissolve-animation.ng-hide-add.ng-hide-add-active,
.dissolve-animation.ng-hide-remove {
    opacity: 0;
}

.dissolve-animation-fast.ng-hide-remove {
    display: inline !important;
}

.dissolve-animation-fast.ng-hide-remove,
.dissolve-animation-fast.ng-hide-add {
    -webkit-transition: 0.3s linear all;
    -moz-transition: 0.3s linear all;
    -o-transition: 0.3s linear all;
    transition: 0.3s linear all;
}

.dissolve-animation-fast.ng-hide-remove.ng-hide-remove-active,
.dissolve-animation-fast.ng-hide-add {
    opacity: 1;
}

.dissolve-animation-fast.ng-hide-add.ng-hide-add-active,
.dissolve-animation-fast.ng-hide-remove {
    opacity: 0;
}


/****************************************\

Toastr

\*****************************************/

#toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div {
    margin: 4px auto;
}


/****************************************\

JQPlot

\*****************************************/


.jqplot-point-label {
    color: #FFFFFF;
}

.jqplot-series-shadowCanvas {
    background-color: transparent;
}





/****************************************\

Carousel

\*****************************************/


.carousel .carousel-indicators li {
    border-color: @color-nav-bg;
    margin: 0 .2em;
}

.carousel .carousel-indicators .active {
    background-color: @color-nav-bg;
}

.carousel-indicators .active {
    width: 10px;
    height: 10px;
}





/****************************************\

Errors

\*****************************************/


.has-error .ng-invalid {
    border: red solid 1px !important;
}



/****************************************\

Asides

\*****************************************/

.aside {
    max-width: 320px;
    width: 95%;
    background-color:@color-module-light-bg;
    @media @baby-bear {
        width: 80%;
    }
}

.aside .aside-dialog .aside-header {
    border-bottom: none !important;
    padding: 1em !important;
    background: @color-nav-bg !important;
    color: #fff;
}

.aside-title {
    color: @color-nav-link;
    margin: 0;
}

.aside .aside-dialog .aside-header .close {
    color: @color-nav-link;
    font-size: 1em !important;
    font-weight: bold;
    line-height: 1.2;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.aside .aside-dialog .aside-body {
    position: relative;
    padding: 1em;
}

.aside .aside-dialog .aside-footer {
    margin-top: 1em;
    padding: 1em;
    text-align: right;
    border-top: 1px solid @color-default-border;
}

.aside .aside-dialog .aside-footer .btn + .btn {
    margin-left: 5px;
    margin-bottom: 0;
}

.aside .aside-dialog .btn {
    box-shadow: none !important;
    position: relative;
    text-shadow: none !important;
}

.aside .aside-dialog .aside-footer .btn-group .btn + .btn {
    margin-left: -1px;
}

.aside .aside-dialog .aside-footer .btn-block + .btn-block {
    margin-left: 0;
}

.aside .aside-dialog .btn-active:after {
    content: "\2713";
    position: absolute;
    top: .3em;
    right: .5em;
}

.aside-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: rgba(0, 0, 0, .7);
}

.modal-backdrop.am-fade, .aside-backdrop.am-fade {
    background: rgba(0, 0, 0, .3);
}

.close {
    color: inherit;
    cursor: pointer;
    font-size: inherit;
    opacity: 1;
    text-shadow: none;
    &:hover, &:focus {
        text-shadow: none;
    }
}


/****************************************\

Dropdowns and Datepickers
Overrides for bootstrap styles - works in asides as well, do not remove

\*****************************************/

.dropdown-menu {
    padding: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    z-index: 1032;
    li {
        color: @color-default-text;
        margin: 0;
        &:first-child span {
            padding-bottom: 0;
        }
    }
    li a, li span {
        display: block;
        font-size: .9em;
        margin: 0;
        padding: .3em;
        text-align: left;
    }
    li a {
        color: @color-text-important;
        &:hover {
            color: darken(@color-text-important, 5%);
        }
    }
}

.datepicker .dropdown-menu li {
    margin: 0;
    a {
        color: @color-text-muted;
        font-size: .8em;
        padding: @padding/3;
        text-align: left;
        &:hover {
            background: @color-accent-light;
        }
    }
}

.datepicker .dropdown-menu {
    background-color: @color-form-input-bg; 
    border-radius: 0;
    border: none;
    padding: .2em;
    table {
        max-width: 300px;

        .glyphicon-chevron-left:before {
            content: "\e813";
            font-family: "ezcard";
            font-style: normal;
        }

        .glyphicon-chevron-right:before {
            content: "\e815";
            font-family: "ezcard";
            font-style: normal;
        }
        .btn {
            border: 1px solid @color-default-border;
            box-shadow: none;
            font-size: .8em;
            margin: 0;
            text-shadow: none;
            &:not(.btn-danger):not(.btn-info):not(.btn-success) {
                background-color: white;
                color: black;
                &:hover {
                    background-color: @color-button-muted-bg;
                    color: @color-button-muted-text;
                }
                &.highlighted {
                    background-color: @color-button-primary-bg;
                    color: @color-button-primary-text;
                    .text-muted {                    
                        color: @color-button-primary-text;
                    }
                }
            }


            &.btn-info:active, &.btn-info.active {
                background-color: @color-button-primary-bg;
                color: @color-button-primary-text;
                .text-info {
                    color: @color-button-primary-text;
                }
            }
        }
        th .btn {
            width: 100%;
        }
    }
}

/****************************************\

Print Classes

\*****************************************/


.print-only {
    display: none;
}


@media print {
    .primary-wrapper, .primary-wrapper *:not(.ng-hide) {
        overflow: visible !important;
        float: none !important;
        position: relative;
        page-break-inside: auto;
    }
    .collapsing {
        height: auto !important;
    }
    .print-only {
        display: block;
    }
    .no-print {
        display: none !important;
    }
}

/****************************************\

Virtual Card

\*****************************************/

.vc-wrapper, .vc-sidebar {
    @media @mama-bear {
        float: left;
    }
}

.vc-sidebar {
    width: 100%;
    @media @mama-bear {
        max-width: 33%;
    }
}

.vc-bg {
    background: #2d3031; /* Old browsers */
    background: -moz-linear-gradient(45deg, #2d3031 0%, #4d4f51 50%, #383a3b 60%, #242626 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#2d3031), color-stop(50%,#4d4f51), color-stop(60%,#383a3b), color-stop(100%,#242626)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, #2d3031 0%,#4d4f51 50%,#383a3b 60%,#242626 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg, #2d3031 0%,#4d4f51 50%,#383a3b 60%,#242626 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg, #2d3031 0%,#4d4f51 50%,#383a3b 60%,#242626 100%); /* IE10+ */
    background: linear-gradient(45deg, #2d3031 0%,#4d4f51 50%,#383a3b 60%,#242626 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d3031', endColorstr='#242626',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */    
    border-radius: .5em;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    color: @color-virtual-card-text;
    max-width: 600px;
    min-width: 370px;
    min-height: 240px;
    /*-webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);   
    -ms-transform: rotate(270deg);   
    -o-transform: rotate(270deg);  
    transform: rotate(270deg);
    -ms-transform-origin: 50% 84%;
    -webkit-transform-origin: 50% 84%; 
    transform-origin: 50% 84%;*/
    @media @baby-bear {
        max-width: 500px;
    }
    margin: 0 auto;
    @media @teen-bear {
        border-radius: 1em;
        max-width: none;
        width: 550px;
        height: 350px;
    }
}

.vc-institution {
    margin-bottom: 0;
    margin-right: .5em;
    @media @baby-bear {
        font-size: 1.5em;
    }
    @media @kid-bear {
        font-size: 1.7em;
    }
    @media @teen-bear {
        font-size: 1.9em;
    }
}

.vc-number {
    color: white;
    font-family: monospace;
    font-size: 2em;
    margin-bottom: 0;
    > span {
        display: inline-block;
        &:nth-child(4n) {
            margin-right: .4em;
        }
    }
    @media @baby-bear {
        font-size: 2.2em;
    }
    @media @kid-bear {
        font-size: 2.5em;
    }
    @media @teen-bear {
        font-size: 2.5em;
        margin-top: .5em;
    }
}

.vc-cvc, .vc-valid-thru {
    display: block;
    font-size: .9em;
    line-height: 1;
}

.vc-cvc {
    @media @kid-bear {
        font-size: 1.2em;
    }
}

.vc-valid-date {
    font-family: monospace;
    font-size: 1.2em;
    vertical-align: top;
    @media @kid-bear {
        font-size: 1.5em;
    }
}

.vc-bottom-row {
    padding-top: 0;
    @media @teen-bear {
        padding-top: 1em;
    }
}

.vc-name, .vc-company {
    font-family: monospace;
    font-size: 1.2em;
    margin-bottom: .2em;
    @media @kid-bear {
        font-size: 1.5em;
    }  
}


/****************************************\

Merchant Funded Rewards

\*****************************************/

.carousel-inner > .item {
    height: 439px;
    @media @baby-bear {
        height: 340px;
    }
    @media @teen-bear {
        height: 340px;
    }
    @media @mama-bear {
        height: 340px;
    }
}


.merchant-wrap {
    display: inline-block;
    width: 50%;
    margin-bottom: 1em;

    @media @baby-bear {
        width: 25%;
    }
    @media @teen-bear {
        width: 25%;
    }
    @media @mama-bear {
        width: 25%;
    }
}

.merchant-img {
    background: white;
    height: 69px ;
    width: 69px ;
    padding: 4px; 
    border: @color-default-border solid 1px ;
    -ms-interpolation-mode: bicubic; 
    @media @teen-bear {
        width: 55px;
        height: 55px;
    }
    @media @mama-bear {
        height: 69px ;
        width: 69px ;
    }
}

.merchant-img-lg {
    background: white;
    border:@color-default-border solid 1px;
    padding: 4px; 
    max-width: 100px;
    margin: 0 1em 1em 0;
    width: auto;
    -ms-interpolation-mode: bicubic; 
}

.reward-header {
    border-bottom: 1px solid @color-default-border; 
    padding-bottom: 4px;
}

.reward-header-new {
    color: @color-button-secondary-bg;
}

.reward-header-active {
    color: @color-text-important;
}

.reward-header-pending {
    color: @color-text-danger;
}

.reward-header-deposited {
    color: @color-button-muted-bg;
}

.rewards-tile {
    float: left;
    padding: 1em;
    position: relative;
    text-align: center;
    width: 115px;
    height: 120px;
    .rewards-tile-amount {
        background-color: silver;
        color: #333;
        float: right;
        font-size: 85%;
        margin-right: 9px;
        margin-left: 9px;
        padding: 3px;
        line-height: 1;
        text-align: right;
        min-width: 40px;
        @media @teen-bear {
            margin-right: 14px;
            margin-left: 14px;
        }
        @media @mama-bear {
            margin-right: 9px;
            margin-left: 9px;
        }
    }
}

.offers .rewards-tile {
    cursor: pointer;

    &:hover {
        background-color: @color-button-muted-bg;
        .text-muted {
            color: @color-button-muted-text;
        }
    }
}

.rewards-tile-with-kaching {
    height: 140px;
}
.rewards-merchant-text, .rewards-details {
    padding: 1em;
}

.carousel-inner {
    .rewards-carousel-message {
        width: 100%;
        @media @mama-bear {
            float: left;
            width: 60%;
        }
    }
    .rewards-carousel-button {
        width: 100%;
        @media @mama-bear {
            float: left;
            width: 40%;
        }
    }
}



/****************************************\

Chip Card

\*****************************************/


.chip-accordion {
    margin-bottom: 0;
    .navicon-button {
        float: left;
        width: 5%;
        top: .7em;
    }
    .list-item-inner {
        float: left;
        width: 95%;
    }
}
.accordion .merchant-list-item {
    padding: 0;
    &:before, &:after {
        content: "";
    }
    &:hover, &:focus, &:active {
        .merchant-active-tag {
            background-color: darken(@color-button-primary-bg, 10%);
            color: @color-button-primary-text;
        }
    }
}



/****************************************\

Validation ToolTips

\*****************************************/


// Currently all tooltips are used for validation, meaning they are all red.
.tooltip-inner {
    background-color: @color-text-danger;
    font-size: .8em;
}

.tooltip.top .tooltip-arrow, .tooltip.top-left .tooltip-arrow, .tooltip.top-right .tooltip-arrow  {
    border-top-color: @color-text-danger;
}

.tooltip.right .tooltip-arrow {
    border-right-color: @color-text-danger;
}

.tooltip.left .tooltip-arrow {
    border-left-color: @color-text-danger;
}

.tooltip.bottom .tooltip-arrow, .tooltip.bottom-left .tooltip-arrow, .tooltip.bottom-right .tooltip-arrow  {
    border-bottom-color: @color-text-danger;
}
.introjs-tooltip {
    background-color:@color-accent-light;
}
//Processed-12:08 PM