/*
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the 
 * later versions of this theme. 
 * 
 * We advise that you use use this CSS to override 
 * SmartAdmin styles. 
 * 
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */

/*
 * INDEX
 * 
 * - HTML
 * - BODY
 * - CUSTOM STYLES
 */

/* -------------------------
GLOBAL STYLES
---------------------------*/

body {
    font-size: 13px !important;
    font-family: 'Open Sans', Arial, sans-serf;
}

a {
    color: #1174b6;
    text-decoration: none;
}

a:focus, a:hover {
    color: #01426a;
    text-decoration: none;
}

.txt-color-blue {
    color: #1174b6 !important
}

.txt-color-blueDark {
    color: #01426A !important;
}

.txt-color-black {
    color: #101212;
}

.txt-color-orange {
    color: #E87722 !important;
}

.txt-color-black {
    color: #101212;
}

.txt-color-green {
    color: #64A70B !important;
}

.txt-color-gray {
    color: #999999 !important;
}

.txt-color-grayDark {
    color: #333333 !important;
}

.txt-color-red {
    color: #fc1105;
}

.txt-color-white {
    color: #ffffff;
}

.txt-color-alert-danger {
    color: #c26565;
}

.txt-bold {
    font-weight: bold !important;
}

.txt-normal {
    font-weight: normal !important;
}

.bg-color-grayLight {
    background-color: #ebebeb !important;
}

.bg-color-bluestripe {
    background-color: #8DB9CA !important
}

.bg-color-mdbluestripe {
    background-color: #1174b6 !important
}

.bg-color-dkbluestripe {
    background-color: #01426A !important
}

.bg-color-orange {
    background-color: #e87722 !important
}

.bg-color-green {
    background-color: #64a70b !important
}


.page-title span {
    font-size: 24px !important;
}

.row {
    margin-right: -13px !important;
    margin-left: -13px !important;
}

/* -------------------------
HEADER STYLES
---------------------------*/

#logo {
    margin: 22px 0 0 15px;
}

#logo img, #extr-page #header #logo img {
    width: 176px;
}

#header, #extr-page #header {
    background: #101212 !important;
}

#extr-page #header.login, #header.login {
    height: 80px;
    min-height: 28px;
    background: #101212 !important
}

#left-panel {
    padding-top: 46px;
}

aside {
    background: #1174b6;
}

#fullscreen, #mobile-profile-img {
    margin: 2px 0 0 0;
}

.account-name {
    margin: 14px 0 0 0;
    color: #ffffff;
}

#hide-menu > :first-child > a {
    width: 39px !important;
    height: 39px;
}

.header-external {
    background: #101212 !important;
    height: 85px !important;
}

#header {
    z-index: 5;
}

#header .pull-right span#activity {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    cursor: default !important;
    display: inline-block;
    font-weight: 700;
    height: 30px;
    width: 30px;
    padding: 2px;
    text-align: center;
    text-decoration: none !important;
    -moz-user-select: none;
    -webkit-user-select: none;
    background-color: #f8f8f8;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f1f1f1));
    background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
    background-image: -moz-linear-gradient(top, #f8f8f8, #f1f1f1);
    background-image: -ms-linear-gradient(top, #f8f8f8, #f1f1f1);
    background-image: -o-linear-gradient(top, #f8f8f8, #f1f1f1);
    background-image: linear-gradient(top, #f8f8f8, #f1f1f1);
    border: 1px solid #bfbfbf;
    color: #c4bab6;
    font-size: 19px;
    margin: 10px 6px 0;
    position: relative;
}

#header .pull-right > span b.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    cursor: pointer;
    background: #0091d9;
    display: inline-block;
    font-size: 10px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    padding: 2px 4px 3px;
    text-align: center;
    line-height: normal
}

#header > :first-child, aside {
    width: 400px;
}

#header > :first-child.logo-external, aside {
    width: 200px;
}

#left-panel {
    z-index: 1;
}

/*used to hide user messaging icon in upper right*/
#activity {
    display: none !important;
    visibility: hidden !important;
}

.ajax-dropdown {
    left: auto;
    right: 29px !important;
    height: 455px;
}

.ajax-dropdown:after {
    left: 72%;
}

.ajax-dropdown:before {
    left: 72%;
}

.btn-header.pull-right {
    margin-left: 6px;
    margin-right: 6px;
}

.menu-on-top #mobile-profile-img {
    padding-right: 6px !important;
    padding-left: 6px !important
}

.dropdown-menu .divider {
    margin: 0 !important;
}

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    color: #fff;
    background-color: #1174b6;
}

.menu-on-top #mobile-profile-img a.userdropdown img {
    border: none !important;
}

/* -------------------------
LOGIN STYLES
---------------------------*/
.login-form, .forgot-pw, #validate-message {
    margin: 100px 0 0 0;
    background-color: #ffffff;
}

.reset-form {
    margin: 100px 0 0 0;
    background-color: #ffffff;
}

.prompt-text {
    color: #fff;
}

.client-form header {
    background: #1174b6;
    color: #fff;
}

.client-form header.error {
    background: #E87722;
}

.smart-form .checkbox input + i:after {
    color: #1174b6;
}

#extr-page h5.about-heading {
    margin: 20px 0 5px;
}

.reg-promo-img {
    margin: 15px 0 0 0;
}

#extr-page-header-space > :first-child {
    margin-top: 12px;
}

.smart-form .checkbox:hover i, .smart-form .input:hover input, .smart-form .radio:hover i, .smart-form .select:hover select, .smart-form .textarea:hover textarea, .smart-form .toggle:hover i {
    border-color: #1174b6;
}

.smart-form .checkbox input:focus + i, .smart-form .input input:focus, .smart-form .radio input:focus + i, .smart-form .select select:focus, .smart-form .textarea textarea:focus, .smart-form .toggle input:focus + i {
    border-color: #1174b6;
}

#login-message {
    margin: 175px 0 0 0;
}

.login-error, .login-success, .login-failed, .validate-message {
    padding: 0 10px 0 14px;
}

.login-success, .login-failed, .validate-message {
    margin: 20px 0 20px 0;
}

.reset-error {
    padding: 20px 0 0 14px;
    margin: 0;
}

.promo-block img {
    width: 100%;
    height: auto;
}

/* -------------------------
REGISTRATION AND SET-PROFILE STYLES
---------------------------*/

div.submitted {
    margin-top: 135px;
}

/* -------------------------
ACTIVATION SERIES STYLES
---------------------------*/

.activate-container {
    margin: 70px 0;
}

.activate-panel {
    min-height: 500px;
    background-color: #ebebeb;
    color: #101212;
    text-align: center;
    position: relative;
}

.activate-panel-header {
    background-color: #101212;
    color: #ffffff;
    text-align: center;
    padding: 15px 0 !important;
    margin: 0 0 45px 0;
}

.activate-panel p {
    text-align: left !important;
    margin: 10px 0 20px 0;
    padding: 19px;
}

.learn-button {
    width: 100%;
    position: absolute;
    bottom: 30px;
}

#appCloudModal .modal-body, #dataCloudModal .modal-body, #analyticsCloudModal .modal-body {
    padding: 0 !important;
}

#appCloudModal .close, #dataCloudModal .close, #analyticsCloudModal .close {
    color: #ffffff !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

#appCloudModal .row, #dataCloudModal .row, #analyticsCloudModal .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.modal-header {
    padding: 18px 15px !important;
    background-color: #101212;
    color: #ffffff;
}

.modal-footer {
    padding: 7px 15px !important;
    border-bottom: solid 8px #1174b6;
}

#appCloudModal .modal-panel, #appCloudModal .modal-panel-error {
    min-height: 310px;
    padding: 20px 20px 0 15px;
    height: 100%;
    text-align: center;
}

.modal-panel-error {
    text-align: left;
}

.modal-panel img {
    margin: 20px 0;
}

.modal-panel p, .modal-panel h3 {
    text-align: left;
}

.modal-panel .button-container {
    width: 100%;
    text-align: center;
    margin: 70px 0;
}

#activate-panel, #progress-panel {
    min-height: 300px;
}

