.fa-spin {
    color: #408CBC;
}

div.loading-spinner {
    float:right !important;
    padding-right: 12px !important;
}

/* General */

a {
    cursor: pointer;
}

.textLeft {
    text-align: left !important;
}
.textRight {
    text-align: right !important;
}
.textCenter{
    text-align: center !important;
}
.inline-block{
    display: inline-block;
}
.inline{
    display: inline;
}
.flex{
    display: flex;
}
.pull-left {
    float:left;
}
.pull-right{
    float: right;
}
.pull-none {
    float:none;
}
.clear-right{
    clear: right;
}
.auto-width{
    width:auto;
}

.panel-heading.small-heading > div > h2 {
    font-size: 17px !important;
    font-weight: 300 !important;
}

/* modal scrolling */

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 15px;
}

h4.modal-subhead{
    font-size: 16px;
}

.readonly{
    color: #4D4D4D !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

.readonly:hover{
    font-weight: normal !important;
    text-decoration: none !important;
    cursor: default !important;
}

/* block and center helpers, used when centering index context such as "to begin, select X" */
/* This parent can be any width and height */
.block {
    text-align: center;
    height: 414px;
}

/* The element to be centered, can also be of any width and height */ 
.centered {
    padding-top: 207px;
    display: inline-block;
    vertical-align: middle;
    font-family: "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 23px;
    color: rgba(51, 51, 51, 0.9);
    margin-top: -23px;
}

.panel > .block > .centered{
    font-family: "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 23px;
    width: 99%;
}

/* dropdown menu icon */
.dropdown-icon {
    position:relative;
    padding-top: 2px;
    padding-right: 10px;
    font-size:20px;
    vertical-align:middle;
}

.dropdown-text{
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

.dropdown-toggle i.fa-cog{
    color:#408CBC;
    cursor: pointer;
}

i.disabled {
    color: #676767 !important;
    cursor: not-allowed !important;
}

i.fa-plus, i.fa-play, i.fa-pause, i.fa-wrench, i.fa-download, i.fa-repeat, i.fa-files-o, i.fa-question-circle {
    color:#408CBC;
    cursor: pointer;
}

i.fa-times {
    color:#d43f3a;
    cursor: pointer;
}

.dropdown-menu i.fa-pencil{
    color:#408CBC;
}

li.dropdown{
    list-style:none; 
    float:right;
}

.dropdown-menu i.fa-times{
    color:#d43f3a;
}

i.fa-trash-o{
    color:#d43f3a;
}

i.fa-pencil {
    color:#408CBC;
}

td > div > a > i.fa-trash-o {
    float: right;
}

td > a > i.fa-trash-o {
    float: right;
}

td > a > i.fa-times {
    float: right;
}

td > i.fa-times {
    float: right;
}

td > i.fa-trash-o {
    float: right;
}

/* Header */

.header-action {
    text-align: right;
}

/* Edit Label */

.edit-label{
    text-align:left !important;
    font-weight: normal !important;
    color: #408CBC;
    margin-bottom:0px;
}

.edit-label:hover{
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.edit-label i.fa-times{
    color: #d43f3a;
    padding: 3px;
}

.edit-label i.fa-check{
    color:#3c763d;
    padding: 3px;
}

button > i.fa-wrench {
    color:#408CBC;
    padding: 3px;
}

/* Add pointer to panel actions */

.panel-actions {
    cursor: pointer;
}

.panel-footer-transparent {
    background-color: transparent !important;
}

.panel-footer-white {
    background-color: #fdfdfd !important;
}

.panel-actions > .dropdown > ul.dropdown-menu > li > a {
    width: 100%;
    height: 100%;
    text-align: left;
}

.col-form{
    margin-left: 0px !important;
    margin-right: 0px !important;
}

div.editor-separator {
    border-bottom: 1px solid #ddd
}

/* control label with left aligned text */

.control-label-left {
    text-align: left !important;
}

/* used for comma separating a list */
.comma-list > li:after {
    content: ','
}

.comma-list > li:last-of-type:after {
    content: ''
}

.comma-list > li {
    display: inline-block;
}

/* Table Hover */

table.table-hover >tbody>tr:hover td{
    background-color: #f9f9f9;
    cursor: pointer;
    text-decoration: none;
}

/* Percentage Money Alignment */

span.percentage-money-alignment {
    color:transparent;
}

/* Word Wrap*/

.breakWordWrap {
    word-break: break-all;
}

/* Currency */

th.currency, td.currency{
    text-align: right;
}

/* Section sub-headers*/

div.section-subheader {
    margin-bottom: 22px;
}

th.count, td.count{
    text-align: center;
}

td.checkbox-icon{
    padding:4px !important;
    text-align: right !important;
    width: 48px;
    padding-right: 12px !important;
}

td.checkbox-icon i{
    font-size: 28px !important;
}

i.checkbox-selected{
    color: #6f2a8e;
}

i.checkbox-deselected{
    color: #ccc
}

/* ----------------------------------------------------------------------------*/
/* ---------->>> IMAGES <<<----------------------------------------------------*/
/* ----------------------------------------------------------------------------*/

.passwordHelp, .emailHelp {
    padding-left: 0px !important;
}

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



/* Campaign Member Account Image */

img.import-image{
    max-width: 70%;
}

/* tiled image selection and right preview used in 4tress profile */
.tile-container{
    width: auto;
    margin: 0 auto;
    height: 176px;
    text-align: left;
}

.tile-set{
    margin: 0 auto;
}
.tile-wrap{
    margin: 0 auto;
    width: 95%;
    min-width: 168px;
    max-width: 175px;
    float: right;
}
.tile {
    float: left;    
    padding: 2px;
}

.tile img{
    max-width: 38px;
}

.tile img.active{
    -webkit-appearance: none;
    -moz-box-shadow: 0px 0px 2px 3px #0082CA;
    -webkit-box-shadow: 0px 0px 2px 3px #0082CA;
    box-shadow: 0px 0px 2px 3px #0082CA;
    border-radius: 1px;
}

.selected-tile{
    float: left;
}

.selected-tile img{
    width: auto;
    height: auto;
    max-width: 175px;
    max-height: 166px;
    float: left;
}

/* used to show a masked div over a shelf, category, or modifier image */
.mask{
    text-align:center;
    padding-top:26px;
    height:70px;
    width:70px;
    border-radius:6px;
    top:0px;
    position:absolute;
    display: none;
    cursor: pointer;
}

.mask a{
    background-color: rgba(0,0,0,0.50);
    color: #fff;
    padding-left: 7px;
    padding-right: 6px;
    font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
}

.mask a:hover{
    text-decoration: none;
}

.itemImage:hover .mask{
    display: block;
}

/* used for displaying the "Change" hover for displayLogos which can have variable height/widths */

#displayLogo:hover .logo-mask, #appGridImage:hover .logo-mask {
    display:block;
}

#displayLogo:hover, #appGridImage:hover {
    cursor:pointer;
}

#displayLogo, #appGridImage {
    position:relative;
    margin-left: 15px;
    display: inline-block;
}

