/*
    CSS Variables for Custom Branding
    The Branding controller will replaces color values for these --css-variable in the :root section
    (IE does not support --css-vars so instead we find an replace 'var(...)' instances.)
:root {
  --brand-primary-color: rgba(1, 64, 190, 1);
  --brand-pri-r: @@brand-pri-r@@;
  --brand-pri-g: @@brand-pri-g@@;
  --brand-pri-b: @@brand-pri-b@@;
  --brand-secondary-color: rgba(187, 187, 187, 1);
  --brand-sec-r: @@brand-sec-r@@;
  --brand-sec-g: @@brand-sec-g@@;
  --brand-sec-b: @@brand-sec-b@@;
  --brand-background-color: rgba(233, 235, 229, 1);
  --brand-back-r: @@brand-back-r@@;
  --brand-back-g: @@brand-back-g@@;
  --brand-back-b: @@brand-back-b@@;
  --brand-background-lt-color: rgba(243, 245, 239, 1);
  --brand-back-lt-r: @@brand-back-lt-r@@;
  --brand-back-lt-g: @@brand-back-lt-g@@;
  --brand-back-lt-b: @@brand-back-lt-b@@;
  --brand-background-dk-color: rgba(223, 225, 219, 1);
  --brand-back-dk-r: @@brand-back-dk-r@@;
  --brand-back-dk-g: @@brand-back-dk-g@@;
  --brand-back-dk-b: @@brand-back-dk-b@@;
}
*/


/*-----------------------------------*/
/*-----------Primary Color-----------*/
/*-----------------------------------*/
ul.main-navigation li a,
.login .api_loading,
.datepicker .dropdown-menu .text-info,
.pick-date:after, .results tbody td i,
.modal-title, .login h3, h2, a {
    color: rgba(1, 64, 190, 1);
}

.ms-container .ms-selectable li.ms-hover,
.ms-container .ms-selection li.ms-hover {
    background-color: rgba(1, 64, 190, 1);
}

.btn, button, ul.dropdown-menu li:hover,
.datepicker thead, .datepicker tfoot {
    background: rgba(1, 64, 190, 1);
}

.datepicker .dropdown-menu button:hover,
ul.breadcrumbs li.active {
    background: rgba(1, 64, 190, 1) !important;
}

input:focus, .ms-container .ms-list.ms-focus {
    border-color: rgba(1, 64, 190, 1);
}

ul.dropdown-menu, .select-style select:focus,
.select-style .current.activeSelector {
    border-top-color: rgba(1, 64, 190, 1);
}

.results thead th {
    border-bottom: 1px solid #ccc;
}

/*
    pagination stuff
*/
.pagination > .active > a {
    background: rgba(1, 64, 190, 1);
}

.pagination-lg > li > a {
    padding: 5px 10px;
}

.navigation, ul.dropdown-menu li:last-child,
.datepicker .dropdown-menu {
    border-bottom-color: transparent;
    border-bottom: 0px solid;
}

ul.main-navigation.hidden-xs.cog, ul.main-navigation.hidden-xs.cog > li {
    text-align: right;
    margin-right: 15px;
}

    ul.main-navigation.hidden-xs.cog, ul.main-navigation.hidden-xs.cog > li > a > i {
        margin-left: 2px;
    }

        ul.main-navigation.hidden-xs.cog > li > a:hover {
            color: rgba(1, 64, 190, 1);
        }

i.tooltip-help-icon {
    color: #9aa0a5;
}

/* EvoChat specific styles */
/******TODO: REMOVED AND LETTING CHAT STYLE SHEET DRIVE LOOK AND FEEL******/


/*Primary Color Alternates*/
.btn:hover, button:hover {
    background: rgba( 1, 64, 190, .6);
}

.datepicker .dropdown-menu button.active {
    background: rgba( 1, 64, 190, .4) !important;
}

.st-menu {
    background: #3A3A3C;
}

.processing.btn:hover {
    background: rgba( 1, 64, 190, .9);
}

/*-----------------------------------*/
/*----------Secondary Color----------*/
/*-----------------------------------*/
.btn.alt, ul.breadcrumbs li {
    background: rgba( 187, 187, 187, 1);
}

ul.main-navigation li a:hover, .panel-body ul li a:hover {
    color: rgba( 187, 187, 187, 1);
}

/*Secondary Color Alternates*/
.btn.alt:hover {
    background: rgba( 187, 187, 187, .6);
}

/*-----------------------------------*/
/*----------Background Color---------*/
/*-----------------------------------*/