#appCloudModal .modal-dialog, #dataCloudModal .modal-dialog, #analyticsCloudModal .modal-dialog {
    width: 800px !important;
    margin: 200px auto !important;
}

#progress-panel .progress {
    width: 80%;
    margin: 50px auto;
}

.panel-progress {
    width: 42%;
    margin: 0 auto;
}

.panel-progress-error {
    width: 100%;
    margin: 0 auto;
}

#error-panel h4 {
    color: #E87722;
}

/* -------------------------
NAV STYLES
---------------------------*/
nav ul li a {
    color: #ffffff;
}

.menu-on-top #main {
    margin-top: 88px !important;
}

.menu-on-top .external-editor #main {
    margin-top: 10px !important;
}

.menu-on-top aside#left-panel {
    border-top: none;
}

.menu-on-top aside#left-panel nav > ul > li:first-child {
    margin-left: 0;
    border-left: solid 1px #ffffff;
}

.menu-on-top aside#left-panel nav > ul > li:hover {
    background: #fff !important;
}

.menu-on-top aside#left-panel nav > ul > li:hover > a {
    color: #333 !important;
    border-left: solid 1px #fff !important;
    border-right: solid 1px #fff !important;
}

.menu-on-top aside#left-panel nav > ul > li {
    border-right: 1px solid white; /* This is the prop for the line color between each top level menu item */
    border-left: none;
}

.menu-on-top nav ul ul, .menu-on-top nav ul ul ul {
    border-bottom: 5px solid #1174b6;
}

.menu-on-top aside#left-panel nav > ul > li {
    height: 90px !important;
    min-width: 90px;
}

.menu-on-top aside#left-panel nav > ul > li > a {
    padding-top: 19px !important;
    padding-bottom: 71px !important;
    min-width: 90px;
}

.menu-on-top .menu-item-parent, span.menu-item-parent {
    max-width: 116px;
    overflow: visible !important;
    min-width: 74px;
}

nav ul span.inner-parent {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.menu-on-top .inner-parent + span {
    float: none !important;
    top: 5px;
    right: 5px;
    position: absolute
}

.menu-on-top nav > ul > li > a:after {
    color: #ffffff;
    top: 69% !important;
}

.hidden-menu #left-panel {
    z-index: 2;
}

nav ul .active {
    background-color: #1174b6;

}

nav ul li a:focus {
    color: #ffffff
}

nav ul .active > a, nav ul .active > a:before, nav ul .active > a:after {
    color: white !important;
}

nav ul .active > a {
    border-left-color: white !important;
    border-right-color: white !important;
}

/*********** Flyout Nav for External Editors ************/

#menu-toggle {
    color: #fff !important;
    font-size: 24px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    cursor: pointer;
}

.rotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

#config-nav {
    overflow: hidden;
    width: 420px;
}

#config-nav ul li {
    display: inline;
    list-style-type: none;
    font-family: "Open Sans", Arial;
    font-size: 16px;
    padding-right: 12px;
    padding-left: 12px;
}

#config-nav ul li a {
    color: #fff;
}

#config-nav ul li a.active, #config-nav ul li a:hover {
    color: #7eb0cd;
}

/* -------------------------
DASHBOARD-SPECIFIC STYLES
---------------------------*/
h3.dash-slide {
    margin-top: 0px !important;
    color: #01426a;
}

.popover-content {
    font-size: 13px;
}

.announcement-date {
    float: right;
    font-size: 11px;
    color: #01426a;
}

.config-table {
    margin: 0 0 30px;
}

.promo {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    text-align: center;
    font-size: 14px;
}

.promo img {
    width: 100%;
}

.dash-counter {
    display: inline !important;
    padding: 0 0 0 8px;
}

.ui-jqgrid .ui-jqgrid-bdiv {
    height: 320px !important;
}

#sparks li {
    overflow: visible !important;
}

/* -------------------------
ADMIN STYLES
---------------------------*/
/* Menu Builder */
.remove {
    float: right;
}

.editable-menu-item {
    display: block;
    margin-bottom: 5px
}

.editable-menu-item span {
    width: 70px;
    display: inline-block
}

.dd3-handle, .dd-item > button[data-action=collapse]:before, .dd-item > button:before {
    z-index: 3;
}

#add-catalog-item {
    float: right;
}

/* Stripe Plan and App Package forms */
#settingsTab, #stripeTab {
    padding: 5px 20px;
    display: inline-block;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    border-top: solid 1px #ccc;
    border-radius: 10px 10px 0 0 ;
}

#settingsTab:hover, #stripeTab:hover {
    cursor: pointer;
    color: #8db9ca;
}

#settingsTab.active, #stripeTab.active {
    background: #1174b6;
    border-left: solid 1px #1174b6;
    border-right: solid 1px #1174b6;
    border-top: solid 1px #1174b6;
    color: #fff;
}

/* -------------------------
PROFILE-SPECIFIC STYLES
---------------------------*/
#grav-prof-img {
    float: left;
    padding: 0 10px 0 0;
}

#grav-prof-img img {
    padding: 5px 10px 40px 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;

}

.change-pw {
    float: left;
    margin: 0 0 20px 0;
}

.license-info {
    width: 100%;
    float: left;
    padding: 20px 0 0 0;
    margin: 20px 0 0 0;
    border-top: dashed 1px #d6d6d6;
}

h3.myprofile {
    margin: 0 0 10px 0;
}

.profile-list {
    float: left;
    padding: 0;
    margin: 0 55px 0 10px;
}

.profile-list li, .license-list li {
    list-style-type: none;
    margin: 0 0 12px 0;
    font-size: 14px;
}

.license-list {
    padding: 0 0 20px 0;
}


/* -------------------------
ACCOUNT SETTINGS PAGE STYLES
---------------------------*/

#addRemoveModal {
    top: 200px !important;
}

#addRemoveModal .modal-header {
    padding: 10px 15px !important;
}

#addRemoveModal .modal-panel {
    min-height: 50px;
    padding: 20px 20px 0 15px;
    height: 100%;
}


/* -------------------------
TABLE STYLES
---------------------------*/
.jarviswidget-color-blueDark > header {
    background: #01426a;
}

.jarviswidget-color-blueDark > header {
    border-color: #01426a !important
}

.txt-color-blueDark {
    color: #01426a !important
}

.table-action {
    margin: 0 15px 0 0;
    cursor: pointer;
}

#jqgrid_iladd {
    display: none;
    visibility: hidden;
}

.ui-jqgrid .ui-jqgrid-titlebar {
    padding: 10px 13px;
    font-size: 12px;
    background-color: #01426a;
    background-image: none;
}

.ui-jqgrid .ui-jqgrid-title {
    font-size: 15px;
    color: #fff;
}

.ui-icon-circle-triangle-n {
    display: none;
    visibility: hidden;
}

.table > tbody > tr.info > td, .table > tbody > tr.info > th, .table > tbody > tr > td.info, .table > tbody > tr > th.info, .table > tfoot > tr.info > td, .table > tfoot > tr.info > th, .table > tfoot > tr > td.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > thead > tr.info > th, .table > thead > tr > td.info, .table > thead > tr > th.info {
    background-color: #101820
}

.table > tbody > tr.success > td, .table > tbody > tr.success > th, .table > tbody > tr > td.success, .table > tbody > tr > th.success, .table > tfoot > tr.success > td, .table > tfoot > tr.success > th, .table > tfoot > tr > td.success, .table > tfoot > tr > th.success, .table > thead > tr.success > td, .table > thead > tr.success > th, .table > thead > tr > td.success, .table > thead > tr > th.success {
    background-color: #40c353
}

.table > tbody > tr.warning > td, .table > tbody > tr.warning > th, .table > tbody > tr > td.warning, .table > tbody > tr > th.warning, .table > tfoot > tr.warning > td, .table > tfoot > tr.warning > th, .table > tfoot > tr > td.warning, .table > tfoot > tr > th.warning, .table > thead > tr.warning > td, .table > thead > tr.warning > th, .table > thead > tr > td.warning, .table > thead > tr > th.warning {
    background-color: #e3e31f
}