#displayLogo img, #appGridImage img {
    vertical-align:top;
}
#displayLogo:after, #displayLogo:before, #appGridImage:after, #appGridImage:before {
    position:absolute;
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

#displayLogo:before, #appGridImage:before {
    content: attr(data-content);
    width:100%;
    color:#fff;
    z-index:1;
    bottom:45%;
    padding:2px 10px;
    text-align:center;
    background:rgba(0,0,0,0.6);
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
}
#displayLogo:hover:after, #displayLogo:hover:before, #appGridImage:hover:after, #appGridImage:hover:before {
    opacity:1;
}

#displayLogoDisabled {
    position: relative;
    margin-left: 15px;
    display: inline-block;
}

#displayLogoDisabled img {
    vertical-align: top;
}

#displayLogoDisabled:before {
    content: attr(data-content);
    width:100%;
    color:#fff;
    z-index:1;
    bottom:45%;
    padding:2px 10px;
    text-align:center;
    background:rgba(0,0,0,0.6);
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
}

#displayLogoDisabled:before, #displayLogoDisabled:after {
    position:absolute;
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

/* Panel Date Range Picker */

div.panel-actions.panel-date-range-picker {
    min-width: 230px;
    max-width: 223px;
}

/* shift4 purple coloring for panels */
.panel-shift4{
    border-color:#0082CA;
}

.panel-shift4 > .panel-heading {
    color: #fff;
    background-color: #0082CA;
    border-color: #0082CA;
}

/* table with images in the <tr> rows, this is used to vertically align the non image cells */
table > tbody > tr > td {
    vertical-align: middle !important;
}

@media (max-width: 767px) {
    .vt4-image {
        max-height: 30px;
        max-width: 30px;
        border-radius: 6px;
    }
}

@media (min-width: 768px) {
    .vt4-image {
        max-height: 70px;
        max-width: 70px;
        border-radius: 6px;
    }
}

.leaf-row{
    border-top: 1px solid #ddd;
}

.leaf-row:hover{
    background-color: #f9f9f9;
    cursor: pointer;
}

/* CKEditor Custom Preview Button */
.cke_button__emailpreview_label
{
    display : inline !important;
}

.cke_button__emailpreview_icon
{
    background-image:url('../vendor/ckeditor/plugins/icons.png?t=GAGE') !important; 
    background-position:0 -1656px !important;
    background-size:auto !important;
}

.side-bar-search > input{
    background: #444;
    border: 1px solid #444;
    color: #888;
}

.side-bar-search > input:focus{
    background: #444;
    border: 1px solid #333;
    color: #888;
}

.side-bar-search > .input-group-addon{
    background: #444;
    border: 1px solid #444;
    color: #888;
}

i.cardTenderExpand {
    cursor: pointer;
}

label.pciDisclaimer {
    font-size:12px !important;
}

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}

.panel-action-divider {
    padding: 6px 0px;
}