body {
    background: rgba(238, 238, 238, 1);
}


/*************************All new classes to assit with updated layout***************************************/
.st-content {
    overflow-y: hidden;
}

.form-group {
    margin-bottom: 1rem;
}

.form-control {
    height: auto;
    padding: .5rem .75rem;
    font-size: 1rem;
    line-height: 1.25;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border-radius: 0px;
    box-shadow: none;
}

.small-signin {
    text-transform: uppercase;
    margin: 10px 0;
}

.small {
    font-size: 75%;
    font-weight: normal;
}
/*added to fix logo*/
.pageTitle {
    padding: 0 7.5px;
}

.login_body {
    margin: 10px 20px;
}

    .login_body > .container {
        background: #fff;
        padding: 50px;
        border: 1px solid #ccc;
    }

@media (max-width: 576.9px) {
    .pageTitle {
        padding: 0 27.5px;
    }
}

@media (min-width: 576px) {
    .login_body > .container,
    .pageTitle.container,
    .footer-container .footer {
        width: 540px;
        max-width: 100%;
    }

        .login_body > .container .row {
            margin-right: -7.5px;
            margin-left: -7.5px;
        }
}

@media (min-width: 768px) {
    .login_body > .container,
    .pageTitle.container,
    .footer-container .footer {
        width: 720px;
        max-width: 100%;
    }

        .login_body > .container .row {
            margin-right: -7.5px;
            margin-left: -7.5px;
            display: flex;
            flex-wrap: wrap;
        }

        .login_body > .container .col-md-3 {
            width: 25%;
            -webkit-box-flex: 0;
            -ms-flex: 0 0 25%;
            flex: 0 0 25%;
            max-width: 25%;
            padding-right: 7.5px;
            padding-left: 7.5px;
        }

        .login_body > .container .col-md-8 {
            width: 50%;
            -webkit-box-flex: 0;
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
            padding-right: 7.5px;
            padding-left: 7.5px;
        }
}

@media (min-width: 992px) {
    .login_body > .container,
    .pageTitle.container,
    .footer-container .footer {
        width: 960px;
        max-width: 100%;
    }

        .login_body > .container .row {
            margin-right: -7.5px;
            margin-left: -7.5px;
        }

        .login_body > .container .col-lg-4 {
            width: 33.33333333%;
            -webkit-box-flex: 0;
            -ms-flex: 0 0 33.33333333%;
            flex: 0 0 33.33333333%;
            max-width: 33.33333333%;
            padding-right: 7.5px;
            padding-left: 7.5px;
        }
}

.capthcha_input input {
    height: auto;
    padding: .5rem .75rem;
    font-size: 1rem;
    line-height: 1.25;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border-radius: 0px;
    width: 100%;
    margin-top: 10px;
}

.body.login {
    padding-top: 86px;
    overflow: hidden;
}

.reset_password .thanks {
    line-height: 1.5em;
    font-weight: 400;
}

.resetForm {
    margin-top: 20px;
}

.container .main_content,
.clearfix.content_footer {
    min-height: 100px;
}