.table > tbody > tr.danger > td, .table > tbody > tr.danger > th, .table > tbody > tr > td.danger, .table > tbody > tr > th.danger, .table > tfoot > tr.danger > td, .table > tfoot > tr.danger > th, .table > tfoot > tr > td.danger, .table > tfoot > tr > th.danger, .table > thead > tr.danger > td, .table > thead > tr.danger > th, .table > thead > tr > td.danger, .table > thead > tr > th.danger {
    background-color: #c53e3e
}

/* -------------------------
BUTTON STYLES
---------------------------*/
.btn-primary {
    color: #fff;
    background-color: #1174b6;
    border: none;
}

.btn-primary.active, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #587B90;
    border: none;
}

.btn-secondary {
    color: #fff;
    background-color: #101212;
    border: none;
}

.btn-secondary.active, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover, .open > .dropdown-toggle.btn-secondary {
    color: #fff;
    background-color: #585C63;
    border: none;
}

.btn-success {
    color: #fff;
    background-color: #64A70B;
    border: none;
}

.btn-success.active, .btn-success:active, .btn-success:focus, .btn-success:hover, .open > .dropdown-toggle.btn-success {
    color: #fff;
    background-color: #587E2F;
    border: none;
}

.btn-info {
    color: #fff;
    background-color: #01426a;
    border: none;
}

.btn-info.active, .btn-info:active, .btn-info:focus, .btn-info:hover, .btn-info:active:hover .open > .dropdown-toggle.btn-info {
    color: #fff !important;
    background-color: #012f4c !important;
    border: none;
}

.btn-featured {
    color: #fff;
    background-color: #1174b6;
    border: none;
}

.btn-featured.active, .btn-featured:active, .btn-featured:focus, .btn-featured:hover, .open > .dropdown-toggle.btn-featured {
    color: #fff;
    background-color: #0E5D92;
    border:none;
}

.btn-private {
    color: #fff;
    background-color: #101212;
    border: none;
}

.btn-private:hover {
    color: #fff;
    background-color: #40464D;
}

.btn-disabled {
    color: #ACAEB1;
    background-color: #585C63;
    border: none;
}

.btn-cancel {
    color: #ffffff;
    background-color: #bdc0c1;
    border: none;
}

.btn-cancel.active, .btn-cancel:active, .btn-cancel:focus, .btn-cancel:hover, .open > .dropdown-toggle.btn-cancel {
    color: #ffffff;
    background-color: #bdc0c1;
    border: none;
}

.btn-cancel-white {
    color: #101212;
    background-color: #fff;
    border: solid 1px #999;
    padding: 5px 12px !important;
}

.btn-cancel-white.active, .btn-cancel-white:active, .btn-cancel-white:hover {
    color: #101212;
    background-color: #e6e6e6;
    border: solid 1px #999;
    padding: 5px 12px !important;
}


.btn-twilio {
    color: #fff;
    background-color: #F22F46;
    border: none;
}

.btn-twilio:hover {
    background-color: #f4576a;
    color: #fff;
}

.btn-margin-10 {
    margin: 10px 0 10px 0 !important;
}

.btn-padding-17 {
    padding: 6px 17px;

}

.onoffswitch {
    width: 73px;
    background-image: none;
}

.onoffswitch-inner:before {
    text-shadow: none;
    background-color: #64A70B;
    box-shadow: none;
}

.onoffswitch-inner:after {
    text-shadow: none;
    background-color: #ebebeb;
    color: #999;
    box-shadow: none;
}

.onoffswitch-switch {
    right: 56px;
    background-image: none;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch:before {
    color: #64A70B;
}

.onoffswitch-checkbox:checked:disabled + .onoffswitch-label .onoffswitch-switch, .onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-switch {
    background-color: #f4f4f4;
    background-image: none;
    box-shadow: none !important
}

.onoffswitch-checkbox:checked + .onoffswitch-label {
    border: none;
}

.elq-cred-toggle {
    width: 100%;
}

.testing-toggle {
    width: 10%;
}

/*********** Twilio Button Styles ************/
.twilio-connect-button {
    background: url(https://www.twilio.com/bundles/connect-apps/img/connect-button.png);
    width: 130px;
    height: 34px;
    display: block;
}

.twilio-connect-button:hover {
    background-position: 0 34px;
}

/*********** Bootstrap Switch overrides ************/
span.bootstrap-switch-handle-on.bootstrap-switch-primary {
    border: none !important;
    background-image: none !important;
    background-color: #64A70B !important;
}

.bootstrap-switch {
    margin: 0 0 0 15px;
}

.bootstrap-switch.bootstrap-switch-focused {
    border-color: #ffffff;
    outline: 0;
    outline: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/* -------------------------
DROPDOWN BANNER STYLES
---------------------------*/
#slidedown-error-banner {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    background: #E87722;
    color: #fff;
    text-align: center;
    line-height: 4.5;
    overflow: hidden;
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}

#slidedown-error-banner .banner-close {
    position: absolute;
    top: -17px;
    right: 10px;
    color: #fff;
    cursor: pointer;
}

.slidedown-banner {
    position: fixed;
    z-index: 999;
    min-height: 85px;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    overflow: hidden;
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}

.slidedown-content {
    padding: 0 20px 10px 20px;
}

.slidedown-banner.expired {
    color: #826430;
    background: #efe1b3;
}

.slidedown-banner.expired a, .slidedown-banner.expired a:link, .slidedown-banner.expired a:hover, .slidedown-banner.expired a:active {
    color: #826430;
    font-weight: bold;
    text-decoration: underline;
}

.slidedown-banner.inactive a, .slidedown-banner.inactive a:link, .slidedown-banner.inactive a:hover, .slidedown-banner.inactive a:active {
    color: #fff;
    font-weight: bold;
    text-decoration: underline;
}

.slidedown-banner.inactive {
    color: #fff;
    background: #c26565;
}

.slidedown-banner.expired a.banner-close {
    position: absolute;
    top: 0;
    right: 10px;
    color: #826430;
    cursor: pointer;
}

.slidedown-banner.expired .slidedown-header {
    width: 100%;
    height: 19px;
    float: right;
    background-color: #e4cd81;
    margin: 0 0 15px 0;
}

.slidedown-banner.inactive .slidedown-header {
    width: 100%;
    height: 19px;
    float: right;
    background-color: #b64949;
    margin: 0 0 15px 0;
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(100,100,100,0.5);
    z-index: 100;
}

/* -------------------------
APP-LIST SPECIFIC
---------------------------*/
.box {
    position: relative;
    margin: 0 0 20px 0;
}

.app-go {
    position: absolute !important;
    bottom: 10px;
    left: 19px;
}

.fees {
    position: absolute;
    bottom: 10px;
    right: 20px;
    color: #949494;
    font-size: 12px;
    width: 38%;
}

.statusLicense{
    position: absolute; !important;
    bottom: 5px;
    left: 80px;
}

.statusLicense p {
    color: orangered;
    font-size: 17px;
}

.configs {
    position: absolute;
    bottom: 2px;
    right: 20px;
}

.configs p {
    color: #949494;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 5px 0 !important;
}

.configs a, .configs span {
    color: #01426a;
    text-decoration: none;
    font-size: 16px;
}

.app-go:active {
    top: auto;
    left: auto;
}

.my-apps h2, .featured-apps h2 {
    font-size: 19px !important;
    color: #ffffff;
}

.my-apps {
    background: #01426a !important;
    border: none !important;
}

.featured-apps {
    background: #1174b6 !important;
    border: none !important;
}

.jarviswidget > div.featured-apps-widget {
    border-width: 3px;
    border-style: solid;
    border-top: none;
    border-right-color: #1174b6 !important;
    border-bottom-color: #1174b6 !important;
    border-left-color: #1174b6 !important;
}

.jarviswidget > div.my-apps-widget {
    border-width: 3px;
    border-style: solid;
    border-top: none;
    border-right-color: #01426a !important;
    border-bottom-color: #01426a !important;
    border-left-color: #01426a !important;
}

.my-apps-widget .popover {
    width: 300px;
}

.content-dynamic a {
    color: #333333;
    text-transform: uppercase;
}

.form-container {
    padding: 10px 20px;
}

/* -------------------------
REQUEST INFO OR SUBSCRIBE FLYOUT
---------------------------*/

#card-element {
    background: #fff;
    padding: 5px 10px;
    border: solid 1px #bdbdbd;
}