@media (min-width: 768px) and (max-width: 991.9px) {
    .navbar-collapse.collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: none !important;
        width: 100%;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 100%;
    }

    .main_content {
        max-width: 100%;
    }

    .default_interface {
        max-width: 100%;
    }

    .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        width: 100%;
    }

    .sidebar {
        position: fixed;
        top: 60px;
        left: 0;
        width: 200px;
        /*height: 100vh;*/
        height: 100%;
        background: #3A3A3C;
        color: #fff;
        display: block;
        overflow-y: auto;
    }

    .body.login {
        padding-left: 200px;
    }

    .loginNav .sidebar .sidebar-footer {
        position: absolute;
        bottom: 84px;
        left: 0px;
        width: 200px;
        text-align: center;
    }


    .sidebar .ftrLogo .nav-section .sidebar-footer {
        left: 0px;
        width: 200px;
        text-align: center;
        margin-top: 80px;
    }

    .sidebar .sidebar-footer.btmLogo {
        position: absolute;
        bottom: 40px;
        left: 0px;
        width: 200px;
        text-align: center;
        margin-left: 0px;
        margin-top: 20px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    @media all and (max-height: 519.9px) {
        .sidebar .sidebar-footer.btmLogo {
            display: none;
        }
    }


    @media all and (min-height: 520px) {
        .sidebar .ftrLogo .nav-section .sidebar-footer {
            display: none
        }
    }

    .container .main_content,
    .clearfix.content_footer {
        padding-left: 200px;
    }

    .clearfix .col-md-0.col-sm-3.col-xs-4 {
        display: none;
    }

    /**********************************NEW SIDEBAR NAV CLASSES********************************/
    .sidebar ul.main-navigation {
        margin-left: 15px;
    }

        .sidebar ul.main-navigation li {
            padding: 0px;
            padding-top: 10px;
            line-height: 45px;
            width: 100%;
        }

        .sidebar ul.main-navigation .nav-section {
            font-weight: 800;
            cursor: pointer;
        }

            .sidebar ul.main-navigation .nav-section i {
                margin-right: 2px;
            }

        .sidebar ul.main-navigation .navbar-nav {
            width: 100%;
        }

        .sidebar ul.main-navigation li.nav-item {
            display: block;
            line-height: 0px;
            margin-bottom: 10px;
            padding: 0px;
            text-transform: capitalize;
            width: 100%
        }

        .sidebar ul.main-navigation li .nav-link {
            font-weight: 400;
            color: #fff;
            border-right: 0px solid #fff;
            transition: border .5s, padding .5s;
            display: block;
            padding-top: 0px;
            padding-bottom: 0px;
            padding: 0px 10px 0px 0px;
        }


            .sidebar ul.main-navigation li .nav-link:hover,
            .sidebar ul.main-navigation li .nav-link:active {
                border-right-width: 8px;
                padding-right: 0;
            }

            .sidebar ul.main-navigation li .nav-link.help {
                font-weight: 900;
            }

        .sidebar ul.main-navigation li.active .nav-link {
            font-weight: 600;
            text-decoration: underline;
            border-right: 0px solid #fff;
            border-right-width: 8px;
            padding-right: 0;
        }
}

@media (max-width: 991.9px) {
    .navbar .collapse.in {
        display: block !important;
    }

    .navbar .hidden-xs {
        display: inline-block !important;
        height: auto;
        margin-left: 0px;
        width: 100%
    }

    .navbar .mobile-menu-btn.visible-xs {
        visibility: visible;
        display: contents !important;
    }

    .navbar ul.main-navigation li {
        display: inline-block;
        line-height: 30px;
        width: 100%;
    }

    .navbar .navbar-nav {
        margin: 0px 0px;
        width: 100%;
        padding-right: 20px;
    }

    .top-bar .navbar-nav {
        display: inline-flex;
    }

        .top-bar .navbar-nav li {
            margin-bottom: 10px;
        }
}

@media (max-width: 474.98px) {
    .body.login .btn {
        width: 100%;
        margin: 5px 0px;
    }
}

.clearfix.content_footer {
    margin-top: 50px;
}
/************************************NEW STYLES TO ASSIST WITH LAYOUT ISSUES WITHIN THE CONTENT OF THE PAGE***************************************/

.clearfix.inquiry_row.row .datepicker {
    display: block;
}

.datepicker .dateSelection {
    display: inline-flex;
    margin-top: 15px;
}

.datepicker .dateSelectionTo {
    display: inline-flex;
    margin-top: 0px;
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    /* IE10+ specific styles go here */
    .dateSelection .input-group {
        width: 42%;
    }
}

.datepicker .dateSelection .input-group .input-group-btn .btn,
.datepicker .dateSelectionTo .input-group .input-group-btn .btn {
    margin-right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
}

.datepicker .dateJoiner {
    line-height: 34px;
    padding: 0px 5px;
}

.datepicker .dateRangeType .select-style {
    width: 100%;
}

.datepicker .input-group.singleInput {
    margin-top: 15px;
}

.buttons {
    text-align: center;
}

    .buttons .btn_frame {
        display: inline-flex;
        margin: 20px 0px;
    }

        .buttons .btn_frame .btn {
            min-width: 150px;
            margin: 0px 5px;
        }

@media (max-width: 767.9px) {
    .clearfix.inquiry_row.row {
        margin-left: 0px;
        margin-right: 0px;
        padding-bottom: 0px;
    }

        .clearfix.inquiry_row.row .form_field {
            display: contents;
        }

        .clearfix.inquiry_row.row .select-style {
            margin-top: 15px;
        }

        .clearfix.inquiry_row.row input.form-control {
            margin-top: 15px;
        }

        .clearfix.inquiry_row.row .datepicker input.form-control {
            margin-top: 0px;
            padding: .5rem;
        }
}

@media (max-width: 537.9px) {
    .buttons .btn_frame {
        display: block;
    }

        .buttons .btn_frame .btn {
            min-width: 100%;
            margin: 5px 0px;
        }
}
/**** NEW CLASSES FOR MOVING OF RIGHT SIDE NAVIGATION IN SMALL VIEWS TO A TOP DROPDOWN NAVIGATION ****/
.header-wrapper {
    height: 60px;
    width: 100%;
}

.header .navbar {
    background: #fff;
    padding-top: 0px;
    padding-bottom: 0px;
    min-height: 60px;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
    border-radius: 0px;
    z-index: 1000;
    position: fixed;
    width: 100%
}

    .header .navbar .navbar-brand {
        padding: 0;
        color: #101b2c;
        width: max-content;
    }

        .header .navbar .navbar-brand img {
            max-height: 60px;
        }

    .header .navbar .navbar-toggler {
        margin-top: 10px;
    }

    .header .navbar .top-bar .nav-link {
        text-transform: uppercase;
        font-size: 13px;
        font-weight: 400;
        color: #101b2c;
    }

        .header .navbar .top-bar .nav-link:hover,
        .header .navbar .top-bar .nav-link:active,
        .header .navbar .top-bar .nav-link:focus {
            color: rgba(1, 64, 190, 1);
        }

    .header .navbar .top-bar .dropdown-menu {
        border: 0;
        margin-top: 10px;
    }

@media (max-width: 991.1px) {
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}

.header .navbar .top-bar .dropdown-item .dropdown-item {
    line-height: 20px;
    padding: 10px;
    border-top: 1px solid #ccc;
}

    .header .navbar .top-bar .dropdown-item .dropdown-item:hover,
    .header .navbar .top-bar .dropdown-item .dropdown-item:active,
    .header .navbar .top-bar .dropdown-item .dropdown-item:focus {
        color: rgba(1, 64, 190, 1);
        background-color: #fff;
    }

.navbar-light .navbar-toggler {
    color: rgba(0,0,0,0.1);
    align-self: flex-start;
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
}

.navbar-toggler-right {
    position: absolute;
    right: 1rem;
}

    .navbar-toggler-right .fa-2x {
        font-size: 1.5em
    }

.navbar-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.navbar {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0.5rem 1rem;
}

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

@media (min-width:992px) {

    .header .navbar .top-bar {
        position: absolute;
        top: 0;
        right: 20px;
    }

        .header .navbar .top-bar .nav-item {
            margin-left: 20px;
        }

        .header .navbar .top-bar .nav-link {
            height: 60px;
            line-height: 60px;
            padding: 0 0 20px;
            text-decoration: none;
            -webkit-transition: border-width 0.5s, padding-bottom 0.5s;
            transition: border-width 0.5s, padding-bottom 0.5s;
        }

            .header .navbar .top-bar .nav-link:hover,
            .header .navbar .top-bar .nav-link:active,
            .header .navbar .top-bar .nav-link[aria-expanded=true] {
                border-bottom: 8px solid rgba(1, 64, 190, 1);
                padding-bottom: 12px;
            }

    .navbar-toggleable-md .navbar-toggler {
        display: none;
    }
}

.interfaceContainer {
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width:991.9px) {
    .header .navbar {
        position: relative;
    }

    .sidebar {
        margin-top: 20px;
    }

    .top-bar {
        margin-top: 10px;
        padding: 20px 0px;
        border-top: 1px solid #ccc;
    }
    /*.sidebar ul.navbar-nav li:hover {
        background: #eee;
    }*/
    .sidebar-footer {
        display: none !important;
    }

    .nav-section {
        font-weight: 800;
        cursor: pointer;
    }

    div.context-help-ribbon-question {
        position: absolute;
        transition: none;
    }

    .interfaceContainer div.context-help-ribbon-question {
        top: 0px;
        position: absolute;
        transition: none;
    }
}

/***************classes for export buttons******************/
.buttons .btn_frame .btn.exportBtn {
    min-width: 100px;
}

.buttons .btn_frame .exportButton .btn {
    margin: 0px 0px;
}

.exportButton .btn.dropdown-toggle {
    margin: 0px 0px;
    width: 50px;
    max-width: 50px;
    min-width: 50px;
}

.exportButton .dropdown-menu {
    border-top: 0px;
    border: 1px solid rgba(1, 64, 190, 1);
    top: 41px;
    padding: 0px;
}

    .exportButton .dropdown-menu li {
        height: auto
    }

@media (max-width:537.9px) {
    .exportButton .btn-group {
        width: 100%;
    }

        .exportButton .btn-group .btn.exportBtn {
            width: calc(100% - 50px);
        }
}