#card-errors {
    color: #e87722;
    margin: 0 0 10px 0;
    font-size: 11px;
}

/* -------------------------
APP-PAGE SPECIFIC (Eloqua)
---------------------------*/
.app-desc, .ocm-app-desc {
    position: relative;
}

.vertical-align {
    /*border: solid 1px blue;*/
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.vertical-align button, .vertical-align a button {
    display: block;
}

.sent-success {
    padding: 10px 5px 10px 10px;
    border: solid 1px #999;
    margin: 20px 0 0 0;
}

.sent-success p {
    width: 100% !important;
}

/* -------------------------
APP-PAGE SPECIFIC (OCM)
---------------------------*/
.import-tools-datatype {
    min-height: 80px;
    padding: 30px 0;
    text-align: center;
    font-size: 14px;
    border-left: solid 1px #999;
}

.first-group .import-tools-datatype:first-child {
    border-left: none;
}

.import-tools-datatype i {
    margin: 0 8px 0 0;
}

.import-tools-datatype a, .import-tools-datatype a:hover, .import-tools-datatype a:active, .import-tools-datatype a:visited {
    color: #333;
    cursor: pointer;
    text-decoration: none;
}

#view-metadata .cd-panel-container, #view-metadata .cd-panel-header {
    width: 85%;
}

#view-metadata .dt-buttons {
    margin: 0 0 10px 0;
    width: 100%;
}

.dataTables_filter .input-group-addon {
    height: 34px !important;
}

#view-metadata .cd-panel-header h1 {
    padding-left: 1% !important;
}

.view-metadata {
    padding: 20px 10px;
}

#tables-container table td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 70px !important;
    word-wrap: break-word;
}

.btn-group, .refresh {
    margin: 3px 0 0 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: none !important;
}

/* -------------------------
DATATABLES
---------------------------*/
table.DTCR_clonedTable {
    z-index: 1000;
}

div.DTCR_pointer {
    z-index: 999;
}

table.dataTable.nowrap th, table.dataTable.nowrap td {
    white-space: nowrap
}

table.dataTable.nowrap th, table.dataTable.nowrap td {
    white-space: nowrap
}

table.dataTable th.dt-nowrap, table.dataTable td.dt-nowrap {
    white-space: nowrap
}

table.dataTable thead th.dt-head-nowrap, table.dataTable thead td.dt-head-nowrap, table.dataTable tfoot th.dt-head-nowrap, table.dataTable tfoot td.dt-head-nowrap {
    white-space: nowrap
}

table.dataTable tbody th.dt-body-nowrap, table.dataTable tbody td.dt-body-nowrap {
    white-space: nowrap
}

table.dataTable.no-footer {
    border-bottom: none;
}

.dataTables_scrollHeadInner {
    width: 100% !important;
}

.dataTables_filter {
    width: auto !important;
}

.dataTables_filter .input-group-addon {
    height: 34px !important;
}

.dataTables_length {
    float: right;
}

.dataTables_info {
    width: 30%;
    float: left;
}

div.dataTables_paginate {
    padding-top: 9px;
}

.dt-button-collection li.active a, .dt-button-collection li.active a:hover, .dt-button-collection li.active a:focus, .dt-button-collection li a, .dt-button-collection li a:hover, .dt-button-collection li a:focus {
    height: 35px;
    padding: 8px 10px !important;
    border-bottom: solid 1px #333;
    font-weight: 400 !important;
}

.dt-button-collection li.active a, .dt-button-collection li.active a:hover {
    color: #fff;
}

.dt-button-collection li.active a:hover, .dt-button-collection li.active a:focus {
    color: #fff;
    background-color: #337ab7 !important;
}

.dt-button-collection li a:focus, .dt-button-collection li a:hover {
    background-color: #fff !important;
    color: #262626;
}

.buttons-colvisRestore a {
    border-bottom: none !important;
}

/* -------------------------
APP REPORTING
---------------------------*/
.status-content {
    background-color: #ffffff;
    color: #101212;
    padding: 15px;
}

.status-content h4 {
    text-align: center;
}

.status-header {
    background-color: #101212;
}

.status-header h3 {
    color: #ffffff;
    padding: 5px 0 5px 15px;
    margin: 0 !important;
}

.report-status {
    margin: 15px 0;
}

.report-refresh {
    margin: 10px 0;
    text-align: right;
}

/* -------------------------
WIZARD STYLES
---------------------------*/
.wiz-add-cred {
    margin: 9px 0 0 0;
    display: inline-block;
}

.disabled-label, .disabled {
    color: #cccccc !important;
}

.wiz-acc {
    margin: 40px 30px 25px 15px;
}

.wiz-acc-panel-heading {
    height: 2.6em;
    position: relative;
    z-index: 1;
}

.wiz-acc-panel-title {
    line-height: 1.1 !important;
}

.panel-heading.active {
    background-color: #101212;
}

.panel-heading.active h4 {
    color: #ffffff;
}

.panel-default > .panel-heading {
    color: #999999;
}

.panel-default > .configured {
    background-color: #f5f5f5;
    color: #1174b6;
}

.wiz-acc-panel .divider {
    border-bottom: dashed 1px #999999;
    margin: 20px 0;
}

.wiz-acc-panel-btn {
    float: right;
    margin: 25px 0 0 0;
}

.wiz-acc-panel-btn button {
    margin: 0 0 0 10px;
}

.wiz-acc-panel-btn-next {
}

.wiz-acc-panel-content h2 {
    font-size: 22px;
    font-weight: bold;
}

.wiz-acc-panel-content h2.h2-large {
    font-size: 30px;
    font-weight: normal;
}

.wiz-acc-panel-content p {
    font-size: 14px;
    width: 75%;
}

/*************** wizard form styles **************/
form label[class="toggle"] {
    margin: 0 0 35px 0 !important;
    min-height: 1px;
    width: 1%;
}

.wiz-acc .smart-form label {
    font-size: 15px;
}

.label-lg {
    font-size: 17px;
    font-weight: bold;
    margin: 0 0 15px 0;
}

.appender {
    color: #E87722;
}

label.no-padding {
    padding: 0 !important;
}

.bg-gray {
    background-color: #ebebeb !important;
}

.bg-brilliant-blue {
    background-color: #1174b6 !important;
}

.no-image {
    background-image: none !important;
}

.bg-grayDark {
    background-color: #333333;
}

.bg-white {
    background-color: #ffffff !important;
}

.bg-black {
    background-color: #101212 !important;
}

.bg-grid {
    background-image: url(/img/r1/tiny_grid.png);
    background-repeat: repeat;
}

.instructions {
    float: left;
    width: 35%;
}

article.form-container {
    position: relative;
}

.check {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ffffff;
    background-color: #64A70B;
}

.dropdown-menu .divider {
    height: 1px;
    margin: 8px 0;
    overflow: hidden;
    background-color: #ffffff;
    border-bottom: 1px solid #999999;
}

.wiz-acc .smart-form fieldset {
    padding: 10px 14px 10px;
}

.smart-form fieldset + fieldset {
    border-top: none !important;
}

fieldset.fixed-height-scroll {
    height: 360px;
    overflow: scroll;
}

.smart-form .label-popover i {
    font-size: 16px;
    margin: 0 0 0 5px;
}

.smart-form .txt-color-black:hover {
    color: #101212;
}

.smart-form .popover-content {
    padding: 5px !important;
}

.smart-form .popover h3 {
    display: none !important;
}

/*************** test button styles **************/

.test_btn {
    margin-bottom: 8px !important;
}

.test-processing, .test-success {
    display: inline-block;
    margin-left: 10px;
}

.test-invalid, .test-error {
    color: #E87722;
    font-family: 'Open Sans', Arial, sans-serf;
    font-size: 11px !important;
    font-style: normal;
}

.run_btn {
    margin-bottom: 8px !important;
}

.run-processing {
    display: inline-block;
    margin-left: 10px;
}

.run-button {
    text-align: center;
}

/************** list selector plugin ******************/
#target ul.list-selector, #source ul.list-selector {
    border: solid 1px #cccccc;
    overflow: scroll;
    background-color: #f5f5f5;
}

#source ul.list-selector {
    height: 400px;
}

#target ul.list-selector {
    height: 90px;
}

#source h3, #target h3 {
    margin: 0 0 15px 0;
}

li.list-selector-item, li.dnd-editor-item {
    list-style-type: none;
    padding: 8px 8px;
}

li.list-selector-item:hover, li.dnd-editor-item:hover {
    cursor: move;
    background-color: #e5e5e5;
}

em[for="listSelector"] {
    display: block;
    float: left;
    width: 300px;
    margin: 0 0 0 20px;
}

/*************** html editor plugin *************/
#editor, #reminderEditor {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 400px;
}

.smart-form h3.no-margin {
    margin: 0;

}

/***************** dropzone plugin *******************/
.dropzone .dz-preview.dz-error .dz-error-mark,
.dropzone-previews .dz-preview.dz-error .dz-error-mark {
    display: none !important;
}

.dropzone, td.fc-other-month {
    background: none !important;
}

.file-preview {
    overflow-x: scroll;
    overflow-y: scroll;
    height: 320px;
}

.dz-details {
    display: none !important;
}

.dropzone .dz-message {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    text-align: center;
    color: #75b0CD;
    font-size: 30px;
    height: 235px;
    background-color: #f5f5f5;
    background-image: url(../../img/r1/tiny_grid.png);
    background-repeat: repeat;
    line-height: 38px;
    padding: 150px 0 0 0;
}

.dropzone .dz-preview {
    margin: 0 !important;
    width: 98%;
    min-height: 320px;
    overflow: scroll;
}

.dropzone .dz-preview table {
    padding: 5px;
    width: 100%;
}

.dropzone .dz-preview table td {
    padding: 13px !important;
}

.dropzone .dz-preview button {
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 20px;
    text-align: center;
    background-color: #313131;
    background-image: none;
    color: #ffffff;
    border: none !important;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.dropzone .dz-preview .dz-error-message,
.dropzone-previews .dz-preview .dz-error-message {
    top: 0 !important;
    left: 100px !important;
}

.dropzone .dz-preview .dz-error-message,
.dropzone-previews .dz-preview .dz-error-message {
    background: none;
}

.dropzone .dz-preview .dz-success-mark,
.dropzone-previews .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark,
.dropzone-previews .dz-preview .dz-error-mark {
    width: 50px !important;
    height: 50px !important;
    right: -15px !important;
    top: 0px !important;
}

/********** styles specific to ocm ************/
#ocmDropzone .btn-container {
    width: 98%;
    padding: 10px 6px;
    background: #666;
    border: solid 1px #666;
}

#ocmDropzone .dz-error-message {
    opacity: 1 !important;
    padding: 0 !important;
    text-align: center;
    width: 100% !important;
    position: static !important;
    margin: 100px auto 0;
    display: block;
    color: #E87722 !important;
    font-size: 18px;
}

#ocmDropzone .dz-preview table > tr:nth-of-type(odd) {
    background: #ebebeb;
}


#ocmDropzone .dz-preview table tr:first-child {
    background-color: #666;
    color: #fff;
}

#ocmDropzone .dz-progress {
    width: 0;
    margin: 0 auto;
}

#ocmDropzone .errorMsg {
    color: #E87722;
    margin: 0 0 0 10px;
}

#ocmMapper .visual-mapper-list-container:first-child {
    padding: 15px 0 15px 10%;
}

#summaryDetails {
    list-style: none;
    padding: 20px 27px;
    font-size: 14px;
}

#summaryDetails li {
    margin: 4px 0;
}

#addOcmCred, #ocmCredSelect {
    padding: 20px 15px;
}

#filterCriteria .remove-row, #userLoaderMapping .remove-row, #userExporterFilterCriteria .remove-row {
    margin: 20px 5% 0 0 !important;
}

/********** add-remove plugin ************/
.row-number {
    width: 25px;
    text-align: center;
    background-color: #1174b6;
    color: #fff;
    line-height: 52px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.control-label {
    float: left;
    margin-left: 17px;
}

.remove-row {
    font-size: 16px;
    margin: 15px 4% 0 0;
    display: inline-block;
    float: right;
}

.config-label {
    margin-left: 15px;
}

.match-logic-progress-wheel {
    margin: 0 0 0 10px;
}

.add-remove-refresh {
    float: right;
    margin: -20px 0 0 0;
    background-color: #1174b6;
}

.add-remove-refresh:active {
    position: inherit !important;
    -webkit-box-shadow: none !important;
    top: 0 !important;
    left: 0 !important;
}

.add-remove-refresh:hover, .add-remove-refresh:visited, .add-remove-refresh:focus {
    color: #fff !important;
}

.add-remove-progress {
    position: absolute;
    top: 6px;
    right: 5px;
}

.add-remove-progress img {
    width: 14px;
    height: 14px;
}

.add-row-header {
    padding: 10px 0 10px 10px !important;
    background-color: #1174b6;
    color: #fff;
    position: relative
}

.addRemove span.select2-container {
    min-width: 0 !important;
}

/********** row-mapper-plain plugin ************/
.delete-row {
    font-size: 16px;
    display: inline-block;
}

.row-mapper-container {
    padding:20px 10px;
    border: solid 1px #ccc;
}

/******** visual mapper plugin **********/
.visual-mapper .yui3-dd-proxy {
    text-align: left;
}

.visual-mapper-li .yui3-dd-draggable {
    border: 1px solid #BDBDBD;
    padding: 12px 15px;
}

.title-container {
    position: relative;
}

.visual-mapper-title {
    font-size: 15px;
}

.mapper-refresh {
    float: right;
    margin: -22px 0 0 0;
    background-color: #101212;
}

.refresh-progress {
    position: absolute;
    top: 15px;
    right: 15px;
}

.visual-mapper ul.visual-mapper-target.yui3-dd-drop-over {
    border: 2px solid #BDBDBD;
}

.visual-mapper ul.visual-mapper-target li.yui3-dd-drop, .visual-mapper ul.visual-mapper-source li.yui3-dd-draggable {
    border: 1px solid #BDBDBD;
    padding: 12px 15px;
    font-size: 13px;
}

.visual-mapper ul.visual-mapper-target li.yui3-dd-drop-over {
    background-color: #88BADA;
}

.visual-mapper ul.visual-mapper-target li.yui3-dd-drop-over.visual-mapper-connected {
    background-color: #C4C7CA !important;
    color: #D8DADB !important;
}

.visual-mapper-lines {
    width: 300px;
    height: 305px;
    position: relative;
    float: left;
    margin-top: 55px;
}

.visual-mapper-lines.external {
    width: 200px;
}

.visual-mapper:after {
    display: block;
    clear: both;
    visibility: hidden;
    content: '.';
    height: 0;
}

.visual-mapper {
    padding: 5px;
    margin: 5px;
    position: relative;
    width: auto;
}

.visual-mapper ul.visual-mapper-container {
    height: 300px;
    position: relative;
    overflow: auto;
}

.visual-mapper ul.visual-mapper-sub {
    padding-left: 0;
}

.visual-mapper ul.visual-mapper-source, .visual-mapper ul.visual-mapper-target {
    margin-right: 0;
    padding: 0 !important;
}

.visual-mapper ul li {
    background: #ffffff;
    list-style-type: none;
    padding: 12px 15px;
    cursor: move;
    zoom: 1;
    color: #333;
    position: relative;
    width: auto;
    border: 1px solid #BDBDBD;
}

input.visual-mapper-add-edit {
    color: #333;
}

.visual-mapper-connected {
    background: #1174b6 !important;
    color: #fff !important;
}

.visual-mapper-delete-btn {
    float: right;
}

.visual-mapper-list-container {
    float: left;
    width: 30%;
    padding: 15px 0 15px 0;
}

.visual-mapper-list-container:first-child {
    padding: 15px 0 15px 30px;
}

.visual-mapper li.visual-mapper-truncate {
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

input.visual-mapper-add {
    margin: 0;
    line-height: 22px;
}

h4.static {
    float: left;
}

.visual-mapper-collapse, .visual-mapper-add, .visual-mapper-collapse-show {
    margin: 0 0 5px 10px;
    padding: 0 8px;
}

ul.visual-mapper-add, li.visual-mapper-add {
    margin: 0;
    padding: 0 8px;
}

.visual-mapper-delete-btn {
    padding: 0 5px;
}

.visual-mapper-add-all-btn {
    margin: 8px 0;
}

.visual-mapper-add-error {
    color: #e87722;
    margin: 5px 0 0 0;
    padding: 0;
    font-size: 11px;
}

input.visual-mapper-add-error {
    border: solid 1px #e87722;
    color: #000;
}

input.visual-mapper-add.valid {
    border: rgb(238, 238, 238);

}

.folder-browser-tree {
    max-height: 400px;
    overflow: scroll;

}

.title-container {
    background-color: #101212;
    color: #ffffff;
    padding: 10px;
}

.mapper-progress {
    height: 300px;
    text-align: center;
}

.mapper-progress img {
    margin: 100px 0 0 0;
}

/******** oauth selector plugin **********/
.authorized, .auth {
    color: #64a70b;
    text-transform: uppercase;
}

.notvalid, .used {
    color: #cc2900;
    text-transform: uppercase;
}

.add {
    color: #E87722;
    text-transform: uppercase;
}

/******** multi date picker plugin **********/
#ui-datepicker-div:empty {
    border: none;
}

.ui-datepicker {
    font: 12pt Arial, sans-serif;
}

.ui-datepicker-title {
    text-align: center;
    line-height: 30px;
}

.ui-datepicker-prev, .ui-datepicker-next {
    cursor: pointer;
    padding: 5px;
}

.ui-datepicker-prev {
    float: left;
}

.ui-datepicker-next {
    float: right;
}

.ui-datepicker thead {
    background-color: #f7f7f7;
}

.ui-datepicker th {
    font-size: 8pt;
    color: #666666;
    text-align: center;
    height: 30px;
    line-height: 30px;
}

.ui-datepicker-prev-hover, .ui-datepicker-next-hover {
    background: transparent !important;
}

.ui-datepicker tbody td {
    padding: 0;
    border: none;
}

.ui-datepicker a {
    text-decoration: none;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #ffffff;
}

.ui-datepicker {
    z-index: 100 !important;
}

.ui-datepicker .ui-datepicker-header, .ui-widget-header {
    background: #101212;
    color: #fff;
}

.ui-icon-circle-triangle-w {
    background-image: url('../../img/r1/arrow-right.png') !important;
    background-repeat: repeat;
}

.ui-icon-circle-triangle-e {
    background-image: url('../../img/r1/arrow-left.png') !important;
    background-repeat: repeat;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: none;
}

.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev {
    color: transparent;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight, a.ui-state-default.ui-state-highlight {
    background: #1174b6;
    border: #d3d3d3;
    color: #fff;
}

a.ui-state-default, a.ui-state-default.ui-state-highlight {
    color: #fff;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: none;
}

/******** character counter ******/
.warning-exceed-charLimit {
    color: #E87722 !important;
}

/******** summary panel **********/
#summary article {
    padding-bottom: 30px;
}

#summary h2 {
    margin: 10px 0 20px 0;
}