/******************************NEW ACCOUNT PREFERENCES CLASSES********************************/
.accountPreferences .container {
    background: #fff;
    padding: 20px;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    min-height: 290px;
}

    .accountPreferences .container.notify {
        padding: 20px 10px;
    }

.accountPreferences .alert-warning {
    font-weight: 500;
    line-height: 1.5rem;
    text-align: center;
}

.accountPreferences .col-xs-5of5 {
    margin-bottom: 10px;
}

.accountPreferences .pref-phone-input-icon {
    top: 45px;
}

.accountPreferences .optInText {
    padding: 20px 0px;
    line-height: 20px;
}

.accountPreferences .saveAlertMsg {
    margin: 20px 0px;
    text-align: center;
    font-style: italic;
}

.accountPreferences .input-group-addon:not(:first-child):not(:last-child),
.accountPreferences .input-group-addon:last-child {
    cursor: pointer;
    border-radius: 0px;
}

.accountPreferences .input-group-addon:not(:first-child):not(:last-child) {
    border-left: 0
}

    .accountPreferences .input-group-addon:not(:first-child):not(:last-child) i {
        color: #28a745;
    }

.accountPreferences .input-group-addon:last-child i {
    color: #cc1e25;
}

.accountPreferences .col-xs-5of5 .phoneActions a {
    line-height: 30px;
}

.addPhoneNumber .changeNumber .col-md-6.col-sm-12 {
    padding: 10px 15px 10px;
}

.addPhoneNumber .changeNumber select {
    padding: 6px .75rem;
}

.addPhoneNumber .changeNumber .input-group-addon {
    border-radius: 0px;
}

.addPhoneNumber .changeNumber .col-sm-12 .btn {
    margin-top: 10px;
}

.addPhoneNumber .verifyMsg {
    margin-top: 20px;
    margin-bottom: 10px;
}

    .addPhoneNumber .verifyMsg h4 {
        margin-bottom: 20px;
    }

.form-horizontal.container {
    padding: 30px 20px 20px;
}

@media (max-width:365px) {
    .addPhoneNumber .verifyMsg .col-md-7.col-sm-12 .btn,
    .accountPreferences .col-xs-5of5.col-md-2of5 .btn,
    .addPhoneNumber .changeNumber .col-sm-12 .btn,
    .form-horizontal.container.addMerch .col-sm-offset-3.col-sm-5 .btn,
    .form-horizontal.container.changePassword .col-sm-offset-3.col-sm-5 .btn {
        width: 100%;
        margin-bottom: 10px;
    }
}

@media (max-width:414px) {
    .form-horizontal.container.taxFormPage .col-sm-offset-3.col-sm-12 .btn {
        width: 100%;
        margin-bottom: 10px;
    }
}
/************************************* 1099 Page *****************************************************/
.taxFormResults {
    background: #fff;
    border: 1px solid #cccccc;
    padding: 20px;
    margin-top: 20px;
}

    .taxFormResults table thead th,
    .taxFormResults table tbody td {
        text-align: left;
    }

        .taxFormResults table thead th:last-child,
        .taxFormResults table tbody td:last-child {
            text-align: center;
        }

    .taxFormResults .tableResults {
        overflow: hidden;
        overflow-x: auto;
    }

/******************************************************************************************/

.alert {
    text-align: center;
    line-height: 20px;
}

.footnote {
    font-size: .75em;
    color: #cb3436;
    line-height: 14px;
}

.container h2 {
    background: rgba(37, 80, 160, 1);
    color: #fff;
    padding: 15px 20px;
    margin: -25px -25px 25px;
}

@media (max-width:897.9px) {
    .container h2 {
        margin: -25px -20px 25px;
    }
}

.container .interfaceContainer h2 {
    background: rgba(37, 80, 160, 1);
    color: #fff;
    padding: 15px 20px;
    margin: -25px -30px 25px;
}

@media (max-width:897.9px) {
    .container .interfaceContainer h2 {
        margin: -25px -25px 25px;
    }
}

@media (max-width:575.9px) {
    .container h2 {
        font-size: 1.675rem;
    }
}

.help-container h2 {
    background: #0140be;
    color: #fff;
    padding: 15px 20px;
    margin: -3px -15px 25px;
}
/*
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     IE10+ CSS styles go here 
    .sidebar .ftrLogo .nav-section .sidebar-footer {
            display: none;
        }
}*/

@media all and (max-height: 519.9px) {
    .sidebar .sidebar-footer.btmLogo {
        display: none;
    }
}


@media all and (min-height: 520px) {
    .sidebar .ftrLogo .nav-section .sidebar-footer {
        display: none
    }
}