#form-summary {
    padding-right: 40px;
}

.action-box-header {
    background-color: #101212;
}

.action-box-header h3 {
    color: #ffffff;
    margin: 10px 0 10px 15px !important;
}

.action-box-content {
    background-color: #ebebeb;
    color: #101212;
    padding: 15px;
    min-height: 160px;
}

#summaryData li {
    list-style-type: none;
}

/* -------------------------
EXTERNAL EDITOR CLASSES
---------------------------*/
div.app-name-external {
    /*width: 450px;*/
    text-align: right;
}

.external.table {
    background-color: #d9d9d9 !important;
}

.external .table-action {
    color: #1174b6;
}

/* -------------------------
WIDGET CLASSES
---------------------------*/
.resource-list {
    list-style-type: none;
    padding: 0;
}

.jarviswidget-color-r1blueLight > header {
    background: #1174b6;
    color: #FFF;
}

.jarviswidget-color-r1brilliantBlue > header {
    background: #1174b6;
    color: #FFF;
}

.jarviswidget-color-darken > header {
    background: #00456B;
    color: #FFF;
    border: 1px solid #C2C2C2;
}

.jarviswidget-color-darken > header {
    border-color: #C2C2C2 !important
}

/* -------------------------
MESSAGING AND ERRORS
---------------------------*/
.smart-form .checkbox.state-error i, .smart-form .radio.state-error i, .smart-form .state-error input, .smart-form .state-error select, .smart-form .state-error textarea, .smart-form .toggle.state-error i {
    background: #fff;
    border-color: #E87722;
}

.smart-form .state-error + em {
    color: #E87722;
}

.state-error .icon-append, .state-error .icon-prepend {
    color: #E87722;
}

#error-404, #error-500, #error-401 {
    text-align: center;
    margin: 40px 0 0 0;
}

#error-404 img, #error-500 img {
    margin: 10px auto;
}

ul.notValid, div.notValid {
    border: solid 1px #E87722 !important;
}

.invalid {
    color: #E87722 !important;
    font-family: 'Open Sans', Arial, sans-serf;
    font-size: 11px !important;
    font-style: normal;
}

/*specific to Admin User slideout*/
em[for="add-accounts"].invalid {
    margin: -10px 0 10px;
}

.r1-alert-danger {
    border-color: #E87722 !important;
    background: #ee9c5d !important;
}

/* -------------------------
R1 BLOCKING LOADER/SPINNER
---------------------------*/
.r1-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999;
    background-color: rgba(0,0,0,0.6);
}

.r1-loader, .r1-loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

.r1-loader {
    margin: 300px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.8);
    border-right: 1.1em solid rgba(255, 255, 255, 0.8);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.8);
    border-left: 1.1em solid #1174b6;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* -------------------------
FLYOUT PANELS
---------------------------*/
.cd-panel, .cd-panel-edit, .cd-panel-add {
    z-index: 999;
}

.cd-panel-container {
    z-index: 10;
}

.cd-panel-add.is-visible::after {
    background: rgba(0, 0, 0, 0.6);
    -webkit-transition: background 0.3s 0s;
    -moz-transition: background 0.3s 0s;
    transition: background 0.3s 0s;
    content: '';
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.cd-panel-content h1 {
    font-weight: bold;
    font-size: 32px;
}

.cd-panel-content h6 {
    font-size: 16px !important;
    font-weight: normal !important;
    margin: 10px 0 0 0 !important;
}

.cd-panel-content p {
    font-size: 12px;
    color: #333333;
    margin-top: 10px !important;
}

/* specific styles for flyout on install pages */
.for-install {
    width: 75% !important;
}

#eloqua .divider, #salesforce .divider {
    margin-right: 0 !important;
}

/* -------------------------
GENERAL FORM STYLES
---------------------------*/
/*.smart-form h3 {*/
/*margin: 30px 0 15px 0;*/
/*font-weight: 100;*/
/*}*/

.smart-form .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1.42857143;
    border-radius: 2px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.smart-form {
    color: #333;
}

.smart-form .btn-sm {
    padding: 0px 5px 2px;
}

.smart-form input.input-sm {
    height: 32px;
}

.smart-form .col-11 {
    width: 90%
}

.smart-form .col-12 {
    width: 100%
}

.save-success-right, .save-failed-right, .progress-right {
    display: inline;
    margin: 0 0 0 8px;
}

.save-success, #save-success {
    font-size: 14px;
    color: #64A70B;
}

.save-success-topright {
    text-align: center;
    position: absolute;
    top: -8px;
    right: 8px;
    z-index: 4;
}

.save-failed, #save-failed {
    font-size: 14px;
    color: #E87722;
}

.save-success-left, .save-failed-left, .progress-left {
    float: right;
    margin: 15px 0 0 0;
}

.next-processing {
    float: left;
    margin: 5px 5px 0 0;
}

.next-processing-error {
    color: #E87722;
}

.next-processing-success {
    color: #64A70B;
}

.smart-form .toggle {
    font-size: 13px;
}

#elqIpaddressAdd, #elqIpaddressEdit, #sfIpaddressAdd, #sfIpaddressEdit {
    margin: 0 !important;
    float: left;
    width: 40%;
}

.ipaddress-check {
    float: left;
    width: 50%;
}

/*-----------------------
Titatoggle Overrides
-----------------------*/
.checkbox-slider--default.checkbox-slider-md input + span:before {
    width: 90px;
}

.checkbox-slider--default input + span:after {
    background: #64A70B !important;
    border: none !important;
}

.checkbox-slider--a input:checked + span:after, .checkbox-slider--default input:checked + span:after {
    background: #64A70B !important;
}

.checkbox-slider--a input + span:after, .checkbox-slider--default input + span:after {
    width: 38px !important;
    height: 18px !important;
    line-height: 18px !important;
}

.checkbox-slider--a.checkbox-slider-md input:checked + span:after, .checkbox-slider--default.checkbox-slider-md input:checked + span:after {
    border: none;
}

.checkbox-slider-md input + span:after {
    width: 59px !important;
    height: 28px !important;
    line-height: 28px !important;
}

.checkbox-slider-md input + span:after,
.checkbox-slider-md input + span:before {
    height: 28px !important;
    line-height: 28px !important;
}

.checkbox-slider--a input#inclusive + span:before, .checkbox-slider--a input#inclusive + span:after, .checkbox-slider--a input#enable + span:before, .checkbox-slider--a input#enable + span:after {
    border: none;
}

.checkbox-slider--a input#inclusive + span:after {
    content: "Hold";

}

.checkbox-slider--a input#inclusive:checked + span:after {
    content: "Go";
}

.checkbox-slider--a input.booleanInput + span:after {
    content: "False";

}

.checkbox-slider--a input.booleanInput:checked + span:after {
    content: "True";
}

.checkbox-slider--a input#inclusive + span:after {
    background: #cc2900 !important;
}

.checkbox-slider--a input#inclusive:checked + span:after {
    background: #64A70B !important;
}

.checkbox-slider--a input:disabled + span:after {
    border: none !important;
}

/*-----------------------
Select2 Overrides
-----------------------*/

.select2-dropdown {
    z-index: 10000 !important;
}

.select2-container {
    min-width: 200px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #1174b6;
    border: #1174b6;
    padding: 0 8px 0 0;
    border-radius: 4px;
    font-size: 15px;
}

.select2-selection__choice, #userExporterFilterCriteria .select2-selection__choice {
    color: #ffffff;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff;
    padding: 2px 6px 2px 8px;
    font-size: 15px;
    margin-right: 5px;
    border-radius: 4px 0 0 4px;
    background: rgba(0,0,0,.3);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffffff;
}

select + span.select2 {
    width: 100% !important;
}

.icon-ok {
    background-position: -288px 0;
}

.icon-lg {
    font-size: 30px;
}

select#keywords + span.select2 {
    width: 100% !important;
}

#twilio-keywords input.select2-search__field {
    width: 100% !important;
}

#twilio-keywords em.invalid {
    display: block;
    padding-top: 10px;
}

#userExporterFilterCriteria li.select2-search, #userExporterFilterCriteria input.select2-search__field {
    width: 100% !important;
    font-size: 13px;
}

#userExporterFilterCriteria ul.select2-selection__rendered em, #filterCriteria ul.select2-selection__rendered em {
    display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #404040;
    font: 13px/16px 'Open Sans', Helvetica, Arial, sans-serif;
}

.select2-container-multi .select2-choices .select2-search-choice {
    line-height: 23px;
}

.select2-container-multi .select2-search-choice-close {
    padding: 5px 0 1px 6px;
}

.select2-container .select2-selection--single {
    height: 32px;
    font: 13px/16px 'Open Sans', Helvetica, Arial, sans-serif;
}

/*-----------------------
JQuery Dialog Overrides
-----------------------*/
.ui-widget-overlay {
    z-index: 100 !important;
}

.ui-dialog .ui-dialog-titlebar {
    background: #101212;
}

.ui-dialog .ui-dialog-title {
    color: #fff;
}

.ui-dialog .ui-dialog-titlebar-close {
    color: #fff;
}

.ui-dialog .ui-dialog-titlebar {
    padding: 0 10px;
}

/* -------------------------
APP-SPECIFIC STYLES
---------------------------*/
/******** NetSuite ********/
.sortable-container {
    min-height: 150px !important;
    border: solid 1px #999;
    background-color: #fff;
}

.sortable-container ul {
    list-style: none;
}

.sortable-container li {
    border-top: solid 1px #808080;
    border-bottom: solid 1px #808080;
    display: inline-block;
    margin: -2px 0;
    width: 100%;
    height: 100%;
    position: relative;
}

#currentImport li {
    cursor: pointer;
}

.ui-sortable li {
    cursor: move;
}

.sortable-icon {
    float:right;
    margin: 7px 5px 0 0;
    color: #999;
    font-size: 16px;
}

.arrow {
    width: 18px;
    margin: 0 auto;
}

#add-item, #remove-item {
    background: transparent;
    border: none;
    cursor: pointer;
}

#add-item:disabled i, #remove-item:disabled i{
    color: #cccccc;
}

#add-item i, #remove-item i {
    font-size: 50px;
    color: #101212;
}

.imports-slider {
    display: inline-block !important;
}

.schedule-timepicker {
    width: 90% !important;
}

#run-import-form .active-import {
    background-color: #1174b6;
    color: #fff;
}

#imports-mapping-container .matchFieldContainer {
    width: 82%;
    float: left;
    margin: 0 0 20px 46px;
}

.import-enabled, .import-disabled {
    height: 100%;
    display: inline-block;
    width: 20px;
    float: left;
    position: absolute;
    left: 0;
    top:0;
}

.import-enabled {
    background-color: #64A70B;
}

.import-disabled {
    background-color: #999;
}

.import-label {
    float: left;
    padding: 5px 0 5px 25px;
    width: 75%;
}

#actions-mapping, #imports-mapping, #filter-logic, #sync-actions {
    background-color: #fff;
    padding: 15px 10px;
}

#actions-mapping .addRow, #imports-mapping .addRow {
    margin: 14px 0 14px 45px;
}

#sync-actions-contact .addRow, #sync-actions-account .addRow {
    margin: 14px 0 14px 16px;
}
#netsuite-basic-auth-section, #netsuite-token-based-section {
    margin-bottom: 0px;
}

#filter-logic .addRow {
    margin: 14px 0 14px 42px;
}

#filter-logic .testLogic {
    margin: 14px 0 14px 10px;
}

#filter-logic .status-container {
    min-width: 16px;
}

#actions-mapping .remove-row, #imports-mapping .remove-row, #sync-actions .remove-row {
    margin: 5px 5% 0 0;
}

#sync-actions .remove-row {
    margin: 18px 3% 0 0;
}

#sync-actions .select2-container .select2-selection--single {
    height: 32px !important;
}

#sync-actions .select2-container, #sfdcObjectList .select2-container {
    width: 100% !important;
}

a.tag {
    background-color: #888;
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    display: inline-block;
    margin: 5px 10px 5px 0;
    min-width: 40px;
    text-align: center;
}

a.selectedTag {
    background-color: #64A70B;
}

table#connections {
    margin-top: 0 !important;
}

div#reportingTableContainer_info {
    width: auto;
}

#reportingTableContainer_filter input.form-control {
    height: 34px;
}

#reportingDatepickerContainer {
    display: flex;
    justify-content: center;
}

#reportingDatepickerPreviousButton {
    margin-right: 10px;
}

#reportingDatepickerNextButton {
    margin-left: 10px;
}

#reportingTableContainer {
    border-bottom: 1px lightgrey !important;
    border-top: 1px lightgrey !important;
}

#reportingTableContainer tr.odd {
    background: #f9f9f9;
}

#reportingTableContainer tr.even {
    background: #f9f9f9;
}

#reportingTableContainer tbody tr:not(.odd):not(.even) {
    background: #dcdcdc;
}

table.reportingDetailsTable {
    padding-bottom: 10px;
    margin: 10px;
    width: 100%;
}

table.reportingDetailsTable tr {
    background: #f9f9f9;
    padding: 50px;
    vertical-align: top;
    border-spacing: 5px 1rem;
}

.reportingDetailsKey, .reportingDetailsValue {
    padding: 3px;
    width: 200px;
    background: white;
    border: 0 !important;
}

.reportingDetailsHeader {
    font-weight: bold;
    font-size: 1.5rem;
}

.reportingDetailsHeaderId {
    font-weight: bold;
}

.reportingDetailsCarrot {
    text-align: center;
    color: black;
    font-size: 2rem;
}

.reportingIconTooltip {
    text-align: center;
    width: 100%;
    font-size: 2rem;
}

.reportingDetailsCarrot {
    width: 25px;
}

.reportingDetailsTbody {
    border: 1px solid black;
    padding: 10px;
    display: inline-block;
    border-radius: 5px;
    margin: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.12), 0 2px 5px rgba(0,0,0,0.24);
    background: #fff;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 80%;
    height: auto;
    background: white;
    margin-right: 35px;
}

#reportingTableContainer_filter {
    float: left;
    padding: 5px;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0px;
}

#reportingTableContainer_length {
    float: right;
    padding: 5px;
}

#reportingTableContainer_wrapper .dt-buttons.btn-group {
    float: none;
    margin-top: 5px;
}

#reportingTableContainer_info {
    margin: 5px;
    padding-left: 5px;
}

th {
    border-bottom: 0 !important
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0px;
    border: 0px;
}

#reportingTableContainer_paginate {
    padding-right: 5px;
}

.wrap-code {
    white-space: pre-wrap;
}

/* -------------------------
FOOTER STYLES
---------------------------*/

.page-footer a, .page-footer:hover, .page-footer:active, .page-footer:visited {
    color: #ffffff;
}

/* -------------------------
GLOBAL WILDCARD STYLES
---------------------------*/

/******** padding ********/
.padding-5 {
    padding: 5px 5px 5px 5px !important;
}

.padding-10 {
    padding: 10px 10px 10px 10px !important;
}

.padding-20 {
    padding: 20px 20px 20px 20px !important;
}

.padding-30 {
    padding: 30px 30px 30px 30px !important;
}

.padding-bottom-5 {
    padding-bottom: 5px !important;
}

.padding-bottom-20 {
     padding-bottom: 20px !important;
 }

.padding-bottom-25 {
     padding-bottom: 25px !important;
 }

.padding-bottom-30 {
    padding-bottom: 30px !important;
}

.padding-bottom-40 {
    padding-bottom: 40px !important;
}

.padding-bottom-50 {
    padding-bottom: 50px !important;
}

.padding-top-0 {
    padding-top: 0 !important;
}

.padding-top-5 {
    padding-top: 5px !important;
}

.padding-top-7 {
    padding-top: 7px !important;
}

.padding-top-10 {
    padding-top: 10px;
}

.padding-top-20 {
    padding-top: 20px !important;
}

.padding-top-25 {
    padding-top: 25px !important;
}

.padding-top-30 {
    padding-top: 30px !important;
}

.padding-top-50 {
    padding-top: 50px !important;
}

.padding-right-0 {
    padding-right: 0 !important;
}

.padding-right-5 {
    padding-right: 5px !important;
}

.padding-right-10 {
    padding-right: 10px !important;
}

.padding-right-15 {
    padding-right: 15px !important;
}

.padding-right-20 {
    padding-right: 20px !important;
}

.padding-right-30 {
    padding-right: 30px !important;
}

.padding-left-0 {
    padding-left: 0 !important;
}

.padding-left-5 {
    padding-left: 5px !important;
}

.padding-left-10 {
    padding-left: 10px !important;
}

.padding-left-15 {
    padding-left: 15px !important;
}

.padding-left-20 {
    padding-left: 20px !important;
}

.padding-left-30 {
    padding-left: 30px !important;
}

.padding-left-35 {
    padding-left: 35px !important;
}

.no-padding {
    padding: 0 !important;
}

/******** margin ********/
.no-margin {
    margin: 0 !important;
}

.margin-top-3 {
    margin-top: 3px;
}

.margin-top-5 {
    margin-top: 5px;
}

.margin-top-7 {
    margin-top: 7px;
}

.margin-top-10 {
    margin-top: 10px !important;
}

.margin-top-15 {
    margin-top: 15px !important;
}

.margin-top-20 {
    margin-top: 20px !important;
}

.margin-top-23 {
    margin-top: 23px !important;
}

.margin-top-25 {
    margin-top: 25px;
}

.margin-top-30 {
    margin-top: 30px !important;
}

.margin-top-40 {
    margin-top: 40px !important;
}

.margin-top-50 {
    margin-top: 50px !important;
}

.margin-top-100 {
    margin-top: 100px !important;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-right-0 {
    margin-right: 0 !important;
}

.margin-right-10 {
    margin-right: 10px;
}

.margin-right-15 {
    margin-right: 15px !important;
}

.margin-right-20 {
    margin-right: 20px;
}

.margin-right-30 {
    margin-right: 30px !important;
}

.margin-left-neg15 {
    margin-left: -15px !important;
}

.margin-left-3 {
    margin-left: 3px !important;
}

.margin-left-5 {
    margin-left: 5px !important;
}

.margin-left-10 {
    margin-left: 10px;
}

.margin-left-15 {
    margin-left: 15px;
}

.margin-left-20 {
    margin-left: 20px !important;
}

.margin-left-30 {
    margin-left: 30px;
}

.margin-left-35 {
    margin-left: 35px;
}

.margin-left-40 {
    margin-left: 40px !important;
}

.margin-left-45 {
    margin-left: 45px;
}

/******** borders ********/
.border-bottom-dashed {
    border-bottom: dashed 1px #C2C2C2 !important;
}

.border-top-dashed {
    border-top: dashed 1px #C2C2C2 !important;
}

.border-full-solid {
    border: solid 1px #c2c2c2 !important;
}

.border-top-solid {
    border-top: solid 1px #c2c2c2 !important;
}

.border-left {
    border-left: solid 1px #999;
}

.border-right-thick-white {
    border-right: solid 5px #ffffff;
}

.r1-divider-dashed-thin {
    border-bottom: dashed 1px #999999;
}

.r1-divider-solid-med {
    border-bottom: solid 3px #999;
}

.r1-divider-solid-thin {
    border-bottom: solid 1px #999;
}

.divider {
    border-bottom: dashed 1px #999999;
    margin: 20px 0 !important;
}

/******** lists ********/
.no-bullets {
    list-style-type: none;
}

/******** width ********/
.width-45 {
    width: 45% !important;
}

.width-50 {
    width: 50% !important;
}

.width-75 {
    width: 75% !important;
}

.width-90 {
    width: 90% !important;
}

.width-94 {
    width: 94% !important;
}

.width-99 {
    width: 99% !important;
}

.full-width, .width-100{
    width: 100% !important;
}

/******** height ********/
.setheight232 {
    min-height: 232px !important;
}

.setheight245 {
    height: 245px;
}

/******** display ********/
.r1-display-block {
    display: block !important;
}

.r1-inline-block {
    display: inline-block !important;
}

.r1-hide {
    display: none !important;
}

.r1-hidden {
    width: 0;
    height: 0;
    opacity: 0;
    border: none;
    position: absolute;
    margin: 0 !important;
    padding: 0 !important;
}

.r1-zindex-9999 {
    z-index: 9999 !important;
}

/******** font size ********/
.font20 {
    font-size: 20px !important;
}

.font18 {
    font-size: 18px !important;
}

.font15 {
    font-size: 15px !important;
}

.font14 {
    font-size: 14px !important;
}

.font13 {
    font-size: 13px !important;
}

.font11 {
    font-size: 11px !important;
}

/******** misc ********/
.clear-left {
    clear: left;
}

.list-plain {
    list-style-type: none;
}

.center {
    text-align: center;
}

.center-block {
    display: block !important;
    margin: 0 auto !important;
}