body {
    font-size: 14px;
}

legend { font-size: 14px; } /* Set to same as default body font-size */

a, a:hover { cursor: pointer; }

#SpamCheck { display:none; } 

.info-next-to-button {padding-top: 48px}

/* Start: Login header (pre-responsive site) */

#Header img { max-width: 100%;  }

#HeaderPrint
{
    display: none;
}

/* End: Login header */


/* Start: Loading modal */
.blockui-box img.working { margin-bottom: 15px; }
/* End: Loading modal */



/* Start: Login page */

.login-box, .application-box, .login-contact-box { -webkit-box-shadow: 0 0 10px #222; box-shadow: 0 0 10px #222; }

.login-box input[type=text],
.login-box input[type=password] { color: #222; }

.login-box, 
.application-box,
.login-contact-box { margin-top: 10px; margin-bottom: 25px; }

.login-box .title h2 { font-size: 18px!important; text-transform: uppercase; font-weight: normal!important; }

.login-box .title h4,
.login-box .title h2,
.application-box .title h4 { padding: 10px; }
.login-box .login-box-form,
.application-box .application-box-content,
.login-contact-box { padding: 10px; }

.login-box .title h4,
.application-box .title h4
{
    text-transform: uppercase;
    font-weight: normal;
    margin: 0px;
}

.login-box a.forgot-link { font-size: small; text-decoration: underline; float: right; }
.login-box a,
.application-box a,
.login-contact-box a { text-decoration: underline; cursor:pointer; }

.application-box .application-box-content h4 { font-size: 1.1em; }

.login-box .note { font-weight: bold; font-style: italic }
/* End: Login page */



/* Start: elements used on various pages */
div.no-padding { padding: 0px; }
div.no-padding-right { padding-right: 0px; }

div.load-hidden { display: none; }

/* Values in % need to be right aligned. */
div.percent { text-align: right; }

/* Values in $ need to be right aligned. */
div.amount { text-align: right; }

/* Registration */
.reg-mb-10{ margin-bottom: 10px; }
/* Asset allocation listings */
div.asset-name { padding-left: 30px; }

.allocations-pool-row { }
.allocations-assets-row { }
.allocations-assets { margin-bottom: 20px; }

div.info-text-padding,
div.info-text-border { padding-bottom: 10px; }

div.info-debug { margin: 0; }

span.note { font-style: italic; font-weight: bold; }

/* .form-field-full-width was added for grants form; allow fields to be 100% width of column. Use default width below 640. */
.form-field-full-width { width: 100%; }

.center-content { text-align: center; }
.right-content {
    float: right;
}

.footer { font-size: smaller; margin-bottom: 20px;}
.footer .reninc { float: right;  }

.error { color: #C41200; }
.error-bold { font-weight: bold; }

.field-validation-error { color: #C41200; font-weight: bold; }

ul.rows { list-style: none; }
ul.rows > li > label
    {
        font-weight: normal !important;
    }

.no-bold
{
    font-weight: normal !important;
}

/* UI Loading Animation */
.blockUI, .blockui-box {
    border-radius: 0 !important;
}
.blockui-box {
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: 0;
}
.blockUI.blockPage {
    z-index: 1011;
    display: none;
    position: fixed;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    text-align: center;
    color: rgb(0, 0, 0);
    background-color: rgba(255, 255, 255, 0.8);
    border: 0;
    border-radius: 0;
}
.ui-loading {
    overflow: hidden;
    font-size: 2.5rem;
    width: 10em;
    height: 10em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.ui-loading .ui-loading__text {
  color: rgba(0, 0, 0, 0.7);
  font-family: Arial, sans-serif;
  font-size: 0.75em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  -webkit-transform: translateX(-0.2em) translateY(-0.25em);
      -ms-transform: translateX(-0.2em) translateY(-0.25em);
          transform: translateX(-0.2em) translateY(-0.25em);
}
.ui-loading .ui-loading__text {
   -webkit-animation: loadingText 2s infinite;
    animation: loadingText 2s infinite;
}
.ui-loading .ui-loading__circles,
.ui-loading .ui-loading__circles::before,
.ui-loading .ui-loading__circles::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 0.25em solid rgba(0, 0, 0, 0.1);
  border-left-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
}

.ui-loading .ui-loading__circles {
  margin: -4.25em 0 0 -4.25em;
  height: 8em;
  width: 8em;
  -webkit-animation: animation-rotate 2500ms linear infinite;
  animation: animation-rotate 2500ms linear infinite;
}

.ui-loading .ui-loading__circles::before {
  content: "";
  margin: -3.5em 0 0 -3.5em;
  height: 7em;
  width: 7em;
  -webkit-animation: animation-rotate 1000ms linear infinite;
  animation: animation-rotate 1000ms linear infinite;
}

.ui-loading .ui-loading__circles::after {
  content: "";
  margin: -4.5em 0 0 -4.5em;
  height: 9em;
  width: 9em;
  -webkit-animation: animation-rotate 2000ms linear infinite;
  animation: animation-rotate 2000ms linear infinite;
}

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

@keyframes animation-rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes loadingText {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes loadingText {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}


.col-value ul.rows,
.col-form-value ul.rows { padding: 0px; margin: 0px; } 

div.checkboxes input[type='checkbox'] { margin-right: 10px; }

.ddl-wide { max-width: 100%; }

/* .break-all was added for elements containing URLs, causing the URL to potentially appear outside of the 
    container / element because the value does not contain any white spaces to naturally break on. */
.break-all { word-break: break-all; }

.special-instructions { color: #C41200; }

/*.ssn-input { display: none; } */ /* used when a masking SSN field is present */

div.inline-div { display: inline; }

.smaller-label-normal { font-size: smaller; font-weight: normal; }

/* End: elements used on various pages */



/* Start: show/hide as used on charity details */
.collapsable-section .button-row { min-height: 40px; }
/*.collapsable-section .button-row .button { display: inline-block!important; }*/

.show-content .button-show { display: none!important; }

.hide-content .button-hide { display: none!important; }

.hide-content .toggle-content { display: none; }

.collapsable-section .button-row .button-toggle { display: inline-block!important; }
/* End: show/hide as used on charity details */




/* Start: Validation + errors */
div.validation-summary-errors,
div.validation-summary .error
{ 
    border-radius:2px;
    color: #fff;
    background-color: #c41200;
    font-weight: bold;
    padding: 15px;
    position: relative;
    /*background-color: #FFBABA;*/ 
    /*background: -webkit-linear-gradient(#F59696, #eee);
    background: -o-linear-gradient(#F59696, #eee);
    background: -moz-linear-gradient(#F59696, #eee);
    background: linear-gradient(#F59696, #eee);*/
    display:block;
}

div.validation-summary-errors ul:before,
div.validation-summary .error:before {
    position: absolute;
    font-family: FontAwesome;
    content: '\f06a'; /* fa-exclamation-circle */
    font-size: 36px;
    top: 0;
}

div.validation-summary-errors li,
div.validation-summary .error ul { margin-left: 50px; margin-bottom: 0; }
div.validation-summary .validation-summary-text { margin-left: 50px;}
div.validation-summary .error ul .validation-summary-text { margin-left: 0px;}

div.validation-summary .error ul li br { display: none; }

div.validation-summary-errors { margin-bottom: 25px; }
div.validation-summary-errors ul { padding-left: 0px; }
div.validation-summary-errors ul li { list-style: none; font-weight: normal; }

label.error,
span.error[style*="inline"]
{ 
    color: #C41200!important; 
    font-weight: normal; 
    display: block!important;
    line-height: 20px;
    clear: both;
}
.goal-date label.error,
.goal-date span.error[style*="inline"] {
    position: absolute;
    bottom: -25px;
}
.goal-date label.error,
.goal-date span.error[style*="inline"] {
    position: absolute;
    bottom: -25px;
}

.form-field-error { border: 1px solid #F00!important; }
.form-row-error { border-left: 2px solid #C41200; }


/* For ig...Editor fields. These fields have the igte_Edit class by default. IG adds / removes classes to
    these elements and gets rid of anything we add via jQuery. So, instead target the element through here. */
.form-row-error .igte_Edit { border: 1px solid #C41200; }

/* End: Validation + errors */



/* Start: other info boxes */
.infobox,
.helpbox
{
    border: 1px solid #00529b;
    border-radius:2px;
    color: #fff;
    background-color: #00529b;
    font-weight: normal;
    padding: 15px;
    position: relative;
    /*background-color: #F59696;*/ /*#F57E7E;*/
    /*background: -webkit-linear-gradient(#7fa8cd, #bde5f8);
    background: -o-linear-gradient(#7fa8cd, #bde5f8);
    background: -moz-linear-gradient(#7fa8cd, #bde5f8);
    background: linear-gradient(#7fa8cd, #bde5f8);*/
    display:block;
}

.infobox h1, .infobox h2, .infobox h3, .infobox h4, .infobox h5, .infobox p,
.helpbox h1, .helpbox h2, .helpbox h3, .helpbox h4, .helpbox h5, .helpbox p { color: #fff!important }

.infobox:before 
{    
    position: absolute;
    font-family: FontAwesome;
    content: '\f05a '; /* fa-info-circle */
    font-size: 36px;
    top: 0;
    left: 5px;
}

.helpbox:before 
{    
    position: absolute;
    font-family: FontAwesome;
    content: '\f059 '; /* fa-question-circle */
    font-size: 36px;
    top: 0;
    left: 5px;
}

.helpbox a,
.infobox a 
{ 
 font-weight: bold; 
 color: #fff!important; 
 text-decoration: underline; 
}

.warningbox 
{
    /*#9f6000*/
    border: 1px solid #9f6000;
    background-color: #9f6000 !important;
    border-radius:2px;
    color: #fff !important;
    font-weight: normal;
    padding: 15px;
    position: relative;
    /*background-color: #FEEFB3;*/ /*#F57E7E;*/
    /*background: -webkit-linear-gradient(#cfaf7f, #feefb3);
    background: -o-linear-gradient(#cfaf7f, #feefb3);
    background: -moz-linear-gradient(#cfaf7f, #feefb3);
    background: linear-gradient(#cfaf7f, #feefb3);*/
    display:block;
}

.warningbox:before {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: FontAwesome;
    content: '\f071 '; /* fa-exclamation-triangle */
    font-size: 36px;
    top: 0;
    left: 5px;
}

.warningbox h1, .warningbox h2, .warningbox h3, .warningbox h4, .warningbox h5, .warningbox p { color: #fff!important }

.warningbox a { font-weight: bold; color: #fff!important; text-decoration: underline; }

.errorbox
{ 
    border: 1px solid red;
    border-radius:2px;
    color: #fff;
    background-color: #C41200;
    font-weight: normal;
    padding: 15px;
    position: relative;
    /*background-color: #FFBABA;*/ 
    /*background: -webkit-linear-gradient(#F59696, #eee);
    background: -o-linear-gradient(#F59696, #eee);
    background: -moz-linear-gradient(#F59696, #eee);
    background: linear-gradient(#F59696, #eee);*/
    display:block;
}

.errorbox a, .errorbox a:link, .errorbox a:hover, .errorbox a:active,
.successbox a, .successbox a:link, .successbox a:hover, .successbox a:active,
.infobox a, .infobox a:link, .infobox a:hover, .infobox a:active
 {
    font-weight: bold;
    color: #fff!important; 
    text-decoration: underline;
}

.errorbox:before {
    position: absolute;
    font-family: FontAwesome;
    content: '\f06a'; /* fa-exclamation-circle */
    font-size: 36px;
    top: 0;
    left: 5px;
}

.errorbox:before a { font-weight: bold; color: #fff!important; text-decoration: underline; }

.successbox
{ 
    border: 1px solid #4F8A10;
    border-radius:2px;
    color: #fff;
    background-color: #4F8A10 !important;
    font-weight: normal;
    padding: 15px;
    position: relative;
    /*background-color: #DFF2BF;*/ 
    /*background: -webkit-linear-gradient(#bfe57f, #eaf6d4);
    background: -o-linear-gradient(#bfe57f, #eaf6d4);
    background: -moz-linear-gradient(##bfe57f, #eaf6d4);
    background: linear-gradient(#bfe57f, #eaf6d4);*/
    display:block;
}

.successbox:before {
    position: absolute;
    font-family: FontAwesome;
    content: '\f058 '; /* fa-check-circle */
    font-size: 36px;
    top: 0;
    left: 5px;
}

.successbox:before a { font-weight: bold; color: #fff!important; text-decoration: underline; }

.validationbox
{ 
    border: 1px solid #D63301;
    border-radius:2px;
    color: #fff;
    background-color: #D63301;
    font-weight: normal;
    padding: 15px;
    position: relative;
    /*background-color: #FFCCBA;*/ 
    /*background: -webkit-linear-gradient(#ff936e, #ffdfd4);
    background: -o-linear-gradient(#ff936e, #ffdfd4);
    background: -moz-linear-gradient(#ff936e, #ffdfd4);
    background: linear-gradient(#ff936e, #ffdfd4);*/
    display:block;
}

.validationbox:before {
    position: absolute;
    font-family: FontAwesome;
    content: '\f056 '; /* fa-minus-circle */
    font-size: 36px;
    top: 0;
    left: 5px;
}

.validationbox:before a { font-weight: bold; color: #fff!important; text-decoration: underline; }

.infobox,
.warningbox,
.successbox,
.errorbox,
.validationbox,
.helpbox 
{
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.infobox .content,
.warningbox .content,
.successbox .content,
.errorbox .content,
.validationbox .content,
.helpbox .content  
{
    margin-left: 25px;
}

.infobox .content h1, .infobox .content h2, .infobox .content h3, .infobox .content h4, .infobox .content h5,
.warningbox .content h1, .warningbox .content h2, .warningbox .content h3, .warningbox .content h4, .warningbox .content h5, 
.successbox .content h1, .successbox .content h2, .successbox .content h3, .successbox .content h4, .successbox .content h5, 
.errorbox .content h1, .errorbox .content h2, .errorbox .content h3, .errorbox .content h4, .errorbox .content h5, 
.validationbox .content h1, .validationbox .content h2, .validationbox .content h3, .validationbox .content h4, .validationbox .content h5, 
.helpbox .content h1,  .helpbox .content h2,  .helpbox .content h3,  .helpbox .content h4,  .helpbox .content h5
{
    margin-top: 0px;
}

.warning-error {
    font-weight: bold;
    color: red;
    background-color: #fff;
    padding: 5px;
    margin-top: 5px;
    border-radius: 4px;
}

/* End: other info boxes*/


/* Start: Keys */
div.keys .fa-info-circle { color: #00529b; font-size: 30px; }
div.keys .fa-exclamation-circle { color: #FFAA00; font-size: 30px; }
div.keys .fa-times-circle { color: #D63301; font-size: 30px; }

span.key-icon {  }
span.key-description {   }

div.keys .overridden { opacity: 0.3; }

/* End: Keys */



/* Start: Header */
div.header 
{
    height: 80px;
    width: 100%;
    display: block;
}

div.header .settings-container { margin-top: 10px; height: 90px; position: relative; }
div.header .settings-container ul { list-style: none; }
div.header .switch { float: left; padding: 0 15px; }
div.header .switch .fa { margin-left: 5px; font-size: 18px; }
div.header .switch .switch-list { display: none; height: 300px; overflow-y: scroll; padding: 7px 0; -webkit-box-shadow: 0 0 4px #000; box-shadow: 0 0 4px #000; z-index: 250;  }
div.header .switch .switch-list a { display: block; clear: both; width: 100%; padding: 3px 10px; }
div.header .switch .switch-list a:first-child {  }
div.header .switch .switch-list a:last-child {  }
div.header .switch .switch-list a:hover { text-decoration: none; }
div.header .switch:hover,
div.header .switch:focus,
div.header .switch.focus-within { cursor: default; }
div.header .switch:hover .switch-list,
div.header .switch:focus .switch-list,
div.header .switch.focus-within .switch-list,
div.header .switch .keep-open
{ display: block; position: absolute; }

div.header .logged-in-user { float: left; padding: 0 15px; }
div.header .logged-in-user .fa { margin-left: 5px; font-size: 18px; }
div.header .logged-in-user .user-settings a:hover { text-decoration: none; }
div.header .logged-in-user .user-settings { display: none; }
div.header .logged-in-user .user-settings li { padding: 3px 10px; }
div.header .logged-in-user .user-settings li:first-child { padding-top: 7px; }
div.header .logged-in-user .user-settings li:last-child { padding-bottom: 7px; }
div.header .logged-in-user:hover,
div.header .logged-in-user:focus,
div.header .logged-in-user.focus-within { cursor: default; }
div.header .logged-in-user:hover .user-settings,
div.header .logged-in-user:focus .user-settings,
div.header .logged-in-user.focus-within .user-settings,
div.header .logged-in-user .keep-open
{ 
    position: absolute; 
    display: block; 
    z-index: 250; 
    list-style: none;
    padding: 0px; 
    -webkit-box-shadow: 0 0 4px #000; 
            box-shadow: 0 0 4px #000;
}


div.header .messaging { float: left; padding: 0 15px; }
div.header .messaging:hover { cursor: pointer; }
div.header .messaging .fa { font-size: 16px; }
div.header .messaging span.msg-count { margin-left: 5px; }

div.header .logged-in-user-help { float: left; padding: 0 15px; }
div.header .logged-in-user-help:hover,
div.header .logged-in-user-help:focus,
div.header .logged-in-user-help.focus-within { cursor: pointer; }
div.header .logged-in-user-help .fa { font-size: 16px; }
div.header .logged-in-user-help .contact-info { display: none; }
div.header .logged-in-user-help:hover .contact-info,
div.header .logged-in-user-help:focus .contact-info,
div.header .logged-in-user-help.focus-within .contact-info,
div.header .logged-in-user-help .keep-open
{
    position: absolute; 
    display: block; 
    z-index: 250; 
    list-style: none;
    padding: 10px; 
    -webkit-box-shadow: 0 0 4px #000; 
            box-shadow: 0 0 4px #000;
}

div.header .messaging { float: left; padding: 0 15px; }

div.header .keep-open { display:block!important; }

div.header .user-tools { float: left; padding: 0 15px; padding-left: 15px; }
div.header .user-tools .tools-list { display: none; white-space: nowrap; }
div.header .user-tools .tools-list a:hover { text-decoration: none; }
div.header .user-tools .tools-list ul { padding: 0px; }
div.header .user-tools .tools-list li { padding: 3px 10px; }
div.header .user-tools .tools-list li:first-child { padding-top: 7px; }
div.header .user-tools .tools-list li:last-child { padding-bottom: 7px; }
div.header .user-tools:hover .tools-list,
div.header .user-tools:focus .tools-list,
div.header .user-tools.focus-within .tools-list,
div.header .user-tools .keep-open
{
    position: absolute; 
    display: block; 
    z-index: 250; 
    list-style: none;
    padding: 0px; 
    -webkit-box-shadow: 0 0 4px #000; 
            box-shadow: 0 0 4px #000;
}

div.header .log-out { float: left; padding: 0 15px; margin-right: -15px; }
div.header .log-out a { text-decoration: none; }

div.header-not-logged-in { position: relative; height: auto!important; }
div.container-log-in { margin-top: 0px!important; }

div.header-current-account 
{
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 2px 6px;
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px;
}

/* End: Header */


/* Start: Button */
/* Note: Links styled as buttons may be nested in other elements or have a class applied directly.
         Add any new variations here if necessary. */
div.button-row { margin-top: 30px; }

div.button { display: inline-block; }
div.button-left, a.button-left { float: left; }
div.button-center, a.button-center, input[type=submit].button-center {
    display: inline-block;
    text-align: center;
}
div.button-right, a.button-right, input[type=submit].button-right { float: right; }

div.back-button a,
div.button a,
a.button,
div.button-row input.button,
div.button-row input[type=submit],
div.button input.button,
div.button input[type=submit],
button,
.disabled-button
{
    display: inline-block;
    padding: 8px 21px;
    border-radius: 5px!important;
    font-weight: bold;   
    margin-bottom: 10px; 
    margin-left: 5px;
    cursor: pointer;
    text-decoration: none;
}

div.button input[type="submit"].disabled,
div.button input[type="submit"]:disabled,
div.button input[type="button"].disabled,
div.button input[type="button"]:disabled {  cursor: default; background-color: #bcbcbc!important; }

.disabled-button {
    cursor: default;
    border: 1px solid #bcbcbc;
    background-color: #bcbcbc !important;
}

.disabled-button:hover {
    background-color: #bcbcbc !important;
} 

a.button:hover,
a.button:active,
a.button:visited,
a.button:link,
div.back-button a:hover,
div.back-button a:active,
div.back-button a:visited,
div.back-button a:link,
div.button a:hover,
div.button a:active,
div.button a:visited,
div.button a:link {
    text-decoration: none;
}

input.button, button { border-radius: 2px; border: 0; padding: 2px 10px; font-weight: bold; }

input:disabled, select:disabled {
    background-color: #CCC;
}

div.buttons-float-left input.button { float: left; margin-right: 10px; margin-bottom: 10px; }

div.button-left:first-child a,
div.button-left:first-child input[type='submit'] { margin-left: 0px; }

div.tile div.other-addresses a.button { text-decoration: none; }

    /* Start: Back link / button */
    div.back-button { float: right; }
    /* End: Back link / button */

    div.add-role-member-button {
        float: right;
        margin-top: -6px;
    }
#Listing_table_AddRole {
    outline: none !important;
}
#Listing_table_AddRole .ui-iggrid-headertext:after {
    display: none;
}
#Listing_table_displayContainer [role~="gridcell"]:hover {
    cursor: pointer;
}
.add-role-popout-btn {
    
    pointer-events: none;
}
/* End: Button */
/* Start: Navigation */
/* test*/
transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear;

}

div.left-navigation ul { list-style: none; margin: 0px; padding: 0px; }
div.left-navigation ul li ul { display: none; width: 200px; padding-top:-20px;}
div.left-navigation ul li { width: 100%; padding: 5px 0 5px 3px; }
div.left-navigation ul li ul li { width: 100%; display: block; z-index: 10; }
div.left-navigation ul li a { display: table; padding: 0 5px; width:100%; }
div.left-navigation ul li:hover a { text-decoration: none; }
div.left-navigation ul li ul li a { display: block; line-height: 25px; padding: 0 5px; width: 100%; border-bottom: 0;  z-index: 10; }
div.left-navigation ul li:hover ul { display: block; left: 162px;  position: absolute; -webkit-box-shadow: #000 0px 0px 10px; box-shadow: #000 0px 0px 10px; z-index: 2; }
div.left-navigation .fa { display: table-cell; width: 5px; vertical-align: middle; }

div.left-navigation li:last-child { border-bottom: 0px; }

div.left-navigation div.left-nav-container {
    width:100%;
    margin: 10px 0;
    position: relative;
    float: left;
}

div.left-navigation ul li ul:before
{
    content: '';
    position: absolute;
    -webkit-box-shadow:  -3px 3px 3px #222;
            box-shadow:  -3px 3px 3px #222;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
    margin-left: -10px;
    margin-top: -10px;
    top: 50%;
    width: 20px;
    height: 20px;
    display: block;
    z-index:-1
}

div.mobile-nav-btn { float: right; font-size: 42px; }
div.mobile-nav-btn:hover { cursor: pointer; }
div.mobile-nav-btn .btn-menu {  }
div.mobile-nav-btn .btn-close { display: none; }

div.mobile-nav {display: none; clear: both; position: relative; z-index: 5; width: 100%; }
div.mobile-nav ul { list-style: none; padding: 0; margin: 0; }
div.mobile-nav ul:first-child { padding-top: 30px; }
div.mobile-nav ul li {  }
div.mobile-nav ul li a { width: 100%; display: block;padding: 0.75em 1em; }
div.mobile-nav ul li a,
div.mobile-nav ul li a:hover,
div.mobile-nav ul li a:active,
div.mobile-nav ul li a:visited,
div.mobile-nav .active { text-decoration: none; }
div.mobile-nav ul > li:last-child { border-bottom: 0px; }
div.mobile-nav ul li ul { display: none; }
div.mobile-nav ul li ul li a { padding-left: 30px; }

div.mobile-nav span.expand-ul { position: relative; z-index: 99; float: right; display: inline-block; width: 30px; text-align: center; }
div.mobile-nav span.expand-ul .fa-caret-up { display: none; }

div.mobile-nav li.account-nav-close { float: none!important; text-align: right; padding-right: 12px; border-bottom: 3px;  }
div.mobile-nav li.account-nav-close span.nav-text { padding-right: 4px; }

div.mobile-nav li select.mobile-isp-switch { 
    cursor: pointer; width: 100%; border: 0px; padding: 4px 11px; 
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
}

div.mobile-nav li select.mobile-isp-switch::-ms-expand { display: none; }

div.mobile-nav li.contact-info { margin: 0px!important; padding-left: 30px; padding-right: 30px;  }
div.mobile-nav li.contact-info a { padding: 0px; display: inline; text-decoration: underline; }

div.logo { float: left; height: 100px; padding: 10px 0; }
div.logo img { max-width: 100%; max-height: 100%;  }

.settings-container { float: right;  }
.settings-container #user {  }
.settings-container .tools { clear: both; margin-right: 25px; margin-bottom: 10px; }

div.has-top-nav { margin-top: 25px; }
div.has-top-nav-iframe { margin-top: 0px; } 
div.has-top-nav-active-doc { margin-top: 25px; } 
div.has-top-nav-secondary { margin-top: 25px; }
div.has-top-nav-secondary-active-doc { margin-top: 25px; }

li.account-nav-close { float: right!important; }



div.active-nav {
    
}

div.active-nav-out 
{
    background-color: red;
}
/* End: Navigation*/



/* Start: Active account */
.current-account { display: none; }
.current-account { text-align: center; font-size: 0.9em; z-index: 5; }
.current-account .account-box 
{ 
    display: inline-block; padding: 3px 5px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; 
    -webkit-box-shadow: 0 0 6px #000; 
            box-shadow: 0 0 6px #000;
}


/* End: Active account */


sect
/* Start: Content container */
div.content-container {  }

.investment-spacing.is-flex:before,
.investment-spacing .is-flex:before,
.investment-spacing.is-flex:after,
.investment-spacing .is-flex:after {
    display: none !important;
}

div.row-content
{
    margin-bottom: 25px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-radius: 2px;
    padding-top: 10px;
    padding-bottom: 10px;
}

div.row-content h1,
div.row-content h2,
div.row-content h3,
div.row-content h4,
div.row-content h5 { font-weight: bold; }

/* .detail-row h4 are used as titles on detail pages. These titles feature a bottom-border */
div.form-row h4,
div.detail-row h4 { padding-bottom: 3px; }

div.detail-row-padding { padding-bottom: 25px; }
/* End: Content Container */


/* Start: Section Title (H2 "tab") */
div.section-title h2 { margin: 0px; font-size: 16px; font-weight: bold; display: inline-block; padding: 10px 12px; border-top-left-radius: 2px; border-top-right-radius: 2px; min-width:200px; }
/* End: Section Title (H2 "tab") */


/* Start: Content and form controls. */
div.col-label { text-align: right; font-weight: bold; }
div.col-form-label { text-align: right; font-weight: bold; padding-right: 15px; }
div.col-label label,
div.col-form-label label,
div.form-row label { margin-bottom: 0px; }

/* Extra space between labels and checkboxes/radio buttons and their labels. */
div.form-row .col-value input[type='radio'],
div.form-row .col-value input[type='checkbox'],
ul.report-columns input[type='checkbox'] { margin-right: 5px!important; }

div.form-row .col-value input[type='radio'] + label,
div.form-row .col-value input[type='checkbox'] + label,
ul.report-columns input[type='checkbox'] + label { display: inline; }

div.required-field:after {
    color: #C41200;
    content: '\002a';
    font-size: 20px;
    left: -7px;
    line-height: 20px;
    position: relative;
    vertical-align: bottom;
}

div.required-field.req-fix:after {
    left: 0;
}

div.required-field-fixed:after {
    color: #C41200;
    content: '\002a';
    font-size: 20px;
    line-height: 20px;
    margin-left: 2px;
    position: absolute;
    vertical-align: bottom;
}

div.required-field-left:before { content: '\002a'; font-size: 20px; line-height: 20px; padding-right: 5px; color: #C41200; margin-left: -12px; vertical-align:bottom; }

span.required-indicator:after { content: '*'; font-size: 14px; color: #C41200; font-weight: bold; position: relative; top: -3px; padding-left: 2px; }

div.notes .note { margin-top: 15px; margin-bottom: 15px; padding-bottom:15px; }
div.rbl-filter input[type=radio] { margin-left: 10px; }
div.rbl-filter label { margin-left: 3px; }

div.form-row { margin: 10px 0; }

hr.form-line { border-top: 0; clear: both; }

div.row-line hr { margin-top: 3px; margin-bottom: 3px; border-top: 1px solid #ccc; }

div.document-list ul 
{
    margin: 0;
}

div.document-list div.documents,
div.document-list div.document-list { border: 0px; padding: 0px; margin: 0px; }
div.document-list ul ul { padding: 0px; margin: 0px; }

div.staff-note-wrapper { min-height: 50px; }

div.row-content .report-chart { text-align: center; }
div.row-content .report-chart img { max-width: 100%; height: auto!important; }

.date-range label { font-weight: normal; }
label.label-normal { font-weight: normal; }
label.label-hidden { display: none; }
legend.legend-hidden { display: none; }

span.header-h5 { margin-top: 10px; margin-bottom: 10px; font-weight: bold; }

/* Titles with underlines in content containers; previously h4 elements, have been replaced with h2. 
    .h2-line h2 appears the same as the previous h4 element. */
.h2-line h2  
{
    font-size: 18px; margin-top: 10px; margin-bottom: 10px; 
}
/* End: Content and form controls. */



/* Start: Reports */
.report-container { width: 100%; max-height: 600px; height: 100%; overflow: auto; }

/* general igniteui input overrides */
.ui-igedit-container {
    border-radius: 4px !important;
}

.ui-igedit-container .ui-igedit-input {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.ui-igedit-container .ui-igedit-button-common {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.ui-igedit-container .ui-corner-all {
    border-radius: 4px !important;
}
.input-group .ui-igedit-container .ui-corner-all {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}
.input-group .ui-igedit-container .ui-igedit-input {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}
.input-group .ui-igedit-container {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}
.input-group input[type=text],
ui-datepicker.input-group input[type=password] {
    margin-top: 0 !important;
    height: 34px !important;
}
.account-disclaimer {
    margin-top: 15px;
}
/* end general ignite ui inputs overrides */

/* igniteui dropdown / combo */
.ui-igcombo-list { font-size: 1.1em!important; border: 1px solid #666!important; /*height: 300px!important;*/ z-index:2!important; }
.ui-igcombo-list.ui-widget-content { border-top: 1px solid #666!important; }
.ui-igcombo-list .combo-item-category { pointer-events: none; font-weight: bold; }
.ui-igcombo-list .combo-item { padding-left: 15px; }

.ui-igcombo-list .ui-igcombo-listitem { float: none!important; }

.ui-igcombo-list .li-category {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    background-image: none;
    /*float: left;*/
    padding: 0 .2em;
    cursor: default;
    position: relative;
    outline: 0;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
}


/* End: Reports */



/* Start: Tile listing */
div.tile 
{
    min-height: 250px;    
    margin-top: 15px;
    margin-bottom: 15px;
}

div.tile:hover, div.tile:active
{ -webkit-box-shadow: 0 0 10px #333; box-shadow: 0 0 10px #333; }

div.tile .content 
{
    padding: 15px;
    min-height: 220px;
}

div.tile .content span.name 
{
    font-size: 16px;
    font-weight: bold;

    display: inline-block;
    margin-bottom: 5px;
}

div.tile .content .fa 
{    
    width: 16px;
    text-align: center;
    margin-right: 6px;
}

div.tile div.tile-buttons 
{
    width: auto;
    height: 30px;
}

div.tile div.tile-buttons a.button,
div.tile div.tile-buttons input[type=submit]
{
    margin: 0px;
    width: 50%;
    display: inline-block;
    float: left;
    border-radius: 0px;
    height: 30px;
    text-align: center;
    text-transform: uppercase;
}

div.tile div.tile-buttons a.button:last-child,
div.tile div.tile-buttons input[type=submit]:last-child
{
    border-right: 0px;
}

a.tile-add:hover { text-decoration: none; }
div.tile-add { background-color: #ccc!important; text-align: center; color: #fff!important; }
div.tile-add .tile-add-plus-container { position: relative; margin-top: 15px; }
div.tile-add .tile-add-plus { 
    font-size: 200px; 
    line-height: 230px; 
    position: absolute;
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
}
div.tile-add .tile-add-text { height: 30px; font-weight: bold; text-transform: uppercase; }
div.tile-add:hover { background-color: #bbb!important; text-shadow: 0 0 5px #555; }

div.tile .other-addresses ul { margin: 0; list-style: none; padding-left: 15px; }
div.tile .others { padding: 0 15px 15px 15px; }
div.tile .otherslink { display:inline-block; padding: 0 15px 15px 15px; }
div.tile hr.others-hr { margin-top: 0px!important; }

div.tile div.address-bottom {
    clear:both;
}

div.tile div.address-bottom:last-child hr { display: none; }
/* End: Tile listing */



/* Start: Account Details */
div#account-holdings-chart {
    margin: 30px 0 50px;
}
div#account-holdings-chart table { margin: 0 auto; }
div#account-holdings-chart img { max-width: 100%!important;  }
div#account-holdings-chart div.chart { text-align: center; }

div.legend { width: 12px; height: 12px; display: inline-block; margin-right: 5px; }

div.col-header { font-weight: bold; }

div#col-header-name { }
div#col-header-percentage { }
div.col-header-percentage { text-align: right; }
div#col-header-value { text-align: right; }
div.col-header-quantity { text-align: right; }
div.col-header-last-price { text-align: right; }
div.col-header-last-priced { text-align: right; }

div.col-details {  }
div#account-holdings .header-row {
    padding-bottom: 8px;
}
div.account-holdings-row { padding: 10px 0; font-size: 0.925em; }

div.account-holdings-row .col-name { }
div.account-holdings-row .col-name:before { } /* content is dynamically set in site-isp css */

div.account-holdings-row .col-quantity { text-align: right; }
div.account-holdings-row .col-quantity:before { content: 'Quantity:'; }

div.account-holdings-row .col-value { text-align: right; }
div.account-holdings-row .col-value:before { content: 'Value:'; }

div.account-holdings-row .col-percentage { text-align: right; }
div.account-holdings-row .col-percentage:after { content: '%'; }

div.account-holdings-row .col-last-price { text-align: right; }
div.account-holdings-row .col-last-price:before { content: 'Last Price:'; }

div.account-holdings-row .col-last-priced { text-align: right; }
div.account-holdings-row .col-last-priced:before { content: 'Last Priced:'; }

div.account-holdings-row .col-name:before,
div.account-holdings-row .col-quantity:before,
div.account-holdings-row .col-value:before,
div.account-holdings-row .col-percentage:before,
div.account-holdings-row .col-last-price:before,
div.account-holdings-row .col-last-priced:before { font-weight: bold; display: none;}


div.account-holdings-row .col-totals-value { text-align: right; font-weight: bold; }

    div#account-holdings .always-show { display:block; }

div.asset-allocations { margin-top: 20px; margin-bottom: 20px; }
/* End: Account Details */

/* Start: Account Details CRT */
.account-details-custom-content-section.col-container {
    display: flex;
    flex-flow: row;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.account-details-custom-content-section .left-col {
    padding-left: 0;
    padding-right: 25px;
}

#account-holdings-chart.account-detail-crt-asset-chart {
    padding-left: 0;
    margin-top: 0;
}
/* END: Account Details CRT */

/* Start: Addition Account Holdings Elements */

div#piechart .ui-chart-piechart-container { border: 0px!important; }

div.all-account-holdings { margin-bottom: 25px; }

/* End: Addition Account Holdings Elements */




/* Start: Transfer instructions */
.transfer-instructions .header-row h5 { white-space: nowrap;  }
.transfer-instructions .header-row .transfer-date h5 { margin-left: -25px; }
.transfer-instructions .item-row { }
/* End: Transfer instructions */




/* Start: Multi Occurring */
.moc-scheduled { margin-bottom: 25px; }
.moc-scheduled .header-row {  }
.moc-scheduled .item-row div {  }
.moc-scheduled .item-row .date { text-align: right; }
.moc-scheduled .item-row .amount { text-align: right; }
.moc-scheduled .item-row .notes {  }

.moc-grants { margin-bottom: 25px; }
.moc-grants .header-row {  }
.moc-grants .item-row div {  }
.moc-grants .item-row .paid-date,
.moc-grants .item-row .reissue-date,
.moc-grants .item-row .check-cleared { text-align: right; }
.moc-grants .item-row .amount { text-align: right; }
/* End: Multi Occurring */




/* Start: Datepicker */
.ui-datepicker 
{ 
    z-index: 999!important; 
    -webkit-box-shadow: 0 0 10px #555; 
            box-shadow: 0 0 10px #555;
}

.ui-datepicker .ui-datepicker-header 
{
    background-color: #e8e8e8;
    color: #fff;
}
/* End: Datepicker */




/* Start: Contributions form */
.contribution-form .multi-select { width: 99%; }

.contribution-form-total { 
    text-align: left; 
    padding-left:50px;
    padding-right:0px; 
    font-size:16px;
}

.contribution-form .amount { text-align: left; }

div.edit-links { padding-left: 0px; padding-right: 0px; }
a.contribution-asset-edit { margin-right: 5px; }
a.contribution-asset-delete {  }

div.edit-links .fa { font-size: 18px; }

.contribution-acknowledge input[type="checkbox"] { float: left; }
.contribution-acknowledge label { float: left; margin-left: 10px; width: 95%; }

#credit-card-calc .row {
    padding-top: 10px;
}

#credit-card-calc .fee-row {
    padding-bottom: 10px;
}

#credit-card-calc .sub,
#credit-card-calc .fees {
    font-weight: initial;
}

#credit-card-calc .sub-amount,
#credit-card-calc .fee-amount {
    font-weight: bold;
    color: rgba(0,0,0,.6);
}

#credit-card-calc .total {
    font-weight: bold;
    font-size: 18px;
}

#credit-card-calc span {
    float: right;
}

#credit-card-calc .total-row {
    font-weight: bold;
    font-size: 18px;
    border-top: 1px solid rgba(0,0,0,.22);
}

/* End: Contributions form */
/* Start: Contribution search */
.contribution-search label 
{ 
    white-space: normal; 
    word-break: break-word;
}
/* End: Contribution search */



/* Start: Grant search */
.grants-search label {
    white-space: normal;
    word-break: break-word;
}
/* End: Grant search */



/* Start: Charity search */
.charity-search label {
    white-space: normal;
    word-break: break-word;
}
.charity-filter { height: 60px; }
.charity-filter input[type=text], .charity-filter select { max-width: 100%; }
/* End: Charity search */



/* Start: Account search */
.account-search input[type=text] { max-width: 100%; }
#accounts-list .list-action { max-width: 100%; }
.account-search select { width: 100%; }
#accounts-search-row-one { margin-bottom: 2em; }
/* End: Account search */

/* Start: Charity detail */
.charity-phone-list { }
.charity-phone-list .phone-nr-header-row { font-weight: bold; }

.gl-codes-header-row { font-weight: bold; }

.add-contact { display: none; }

.phone-nr-row-edit { margin-bottom: 10px; }

.gl-codes-edit select,
.gl-codes-edit input { max-width: 100%; }
/* End: Charity detail*/



/* Start: Grants  */
.rb-list { list-style: none; padding-left: 15px!important; }

ul.select-recipient { margin-top: 15px; padding-left: 20px }

.select-recipient-row { margin-top: 20px; margin-bottom: 20px; }
div.long-label { display: inline-block; width: 25px; }


/* Start: skipnav */
.skipnav { text-align: left; background-color:#fff; color: #000; }
.skipnav a, .skipnav a:link, .skipnav a:visited { color: #000; position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.skipnav a:focus, .skipnav a:active, .skipnav a:hover { position: static; left: 0; width: auto; height: auto; overflow: visible; text-decoration: underline; }
/* End: skipnav */


.ui-widget-content a.edit .fa { margin-left: 7px; }

.ui-widget-content .fa { font-size: 18px; }
div.list-keys .fa { font-size: 18px; }

div.oldmessage { display: none; }

textarea[id*='Contact'] { width: 100%; }


.messages .messages-header-row { font-weight: bold; }

.messages .message-icon {  }
.messages .message-severity {  }
.messages .message-message {  }
.messages .message-override {  }
.messages .message-override-user {  }

.contacts .contact { /*font-weight: bold;*/ padding: 5px 0; border-bottom: 1px solid #ccc;  }
.contacts .contact table { font-weight: normal; margin-bottom: 10px; width: 100%; }

.contacts .contact tr:nth-child(1) { text-decoration: underline; }
.contacts .contact table td:nth-child(1) { width: 15%; }
.contacts .contact table td:nth-child(2) { width: 42%; color: darkblue; }
.contacts .contact table td:nth-child(3) { width: 1%; }
.contacts .contact table td:nth-child(4) { width: 42%; color: green; }

hr.row-line { margin-top: 5px; margin-bottom: 5px; border-bottom: 1px solid #ccc; }

.action-select-button {  }

/* End: Grants  */



/* Start: Steps bar */
.col-5th { width: 20%; float: left;  }
.col-3rd { width: 33.3333333%; float: left;  }

div.steps {
    background: #eaeaea !important;
    margin: 0 -14px 45px;
    border-top: 1px solid #cdcdcd !important;
}
div.steps .step {
    display: flex;
    padding: 2.5% 10%;
    border-bottom: 1px solid #cdcdcd !important;
}
div.steps .step .text {
    order: 2;
}
div.steps .step .step-content {
    order: 1;
}
div.steps .number {
    margin-left: 0 !important;
    padding: 0 10px 0 0;
    background: transparent;
}
.step .number,
.step .text {
    text-transform: uppercase;
    font-weight: bold;
    color: #555;
}
.step .fa-check {
    color: #555;
}
.step-complete .text {
    margin-left: 3px;
}
.step .fa-check {
    display: none;
}
.step-complete .number {
    display: none;
}
.step-complete .fa-check {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.step .text a {
    color: #444 !important;
    text-decoration: underline;
}

@media only screen and (min-width : 993px) {
    div.steps {
        margin: -29px -44px 30px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        border-top: 0 !important;
    }

        div.steps div.step {
            display: block;
            position: relative;
            margin: 30px 0;
            border-top: 0 !important;
            border-bottom: 0 !important;
            width: 25%;
            padding: 0;
        }
        div.steps div.app-short,
        div.step-grants div.step {
            width: 33.33%;
        }

        div.steps .step-content:after {
            content: '';
            height: 0.5em;
            width: 100%;
            background: #ccc;
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            -webkit-transform: translateX(50%);
            -ms-transform: translateX(50%);
            transform: translateX(50%);
        }

        div.steps .step-content-complete:after {
            background: #555;
        }

        div.steps div.step:last-child .step-content:after {
            display: none;
        }

        div.steps .step-active,
        div.steps .step-next,
        div.steps .step-complete {
            background: transparent !important;
        }

        div.steps .step:last-child:after {
            display: none;
        }

    .step-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        z-index: 1;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        margin: 1em 0;
        text-align: center;
        height: 4em;
        max-width: 100%;
    }

    .step .text {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        margin-bottom: 15px;
        padding: 0 35px;
        height: 4em;
        text-align: center;
        min-height: 4em;
        max-width: 100%;
    }

        .step .text span {
            display: block;
            max-width: 100%;
            -ms-flex-negative: 1;
            flex-shrink: 1;
        }

    .step-content .complete {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    .step-content .number {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 2em;
        height: 2em;
        border-radius: 50%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 1.75em;
        font-weight: bold;
        padding: 0 !important;
        color: #fff;
    }

    .step-next .step-content .number {
        background: #ccc !important;
        color: #555 !important;
    }

    .step-content .fa-check {
        display: none;
        width: 2em;
        height: 2em;
        border-radius: 50%;
        border: 8px solid transparent;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 1.75em;
        font-weight: bold;
    }

    .step-complete .number {
        display: none;
    }

    .step-complete .fa-check {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

/* Start: Social media elements */
.social-share 
{ 
    text-align: center; 
    margin: 15px auto 20px auto;
    width: 480px;
    padding: 15px;
    -webkit-box-shadow: 0 0 10px #666;
            box-shadow: 0 0 10px #666;
    font-weight: bold;
    background-color: #f3f3f3;
}
.social-sharelinks a img { display: none; }
.social-sharelinks a .fa { font-size: 32px; }
.social-sharelinks a .fa-facebook-official { color:#3B5998; margin-right: 10px; }
.social-sharelinks a .fa-linkedin { color: #007FB1; margin-right: 10px; }
.social-sharelinks a .fa-twitter { color: #00ACED; }
/* End: Social media elements */




/* Start: Infragistics overrides */
.ui-iggrid-headertext { font-weight: bold; }
.ui-iggrid-table,
.ui-iggrid-content { font-size: 14px; }

.ui-iggrid-filtercell { background-color: #fff!important; }
.ui-iggrid-filtercell .ui-state-default,
.ui-iggrid-filtercell .ui-widget-content .ui-state-default,
.ui-iggrid-filtercell .ui-widget-header .ui-state-default { border: 0px!important;  }

/* 
    Gradient background for mobile listings. 
    Note: CSS classes below for grids that have up to 8 columns.
*/
.grid-mobile-2-row tr.ui-ig-altrecord,
.grid-mobile-3-row tr.ui-ig-altrecord,
.grid-mobile-4-row tr.ui-ig-altrecord,
.grid-mobile-5-row tr.ui-ig-altrecord,
.grid-mobile-6-row tr.ui-ig-altrecord,
.grid-mobile-7-row tr.ui-ig-altrecord,
.grid-mobile-8-row tr.ui-ig-altrecord,
.grid-mobile-9-row tr.ui-ig-altrecord,
.grid-mobile-10-row tr.ui-ig-altrecord,
.grid-mobile-hscroll tr.ui-ig-altrecord /* grid-mobile-hscroll; use for grids that do not go vertical. */
{
    background-color: hsl(0, 0%, 85%)!important; 
    background-image: -webkit-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 90%));
    background-image:      -o-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 90%)); 
    background-image:         -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 90%))); 
    background-image:         linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 90%)); 
}

.grid-col-right { text-align: right!important; }
.grid-col-min-width { display: block; min-width: 150px; } 

#dialog { overflow: hidden; }
#dialog iframe { overflow-y: scroll; overflow-x: hidden; }

/* End: Infragistics overrides*/




/* Start: Details page */
/* Start: Details - Allocations listing */
div.allocation-pool:before { display: none; }
div.allocation-amount:before { display: none; }
div.allocation-percent:before { display: none; }
/* End: Details - Allocations listing */
/* Start: End page */



/* Start: Master distribution listing */
div.distribution-nr:before { display: none; }
div.distribution-amount:before { display: none; }
div.distribution-account-code:before { display: none; }
div.distribution-account-name:before { display: none; }
/* End: Master distribution listing */



/* Start: Application */
.application-form  { }
/* End: Application */



/* Start: Tile dashboard */
div.dashboard-tiles {  }

div.dashboard-tiles .dashboard-tile  { position: relative; margin-bottom: 15px; margin-top: 7px; }
div.dashboard-tiles .dashboard-tile:before { content: ''; padding-top: 100%; display: block; }
div.dashboard-tiles .dashboard-tile .content { margin: 15px; position:  absolute; top: 0; left: 0; bottom: 0; right: 0; }
div.dashboard-tiles .dashboard-tile .content div.title { position: relative; }
div.dashboard-tiles .dashboard-tile .content div.total { position: absolute; font-weight: bold; font-size: 26px; bottom: 0; right: 0; }

div.dashboard-tiles div.dashboard-tile-container:hover div.dashboard-tile,
div.dashboard-tiles .dashboard-tile:hover { -webkit-box-shadow: 0 0 10px #333; box-shadow: 0 0 10px #333; }

div.dashboard-tiles .dashboard-dropdown { 
    display: none; 
    position: absolute;
    -webkit-box-shadow: #000 0px 0px 10px;
            box-shadow: #000 0px 0px 10px;    
    z-index: 15;
    margin-top: -30px;
}

div.dashboard-tiles .dashboard-dropdown:before 
{
    content: '';
    position: absolute;
    -webkit-box-shadow: -2px -2px 4px #555;
            box-shadow: -2px -2px 4px #555;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -10px;
    left: 50%;
    margin-left: -10px;
    margin-bottom: -10px;
    width: 20px;
    height: 20px;
    display: block;
    z-index: -1;
}

div.dashboard-tiles .dashboard-dropdown .dashboard-detail { padding: 5px 10px; clear: both; width: 200px; }
div.dashboard-tiles .dashboard-dropdown .dashboard-detail:first-child { padding-top: 10px; }
div.dashboard-tiles .dashboard-dropdown .dashboard-detail:last-child { padding-bottom: 10px; }

div.dashboard-tiles .dashboard-dropdown .dashboard-detail .description { width: 85%; display:inline-block; }
div.dashboard-tiles .dashboard-dropdown .dashboard-detail .total { width: 15%; font-weight: bold; float: right; text-align: right; display:inline-block; }

a.toggle-definition { cursor: pointer; }
div.definition { display: none; margin-bottom: 10px;  }

div.definitions-mobile { display: none; } 

div.grants-definitions-toggle { display: block; }

/* End: Tile dashboard*/



/* Start: Account selection */
.account-selection-filters label {
    white-space: normal;
    word-break: break-word;
}

.account-selection-filters .account-name input[type='text'] { width: 100%; }
/* End: Account selection */



/* Start: Process Grants listing */

/*.process-row { padding: 10px 0; }*/

.process-header a { font-weight: bold; cursor: pointer; }

.process-dynamic-labels { font-weight: bold; }

.process-amount { text-align: right; }

.process-date { font-weight: normal; }

a.approve-mobile { display: none; }

/* End: Process Grants listing */



/* Start: Process Complete */

.process-row-complete-totals { margin-top: 15px; }


/* End: Process Complete */



/* Start: Dialog window */
.ui-dialog-titlebar .ui-dialog-title { font-weight: bold!important; }

/*.ui-dialog-titlebar .ui-button .ui-button-icon-primary { background-image: url(images/ui-icons_ffffff_256x240.png)!important; }*/

.ui-dialog { -webkit-box-shadow: 0 0 14px #555; box-shadow: 0 0 14px #555; }

/* End: Dialog window */



/* Start: quick access panel */
.quick-access-panel-wrapper { margin: 25px 15px; background-color: #fff; }

.quick-access-panel 
{
    padding: 15px 0;
    background-color: #fff;
    -webkit-box-shadow: 0 0 10px #555;
            box-shadow: 0 0 10px #555;
}
/* End: quick access panel */



/* Start: Two-way messaging */
.messaging-list .unread-msg,
.messaging-list .msg-subject.unread-msg { font-weight: bold; }
.messaging-list .fa-envelope,
.messaging-list .fa-envelope-open-o { font-size: 14px; margin-right: 7px; }

.messaging-form textarea.messaging-msg-text { resize: none; width: 100%; height: 250px; }
.messaging-form span#msg-length { font-size: 12px; }

.messaging-form .more-messages { display: none; }
.messaging-form a.less-messages { display: none; }

.messaging-details .new-msg { color: green; font-weight: bold; }

.messaging-form .msg-details-wrapper,
.messaging-details .msg-details-wrapper { padding-top: 20px; padding-bottom: 20px; }
.messaging-form .msg-details-wrapper-alt,
.messaging-details .msg-details-wrapper-alt { padding-top: 20px; padding-bottom: 20px; background-color: #E0E0E0; }

.messaging-details .message-text,
.messaging-form .message-text { white-space: pre-line; }

.messaging-details .message-text:first-line,
.messaging-form .message-text:first-line { line-height: 0px; }


/* End: Two-way messaging */



/* Start: Donor Circles */
.donor-circles-registry .donor-circle-image {
    float: left;
    width: 100px;
    min-height:100px;
    margin-right: 20px;
}

.donor-circles-registry .donor-circle-image img {
    width: 100px;
}

.donor-circles-registry .donor-circle-title {
    font-size: 14px;
    font-weight: bold;
}

.donor-circles-articles .article-title { font-weight: bold; font-size: 15px; }
.donor-circle-article .article-title h3 {
    margin-top: 0 !important;
}
.donor-circles-articles .article-date { font-size: 12px; margin-bottom: 7px; }
.donor-circles-articles .article-teaser { margin-bottom: 7px; }
.donor-circles-articles .article-read-more { }
.donor-circles-articles .article-row {
    border-top: 1px solid #eee;
    margin-top: 20px;
    padding-top: 30px;
}
    .donor-circles-articles .article-row:first-child {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }
.donor-circles-article-comments textarea {
    margin: 0;
}
/* End: Donor Circles */




/* Start: Exc Dash */
.content-right { text-align: right; }

.ISPSCDashboardWidget, 
.ISPSCDashboardWidget td,
.ISPSCDashboardWidget th { border: 0; }

.Widgetclass table.widgetdaterange tr td { padding-bottom: 6px; }

div.widget-charts table { margin: 0 auto; }
div.widget-charts img { max-width: 100%!important; }
/* End: Exc Dash */



/* Start: Config */
div.config .form-row-line { border-top: 1px solid #ccc; margin-top: 10px; margin-bottom: 0px; }
div.config .isp-def-line { margin-bottom: 10px; }

div.config input[type=checkbox] { margin-right: 5px!important; }
div.config  div.form-row input[type='checkbox'] + label { display: inline; }

div.config span.code,
div.config-field span.code { font-family: 'Courier New'; }

div.export-import { margin-top: 25px; }

div.config .form-row input[type=radio],
div.export-import .export-import-options input[type=radio] { margin-right: 5px; }
div.export-import .export-import-options label { margin-right: 15px; }

.widget-listing { padding: 10px; }

div.permissions div.checkbox-row { border-top: 1px solid #ccc; padding: 6px 0; }

div.report-listing .report-row { border-top: 1px solid #ccc; padding: 6px 0; }
div.col-report-button-no-padding { padding-left: 0px; padding-right: 0px; }

div.report-form .report-form-row { border-top: 1px solid #ccc; padding: 10px 0 6px; margin-top: 0px; margin-bottom: 0px; }

div.report-form .report-filter-format-row { padding-bottom: 5px; }
div.report-form .report-filter-format-label { padding-right: 0px; }
div.report-form .report-filter-format-field { padding-left: 5px; }
div.report-form .sample-report { width: 100%; overflow: auto; }

div.config-report-row  { border-top: 1px solid #ccc; padding: 6px 0; margin: 0px; }
/* End: Config */


h4.title-short { display: none; }

table.simple-styled .ac{
    text-align: center;
}
table.simple-styled .al{
    text-align: left;
}
table.simple-styled .ar{
    text-align: right;
}
table.simple-styled {
    width: 100%;
}

table.simple-styled thead th {
    text-align: center;
    vertical-align: bottom;
}

table.simple-styled tbody th {
    padding: 5px;
    background: #FFF;
    border-bottom: 1px solid #CCC;
    border-top: 1px solid #CCC;
}

    /*table.simple-styled tbody th:first-child {
        border-top: 0;
    }*/
table.simple-styled tbody td:first-child {
    border-left: 0;
}

table.simple-styled tbody tr:last-child {
    border-bottom: 1px solid #CCC;
}

table.simple-styled tbody tr:nth-child(odd) {
    background-color: #EEE;
}

table.simple-styled tbody td {
    border-left: 1px solid #ccc;
    padding: 2px;
}

table.simple-styled tbody td.indented {
    padding-left: 30px;
}

table.simple-styled tfoot th {
    text-align: center;
    vertical-align: top;
}


/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
    /* This application is desktop first, anything over 1200px wide is defined above. */

    h4.title { display: none; }
    h4.title-short { display: block; }

    div.logo { max-width: 300px; } /* Fix for large top nav imgs (caused top right nav to be pushed over main nav) */
    div.logo img { max-width: none; }
    div.logged-in-user { max-width: 350px; }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
    div.header-not-logged-in { position: relative; height: auto!important; margin-bottom: 0px; }

    h1 { font-size: 180% }

    div.header { height: 60px;  }
    div.logo { height: 60px; padding: 5px; }

    /* div.content-container { margin-top: 80px; } Header = 60, add extra to make sure there is no overlap */
    div[class*='-active-doc'] { margin-top: 80px; }

    .current-account { display: block; }
    .current-account, .current-account-isp { top: 60px; }

    /* Start: Application */
    /*.application-form input[type=text] { width: 100%; }*/
    /* End: Application */

    div.mobile-nav ul li { width: 750px; margin: 0 auto; }
    div.mobile-nav li.account-nav-close { width: 100%; padding:0px; }
    div.mobile-nav li.account-nav-close a { width: 750px; margin: 0 auto; padding-right: 15px; }
    div.mobile-nav span.separator { display: none; }
    /*div.mobile-nav ul li a { width: 750px; margin: 0 auto; }*/


    /* Start: Process listing */
    .process-amount-total { text-align: left; }

    .process-header-row { display: none; } 

    .process-row .process-special-handling {  }
    .process-row .process-received-date {  }
    .process-row .process-account-number {  }
    .process-row .process-payee {  }
    .process-row .process-amount {  }
    .process-row .process-recurring {  }
    .process-row .process-messages {  }
    .process-row .process-approve {  }
    .process-row .process-deny {  }
    .process-row .process-guide-star {  }

    .process-row .process-special-handling:empty,
    .process-row .process-received-date:empty,
    .process-row .process-account-number:empty,
    .process-row .process-payee:empty,
    .process-row .process-amount:empty,
    .process-row .process-recurring:empty,
    .process-row .process-messages:empty,
    .process-row .process-approve:empty,
    .process-row .process-deny:empty,
    .process-row .process-guide-star:empty 
    {
        display: none;
    }

    .process-row .process-special-handling,
    .process-row .process-received-date,
    .process-row .process-account-number,
    .process-row .process-payee,
    .process-row .process-amount,
    .process-row .process-recurring,
    .process-row .process-messages,
    .process-row .process-approve,
    .process-row .process-deny,
    .process-row .process-clear,
    .process-row .process-guide-star {
        padding-left: 50%;
        position: relative;
        text-align: left;
    }
    
    .process-row .process-special-handling:before,
    .process-row .process-received-date:before,
    .process-row .process-account-number:before,
    .process-row .process-payee:before,
    .process-row .process-amount:before,
    .process-row .process-recurring:before,
    .process-row .process-messages:before,
    .process-row .process-approve:before,
    .process-row .process-deny:before,
    .process-row .process-clear:before,
    .process-row .process-guide-star:before {
        display: block;
        width: 50%;
        margin-left: -50%;
        position: absolute;
        text-align: right;
        padding-right: 10px;
        font-weight: bold;
    }

    .process-row .process-special-handling:before { content: 'Special:'; }
    .process-row .process-received-date:before { content: 'ID / Received Date:'; }
    .process-row .process-account-number:before { content: 'Account Number / Code:'; }
    .process-row .process-payee:before { content: 'Payee / Purpose:'; }
    .process-row .process-amount:before { content: 'Amount:'; }
    .process-row .process-recurring:before { content: 'Recurring:'; }
    .process-row .process-messages:before { content: 'Message:'; }
    .process-row .process-guide-star:before { content: 'Guide Star:'; }

    a.approve-mobile { display: inline; }

    
    /* End: Process listing */    

    
    .process-approve-total,
    .process-deny-total { padding-left: 41.66666667%!important; position: relative; }
    
    .process-approve-total:before,
    .process-deny-total:before 
    {
        display: block;
        width: 41.66666667%!important;
        margin-left: -41.66666667%!important;
        position: absolute;       
        padding-left: 15px;
    }    

    .process-approve-total span.approvedCount,
    .process-deny-total span.deniedCount { margin-left: 15px; }

    /* Columns to 7 rows */
    .grid-mobile-7-row tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 82%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
    }

    .grid-mobile-7-row tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 82%)), to(hsl(0, 0%, 84%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
    }

    .grid-mobile-7-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 84%)), to(hsl(0, 0%, 86%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
    }

    .grid-mobile-7-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 86%)), to(hsl(0, 0%, 88%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
    }


    .grid-mobile-7-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 88%)), to(hsl(0, 0%, 90%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
    }

    .grid-mobile-7-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 90%)), to(hsl(0, 0%, 92%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
    }

    .grid-mobile-7-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 92%)), to(hsl(0, 0%, 94%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
    }

    /* Columns to 8 rows */
    .grid-mobile-8-row tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 82%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
    }

    .grid-mobile-8-row tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 82%)), to(hsl(0, 0%, 84%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
    }

    .grid-mobile-8-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 84%)), to(hsl(0, 0%, 86%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
    }

    .grid-mobile-8-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 86%)), to(hsl(0, 0%, 88%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
    }


    .grid-mobile-8-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 88%)), to(hsl(0, 0%, 90%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
    }

    .grid-mobile-8-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 90%)), to(hsl(0, 0%, 92%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
    }

    .grid-mobile-8-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 92%)), to(hsl(0, 0%, 94%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
    }

    .grid-mobile-8-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 94%)), to(hsl(0, 0%, 96%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
    }

    /* Columns to 9 rows */
    .grid-mobile-9-row tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 82%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
    }

    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 82%)), to(hsl(0, 0%, 84%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
    }

    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 84%)), to(hsl(0, 0%, 86%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
    }

    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 86%)), to(hsl(0, 0%, 88%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
    }


    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 88%)), to(hsl(0, 0%, 90%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
    }

    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 90%)), to(hsl(0, 0%, 92%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
    }

    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 92%)), to(hsl(0, 0%, 94%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
    }

    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 94%)), to(hsl(0, 0%, 96%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
    }

    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 96%), hsl(0, 0%, 98%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 96%), hsl(0, 0%, 98%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 96%)), to(hsl(0, 0%, 98%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 96%), hsl(0, 0%, 98%));
    }

    /* Columns to 10 rows */
    .grid-mobile-10-row tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 78%), hsl(0, 0%, 80%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 78%), hsl(0, 0%, 80%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 78%)), to(hsl(0, 0%, 80%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 80%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 82%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 82%)), to(hsl(0, 0%, 84%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 84%)), to(hsl(0, 0%, 86%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 86%)), to(hsl(0, 0%, 88%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 88%)), to(hsl(0, 0%, 90%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 90%)), to(hsl(0, 0%, 92%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 92%)), to(hsl(0, 0%, 94%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 94%)), to(hsl(0, 0%, 96%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 96%), hsl(0, 0%, 98%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 96%), hsl(0, 0%, 98%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 96%)), to(hsl(0, 0%, 98%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 96%), hsl(0, 0%, 98%));
    }

    .account-search .account-filter { margin-bottom: 15px; }

    .col-total-name { text-align: right; }
    .col-total-value { text-align: left!important; padding-left: 0px; }
}

.toggle-definition-list { display: none; }


/* Override for container between 768 - 992. */
@media only screen and (min-width : 768px) and (max-width : 992px) {
    .container {
        width: 95%;
    }
}

/* Small Devices, Tablets */ /* max-width: 768 -> changed to 767 due to iPad for the items below */
@media only screen and (max-width : 768px) {
    h1 {
        font-size: 160%;
    }

    .login-box, .application-box { clear: both; }

    .page-title { padding-left: 15px; padding-right: 15px; }

    

    
    div.col-sm-no-padding { padding: 0px; }    

    div.detail-col-left { padding-bottom: 25px; }
    /* Rows have padding applied, padding added for left col when stacking occurs */

    /* Columns to 2 rows */
    .grid-mobile-2-row tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 86%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 86%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 86%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 86%));
    }

    .grid-mobile-2-row tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 92%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 92%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 86%)), to(hsl(0, 0%, 92%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 86%), hsl(0, 0%, 92%));
    }

    /* Columns to 3 rows */
    .grid-mobile-3-row tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 84%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 84%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 84%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 84%));
    }

    .grid-mobile-3-row tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 88%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 88%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 84%)), to(hsl(0, 0%, 88%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 84%), hsl(0, 0%, 88%));
    }

    .grid-mobile-3-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 92%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 92%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 88%)), to(hsl(0, 0%, 92%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 88%), hsl(0, 0%, 92%));
    }

    /* Columns to 4 rows */
    .grid-mobile-4-row tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 83%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 83%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 83%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 83%));
    }

    .grid-mobile-4-row tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 83%), hsl(0, 0%, 86%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 83%), hsl(0, 0%, 86%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 83%)), to(hsl(0, 0%, 86%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 83%), hsl(0, 0%, 86%));
    }

    .grid-mobile-4-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 89%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 89%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 86%)), to(hsl(0, 0%, 89%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 86%), hsl(0, 0%, 89%));
    }

    .grid-mobile-4-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 89%), hsl(0, 0%, 92%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 89%), hsl(0, 0%, 92%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 89%)), to(hsl(0, 0%, 92%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 89%), hsl(0, 0%, 92%));
    }

    /* Columns to 5 rows */
    .grid-mobile-5-row tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 83%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 83%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 83%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 83%));
    }

    .grid-mobile-5-row tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 83%), hsl(0, 0%, 86%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 83%), hsl(0, 0%, 86%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 83%)), to(hsl(0, 0%, 86%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 83%), hsl(0, 0%, 86%));
    }

    .grid-mobile-5-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 89%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 89%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 86%)), to(hsl(0, 0%, 89%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 86%), hsl(0, 0%, 89%));
    }

    .grid-mobile-5-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 89%), hsl(0, 0%, 92%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 89%), hsl(0, 0%, 92%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 89%)), to(hsl(0, 0%, 92%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 89%), hsl(0, 0%, 92%));
    }

    .grid-mobile-5-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 95%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 95%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 92%)), to(hsl(0, 0%, 95%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 92%), hsl(0, 0%, 95%));
    }

    /* Columns to 6 rows */
    .grid-mobile-6-row tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 82%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
    }

    .grid-mobile-6-row tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 82%)), to(hsl(0, 0%, 84%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
    }

    .grid-mobile-6-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 84%)), to(hsl(0, 0%, 86%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
    }

    .grid-mobile-6-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 86%)), to(hsl(0, 0%, 88%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
    }


    .grid-mobile-6-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 88%)), to(hsl(0, 0%, 90%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
    }

    .grid-mobile-6-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 90%)), to(hsl(0, 0%, 92%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
    }

    /* Columns to 7 rows */
    .grid-mobile-7-row tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 82%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
    }

    .grid-mobile-7-row tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 82%)), to(hsl(0, 0%, 84%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
    }

    .grid-mobile-7-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 84%)), to(hsl(0, 0%, 86%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
    }

    .grid-mobile-7-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 86%)), to(hsl(0, 0%, 88%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
    }


    .grid-mobile-7-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 88%)), to(hsl(0, 0%, 90%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
    }

    .grid-mobile-7-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 90%)), to(hsl(0, 0%, 92%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
    }

    .grid-mobile-7-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 92%)), to(hsl(0, 0%, 94%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
    }

    /* Columns to 8 rows */
    .grid-mobile-8-row tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 82%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
    }

    .grid-mobile-8-row tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 82%)), to(hsl(0, 0%, 84%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
    }

    .grid-mobile-8-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 84%)), to(hsl(0, 0%, 86%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
    }

    .grid-mobile-8-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 86%)), to(hsl(0, 0%, 88%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
    }


    .grid-mobile-8-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 88%)), to(hsl(0, 0%, 90%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
    }

    .grid-mobile-8-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 90%)), to(hsl(0, 0%, 92%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
    }

    .grid-mobile-8-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 92%)), to(hsl(0, 0%, 94%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
    }

    .grid-mobile-8-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 94%)), to(hsl(0, 0%, 96%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
    }

    /* Columns to 9 rows */
    .grid-mobile-9-row tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 82%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
    }

    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 82%)), to(hsl(0, 0%, 84%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
    }

    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 84%)), to(hsl(0, 0%, 86%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
    }

    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 86%)), to(hsl(0, 0%, 88%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
    }


    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 88%)), to(hsl(0, 0%, 90%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
    }

    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 90%)), to(hsl(0, 0%, 92%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
    }

    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 92%)), to(hsl(0, 0%, 94%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
    }

    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 94%)), to(hsl(0, 0%, 96%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
    }

    .grid-mobile-9-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 96%), hsl(0, 0%, 98%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 96%), hsl(0, 0%, 98%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 96%)), to(hsl(0, 0%, 98%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 96%), hsl(0, 0%, 98%));
    }

    /* Columns to 10 rows */
    .grid-mobile-10-row tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 78%), hsl(0, 0%, 80%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 78%), hsl(0, 0%, 80%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 78%)), to(hsl(0, 0%, 80%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 78%), hsl(0, 0%, 80%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 80%)), to(hsl(0, 0%, 82%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 82%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 82%)), to(hsl(0, 0%, 84%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 82%), hsl(0, 0%, 84%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 84%)), to(hsl(0, 0%, 86%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 84%), hsl(0, 0%, 86%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 86%)), to(hsl(0, 0%, 88%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 86%), hsl(0, 0%, 88%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 88%)), to(hsl(0, 0%, 90%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 88%), hsl(0, 0%, 90%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 90%)), to(hsl(0, 0%, 92%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 90%), hsl(0, 0%, 92%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 92%)), to(hsl(0, 0%, 94%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 92%), hsl(0, 0%, 94%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 94%)), to(hsl(0, 0%, 96%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 94%), hsl(0, 0%, 96%));
    }

    .grid-mobile-10-row tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord + tr.ui-ig-altrecord {
        background-color: hsl(0, 0%, 85%) !important;
        background-image: -webkit-linear-gradient(top, hsl(0, 0%, 96%), hsl(0, 0%, 98%));
        background-image: -o-linear-gradient(top, hsl(0, 0%, 96%), hsl(0, 0%, 98%));
        background-image: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 96%)), to(hsl(0, 0%, 98%)));
        background-image: linear-gradient(to bottom, hsl(0, 0%, 96%), hsl(0, 0%, 98%));
    }

    /* Start: Transfer instructions */
    .transfer-instructions .header-row { display: none; }
    .transfer-instructions .item-row { margin-bottom: 10px; }
    .transfer-instructions .item-row:last-child { margin-bottom: 0px; }

    .transfer-instructions .item-row .transfer-instructions:before {content: 'ID'; font-weight: bold; }
    .transfer-instructions .item-row .transfer-date { text-align: left; }

    .transfer-instructions .item-row .transfer-date:before { content: 'Contribution Date'; font-weight: bold; }
    .transfer-instructions .item-row .transfer-asset:before { content: 'Asset Name'; font-weight: bold; }
    .transfer-instructions .item-row .transfer-status:before { content: 'Status'; font-weight: bold; }

    .transfer-instructions .item-row .transfer-instructions:before,
    .transfer-instructions .item-row .transfer-date:before,
    .transfer-instructions .item-row .transfer-asset:before,
    .transfer-instructions .item-row .transfer-status:before {
        display: block;
        width: 150px;
        margin-left: -150px;
        position: absolute;
    }

    .transfer-instructions .item-row .transfer-instructions,
    .transfer-instructions .item-row .transfer-date,
    .transfer-instructions .item-row .transfer-asset,
    .transfer-instructions .item-row .transfer-status { padding-left: 150px; position: relative;}
    /* End: Transfer instructions */




    





    /* Start: Contributions form */
    .contribution-form-total { text-align: right; }

    .contribution-form .header-row { display: none; }

    .contribution-form .item-row .expected-date,
    .contribution-form .item-row .type,
    .contribution-form .item-row .name,
    .contribution-form .item-row .ticker,
    .contribution-form .item-row .quantity,
    .contribution-form .item-row .estimated-value,
    .contribution-form .item-row .transferring-ac,
    .contribution-form .item-row .donors {
        text-align: left;
        padding-left: 50%;
        clear: both;
    }

    .contribution-form .item-row .estimated-value { height: 40px; }

    .contribution-form .item-row .expected-date:before,
    .contribution-form .item-row .type:before,
    .contribution-form .item-row .name:before,
    .contribution-form .item-row .ticker:before,
    .contribution-form .item-row .quantity:before,
    .contribution-form .item-row .estimated-value:before,
    .contribution-form .item-row .transferring-ac:before,
    .contribution-form .item-row .donors:before {
        display: block;
        width: 50%;
        margin-left: -50%;
        position: absolute;
        font-weight: bold;
    }

    .contribution-form .item-row .edit-links { width: 100%; clear: both; }

    .contribution-form .item-row .expected-date:empty,
    .contribution-form .item-row .type:empty,
    .contribution-form .item-row .name:empty,
    .contribution-form .item-row .ticker:empty,
    .contribution-form .item-row .quantity:empty,
    .contribution-form .item-row .estimated-value:empty,
    .contribution-form .item-row .transferring-ac:empty,
    .contribution-form .item-row .donors:empty {
        display: none;
    }

    .contribution-form .item-row .expected-date:before { content: 'Expected Date:'; }
    .contribution-form .item-row .type:before { content: 'Type:'; }
    .contribution-form .item-row .name:before { content: 'Name:'; }
    .contribution-form .item-row .ticker:before { content: 'Ticker:'; }
    .contribution-form .item-row .quantity:before { content: 'Quantity:'; }
    .contribution-form .item-row .estimated-value:before { content: 'Estimated Value / Amount:'; }
    .contribution-form .item-row .transferring-ac:before { content: 'Transferring A/C #:'; }

    div.edit-links {
        padding-left: 0px;
        padding-right: 0px;
        text-align: right;
    }

    a.contribution-asset-edit {
        display: inline-block;
        margin-right: 25px;
    }

    a.contribution-asset-delete {
        display: inline-block;
    }
    /* End: Contributions form */



    /* Start: Grants form */

    /* End: Grants form */



    /* Start: Account selection */
    .pending-accounts .header-row {
        display: none;
    }

    .pending-accounts .pending-link,
    .pending-accounts .pending-description,
    .pending-accounts .pending-status,
    .pending-accounts .pending-amount {
        text-align: left;
        padding-left: 35%;
    }

    .pending-accounts .pending-link:before,
    .pending-accounts .pending-description:before,
    .pending-accounts .pending-status:before,
    .pending-accounts .pending-amount:before {
        display: block;
        width: 35%;
        margin-left: -35%;
        position: absolute;
        font-weight: bold;
    }

    .pending-accounts .pending-link:before { }
    /* content set in site-isp css */
    .pending-accounts .pending-description:before { content: 'Current Value:'; }
    .pending-accounts .pending-status:before { content: 'Default Allocation:'; }
    .pending-accounts .pending-amount:before { content: 'Allocation:'; }

    .pending-accounts .pending-link:empty,
    .pending-accounts .pending-description:empty,
    .pending-accounts .pending-status:empty,
    .pending-accounts .pending-amount:empty { display: none; }
    /* End: Account selection */


    /* Start: Process complete */
    .process-row-complete-header { display: none; }

    

    .process-row-complete .process-complete-id,
    .process-row-complete .process-complete-account,
    .process-row-complete .process-complete-payee,
    .process-row-complete .process-complete-amount,
    .process-row-complete .process-complete-recurring {
        padding-left: 50%;
        position: relative;
        text-align: left;
    }
    
    .process-row-complete .process-complete-id:before,
    .process-row-complete .process-complete-account:before,
    .process-row-complete .process-complete-payee:before,
    .process-row-complete .process-complete-amount:before,
    .process-row-complete .process-complete-recurring:before {
        display: block;
        width: 50%;
        margin-left: -50%;
        position: absolute;
        text-align: right;
        padding-right: 10px;
        font-weight: bold;
    }

    .process-row-complete .process-complete-id:before { content: 'ID / Received Date:'; }
    .process-row-complete .process-complete-account:before { content: 'Account Number / Code:'; }
    .process-row-complete .process-complete-payee:before { content: 'Payee:';  }
    .process-row-complete .process-complete-amount:before { content: 'Amount:'; }
    .process-row-complete .process-complete-recurring:before { content: 'Recurring:'; }

    .process-row-complete .process-complete-id:empty,
    .process-row-complete .process-complete-account:empty,
    .process-row-complete .process-complete-payee:empty,
    .process-row-complete .process-complete-amount:empty,
    .process-row-complete .process-complete-recurring:empty
    {
        display: none!important;
    }
    /* End: Process complete */

    /* End: Steps */
    .form-group {
        position: relative;
    }
    .application-form__users .form-group select,
    .application-form__fund .form-group select,
    .application-form__login .form-group select,
    .application-form__donors .form-group select {
        width: 100%;
    }
    .form-group.required .control-label:after {
      content:"*";
      color:red;
      margin-left: 3px;
    }
    .application-form__users .control-label,
    .application-form__donors .control-label {
        display: block;
    }
    .application-form__donors .form-group input[type="checkbox"] {
        display: inline-block;
        margin-top: 2px;      
        margin-right: 5px;
    }
    .application-form__donors .form-group input[type="checkbox"] ~ .control-label {
        display: inline-block;        
    }
    .application-form__donors .phone-number-row .form-row:first-child {
        display: none;
    }
    .application-form__donors .phone-number-row .col-phone {
    
        text-align: left !important;
    }
    .application-form__donors .phone-number-row .col-form-label.col-phone {
        margin-top: 5px;
        width: 100%;
    }
    .application-form__donors .phone-number-row .col-form-label.col-phone label {
        color: #444;
        margin-bottom: 5px;    
    }
    .application-form__donors .phone-number-row .col-value.col-phone {
        width: 85%;
    }
    .application-form__donors .phone-number-row .col-value.col-phone label {
        width: 9%;
        text-align:right;   
    }
    .application-form__donors .phone-number-row .col-value.col-phone-work input:first-child {
        width: 80%;
    }
    .application-form__donors .phone-number-row .col-value.col-phone-work .phone-work-ext-input {
        width: 10% !important;
        float: right;
    }

    .application-form__donors .phone-number-row .col-phone-radio {
        width: 15%;
        padding: 0 1%;
    }
    .application-form__donors .phone-number-row .col-phone-radio:after {
        content: 'Primary';
    }

    .footer .reninc {
        float: none;
    }

    div.mobile-nav ul li,
    div.mobile-nav ul li.account-nav-close a {
        width: 100%;
    }


    /* Start: Account holdings columns */
    div.account-holdings-row .col-name:empty,
    div.account-holdings-row .col-quantity:empty,
    div.account-holdings-row .col-value:empty,
    div.account-holdings-row .col-percentage:empty,
    div.account-holdings-row .col-last-price:empty,
    div.account-holdings-row .col-last-priced:empty {
        display: none;
    }
    /* End: Account holdings columns */

    .account-selection-filters .account-selection-filter {
        float: right;
    }

    .account-selection-filters .account-selection-clear {
        float: left;
    }

        .account-selection-filters .account-selection-clear a {
            margin-left: 0px;
        }

    .account-selection-filters .account-id,
    .account-selection-filters .account-code {
        margin-bottom: 10px;
    }

    .process-dynamic-labels div,
    .process-row .button-row {
        padding: 0px;
    }

    .process-dynamic-labels .process-amount-label {
        padding-left: 15px;
    }

    .process-approve-total,
    .process-deny-total {
        padding-left: 50% !important;
        position: relative;
    }

    .process-approve-total:before,
    .process-deny-total:before {
        width: 50% !important;
        margin-left: -50% !important;
    }

    .process-approve-total span.approvedCount,
    .process-deny-total span.deniedCount { margin-left: 0px; }

    .messages .message-icon:before { content: ' '; }
    .messages .message-severity:before { content: 'Severity:'; font-weight: bold; }
    .messages .message-message:before { content: 'Message:'; font-weight: bold; }
    .messages .message-override:before { content: 'Override?:'; font-weight: bold; }
    .messages .message-override-user:before { content: 'User:'; font-weight: bold; }

    .messages .message-icon:before,
    .messages .message-severity:before,
    .messages .message-message:before,
    .messages .message-override:before,
    .messages .message-override-user:before 
    { 
         display: block;
         position: absolute;
         width: 25%;
         margin-left: -25%;
    }

    .messages .message-icon,
    .messages .message-severity,
    .messages .message-message,
    .messages .message-override,
    .messages .message-override-user
    { 
        margin-left: 20%;
    }

    .messages .message-icon:empty,
    .messages .message-severity:empty,
    .messages .message-message:empty,
    .messages .message-override:empty,
    .messages .message-override-user:empty { display: none; }

    /* IG grouping */
    div[id*="groupbyarea"] { display: none; }

    /* Start: Charity detail */
    .charity-phone-list .phone-description,
    .charity-phone-list .phone-number,
    .charity-phone-list .phone-extension,
    .charity-phone-list .phone-primary,
    .charity-phone-list .phone-start, 
    .charity-phone-list .phone-end, 
    .charity-phone-list .phone-user
    {  
        margin-left: 50%;
    }

    .charity-phone-list .phone-description:empty,
    .charity-phone-list .phone-number:empty,
    .charity-phone-list .phone-extension:empty,
    .charity-phone-list .phone-primary:empty,
    .charity-phone-list .phone-start:empty, 
    .charity-phone-list .phone-end:empty, 
    .charity-phone-list .phone-user:empty  { display: none; }

    .charity-phone-list .phone-description:before { content: 'Type:'; }
    .charity-phone-list .phone-number:before { content: 'Number:'; }
    .charity-phone-list .phone-extension:before { content: 'Extension:'; }
    .charity-phone-list .phone-primary:before { content: 'Primary:'; }
    .charity-phone-list .phone-start:before { content: 'Start Date:'; }
    .charity-phone-list .phone-end:before { content: 'End Date:'; }
    .charity-phone-list .phone-user:before { content: 'User:'; }

    .charity-phone-list .phone-description:before,
    .charity-phone-list .phone-number:before,
    .charity-phone-list .phone-extension:before,
    .charity-phone-list .phone-primary:before,
    .charity-phone-list .phone-start:before, 
    .charity-phone-list .phone-end:before, 
    .charity-phone-list .phone-user:before 
    { 
        font-weight: bold;
        text-align: right;
        display: block;
        position: absolute;
        width: 50%;
        margin-left: -50%;
        padding-right: 28px;
    }

    .charity-phone-list .phone-nr-row { margin-bottom: 15px; }
    .charity-phone-list .phone-nr-row-edit div[class*='phone-'] { margin-bottom: 7px; }
    .charity-phone-list .phone-nr-row-edit .phone-description { font-size: 18px; font-weight: bold; margin-left: 0; }
    .charity-phone-list .phone-nr-row-edit .phone-description:before { content: ''; }

    .gl-codes-row { margin-bottom: 15px; }

    .gl-codes-row .gl-code,
    .gl-codes-row .purpose-code,
    .gl-codes-row .constituent-id,
    .gl-codes-row .isps7,
    .gl-codes-row .isps8,
    .gl-codes-row .start-date,
    .gl-codes-row .end-date,
    .gl-codes-row .user { margin-left: 50%; }

    /*.gl-codes-row .gl-code,
    .gl-codes-row .purpose-code { margin-bottom: 12px; }*/

    .gl-codes-row .gl-code:before { content: 'GL Code:'; }
    .gl-codes-row .purpose-code:before { content: 'Grantee Code:'; }
    .gl-codes-row .constituent-id:before { content: 'Constituent ID:'; }

    .gl-codes-row .start-date:before { content: 'Start Date:'; }
    .gl-codes-row .end-date:before { content: 'End Date:'; }
    .gl-codes-row .user:before { content: 'User:'; }

    .gl-codes-row .gl-code:before,
    .gl-codes-row .purpose-code:before,
    .gl-codes-row .constituent-id:before, 
    .gl-codes-row .isps7:before,
    .gl-codes-row .isps8:before,
    .gl-codes-row .start-date:before,
    .gl-codes-row .end-date:before,
    .gl-codes-row .user:before
    { 
        font-weight: bold;
        text-align: right;
        display: block;
        position: absolute;
        width: 50%;
        margin-left: -50%;
        padding-right: 28px;
    }

    .gl-codes-row .gl-code:empty,
    .gl-codes-row .purpose-code:empty,
    .gl-codes-row .constituent-id:empty,
    .gl-codes-row .isps7:empty,
    .gl-codes-row .isps8:empty,
    .gl-codes-row .start-date:empty,
    .gl-codes-row .end-date:empty,
    .gl-codes-row .user:empty
    { 
        display: none;
    }
    /* End: Charity detail*/


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

    
    /* Definitions lists; display "Click here..." link, hide list. */
    div.definitions-mobile { display: block; }
    div.definitions-list { display: none; }    
    .toggle-definition-list { display: block; }

}

@media only screen and (max-width : 767px) {
    .toggle-definition-list { display: block; }

    div#account-holdings .header-row {
        display: none;
    }

    div.account-holdings-row {
        padding-bottom: 15px;
    }

    div.account-holdings-row .col-name,
    div.account-holdings-row .col-quantity,
    div.account-holdings-row .col-value,
    div.account-holdings-row .col-percentage,
    div.account-holdings-row .col-last-price,
    div.account-holdings-row .col-last-priced {
        padding-left: 50%;
        position: relative;
        text-align: left;
    }

    div.account-holdings-row .col-name:before,
    div.account-holdings-row .col-quantity:before,
    div.account-holdings-row .col-value:before,
    div.account-holdings-row .col-percentage:before,
    div.account-holdings-row .col-last-price:before,
    div.account-holdings-row .col-last-priced:before {
        display: block;
        width: 50%;
        margin-left: -50%;
        position: absolute;
        text-align: right;
        padding-right: 10px;
    }

    div.account-holdings-row .col-totals-label { text-align: right; font-weight: bold; }
    div.account-holdings-row .col-totals-value { text-align: left; font-weight: bold; }

    div.activity-history-date,
    div.activity-history-description,
    div.activity-history-user { padding-left: 30%; position: relative; text-align: left; }

    div.activity-history-date { margin-top: 10px; }
    div.activity-history-user { margin-bottom: 5px; }
    div.activity-history-date:before { content: 'Date'; }
    div.activity-history-description:before {content: 'Activity Description'; }
    div.activity-history-user:before { content: 'User';}

    div.activity-history-date:before,
    div.activity-history-description:before,
    div.activity-history-user:before {
        font-weight: bold;
        display: block;
        width: 30%;
        margin-left: -30%;
        position: absolute;
    }

    /* Start: Multi Occurring */
    .moc-scheduled .header-row,
    .moc-grants .header-row { display: none; }

    .moc-scheduled .item-row,
    .moc-grants .item-row { margin-bottom: 10px; }

    .moc-scheduled .item-row .row-line,
    .moc-grants .item-row .row-line { margin-top: 10px; }

    .moc-scheduled .item-row .note:empty { display: none; }

    .moc-scheduled .item-row .date,
    .moc-scheduled .item-row .amount,
    .moc-scheduled .item-row .note,
    .moc-grants .item-row .id,
    .moc-grants .item-row .status,
    .moc-grants .item-row .paid-date,
    .moc-grants .item-row .amount,
    .moc-grants .item-row .check-nr,
    .moc-grants .item-row .reissue-date,
    .moc-grants .item-row .reissue-check,
    .moc-grants .item-row .check-cleared {
        text-align: left;
        padding-left: 35%;
    }

    .moc-scheduled .item-row .date:before,
    .moc-scheduled .item-row .amount:before,
    .moc-scheduled .item-row .note:before,
    .moc-grants .item-row .id:before,
    .moc-grants .item-row .status:before,
    .moc-grants .item-row .paid-date:before,
    .moc-grants .item-row .amount:before,
    .moc-grants .item-row .check-nr:before,
    .moc-grants .item-row .reissue-date:before,
    .moc-grants .item-row .reissue-check:before,
    .moc-grants .item-row .check-cleared:before {
        display: block;
        width: 35%;
        margin-left: -35%;
        position: absolute;
        font-weight: bold;
    }

    .moc-grants .item-row .id:empty,
    .moc-grants .item-row .status:empty,
    .moc-grants .item-row .paid-date:empty,
    .moc-grants .item-row .amount:empty,
    .moc-grants .item-row .check-nr:empty,
    .moc-grants .item-row .reissue-date:empty,
    .moc-grants .item-row .reissue-check:empty,
    .moc-grants .item-row .check-cleared:empty {
        display: none;
    }

    .moc-scheduled .item-row .date:before { content: 'Date to be processed:'; }
    .moc-scheduled .item-row .amount:before { content: 'Amount:'; }
    .moc-scheduled .item-row .note:before { content: 'Notes:'; }
    .moc-grants .item-row .id:before { content: 'ID:'; }
    .moc-grants .item-row .status:before { content: 'Status:'; }
    .moc-grants .item-row .paid-date:before { content: 'Date Paid:'; }
    .moc-grants .item-row .amount:before { content: 'Amount:'; }
    .moc-grants .item-row .check-nr:before { content: 'Check No.:'; }
    .moc-grants .item-row .reissue-date:before { content: 'Reissue Date:'; }
    .moc-grants .item-row .reissue-check:before { content: 'Reissue Check:'; }
    .moc-grants .item-row .check-cleared:before { content: 'Check Cleared Date:'; }
    /* End: Multi Occurring */
}



/* Custom step between small and extra small devices */
@media only screen and (max-width : 640px) {
    h1 { font-size: 140% }

    div.details-allocation-header-row { display: none; }
    div.details-allocation-row .allocation-pool  { float:none; padding-left: 53%; width: 100%; }
    div.details-allocation-row .allocation-amount { float:none; padding-left: 53%; width: 100%; text-align: left; }
    div.details-allocation-row .allocation-percent { float:none; padding-left: 53%; width: 100%; text-align: left; }

    div.allocation-pool:before, 
    div.allocation-amount:before, 
    div.allocation-percent:before 
    { 
        font-weight: bold; 
        display: block; 
        width: 50%; 
        margin-left: -50%;
        position: absolute; 
        padding-right: 28px;
        text-align: right;
    }

    div.distributions-header-row { display: none; }

    div.distribution-nr,
    div.distribution-amount,
    div.distribution-account-code,
    div.distribution-account-name { float: none; padding-left: 53%; width: 100%; text-align: left; }

    div.distribution-nr:before { content: 'Distribution #'; }
    div.distribution-amount:before { content: 'Amount'; } 

    div.distribution-nr:before, 
    div.distribution-amount:before, 
    div.distribution-account-code:before,
    div.distribution-account-name:before 
    { 
        font-weight: bold; 
        display: block; 
        width: 50%; 
        margin-left: -50%;
        position: absolute; 
        padding-right: 28px;
        text-align: right;
    }

    div.col-form-label { width: 100%; }
    div.col-form-label { text-align: left; }
    div.col-form-value { width: 100%; }
    div.col-form-value { text-align: left; }

    .form-field-full-width { width: 100%; }

    div.col-form-label input,
    div.col-form-label select,
    div.col-form-label label input,
    div.col-form-label label select,
    .form-field-full-width { margin-bottom: 6px; }

    div.form-row .col-value{ width: 100%!important; }

    div.required-field:after { content: ''; margin-right: 0px; }
    div.required-field:before { content: '\002a'; font-size: 20px; line-height: 20px; padding-right: 5px; color: #C41200; margin-left: -12px; vertical-align:bottom; }

    /* Adjust required field indicator when error highlighting is applied. */
    div.form-row-error div.required-field:before { margin-left: -17px; } 
    .form-row-error { padding-left: 5px; }

    .no-offset-custom { margin-left: 0px; }

    .moc-scheduled .item-row .date,
    .moc-scheduled .item-row .amount,
    .moc-scheduled .item-row .note,
    .moc-scheduled .item-row .date:before,
    .moc-scheduled .item-row .amount:before,
    .moc-scheduled .item-row .note:before ,
    .moc-grants .item-row .id,
    .moc-grants .item-row .status,
    .moc-grants .item-row .paid-date,
    .moc-grants .item-row .amount,
    .moc-grants .item-row .check-nr,
    .moc-grants .item-row .reissue-date,
    .moc-grants .item-row .reissue-check,
    .moc-grants .item-row .check-cleared,
    .moc-grants .item-row .id:before,
    .moc-grants .item-row .status:before,
    .moc-grants .item-row .paid-date:before,
    .moc-grants .item-row .amount:before,
    .moc-grants .item-row .check-nr:before,
    .moc-grants .item-row .reissue-date:before,
    .moc-grants .item-row .reissue-check:before,
    .moc-grants .item-row .check-cleared:before
    { 
        width: 100%!important; 
        margin-left: 0px; 
        padding-left: 0px; 
        display: block; 
        position: relative; 
    } 


    .contribution-form .form-row .col-label { clear: both; text-align: left; width: 100%!important; }
    .contribution-form .form-row .col-label label { margin-bottom: 0px; }
    .contribution-form .form-row .col-value { width: 100%!important; margin-bottom: 6px; margin-left: 0px }

    .contribution-form .item-row .expected-date,
    .contribution-form .item-row .type,
    .contribution-form .item-row .name,
    .contribution-form .item-row .ticker,
    .contribution-form .item-row .quantity,
    .contribution-form .item-row .amount,
    .contribution-form .item-row .transferring-ac,
    .contribution-form .item-row .donors,
    .contribution-form .item-row .expected-date:before,
    .contribution-form .item-row .type:before,
    .contribution-form .item-row .name:before,
    .contribution-form .item-row .ticker:before,
    .contribution-form .item-row .quantity:before,
    .contribution-form .item-row .amount:before,
    .contribution-form .item-row .transferring-ac:before,
    .contribution-form .item-row .donors:before 
    {
        width: 100%!important; 
        margin-left: 0px; 
        padding-left: 0px; 
        display: block; 
        position: relative; 
    }

    .social-share { width: 100%; }

    /* Start: Grants */

    .grant-allocations .header-row { display: none; }

    .grant-allocations .pool-name,
    .grant-allocations .current-value,
    .grant-allocations .default-allocation,
    .grant-allocations .reallocate
    {
        text-align: left; padding-left: 35%; 
    }

    .grant-allocations .pool-name:before,
    .grant-allocations .current-value:before,
    .grant-allocations .default-allocation:before,
    .grant-allocations .reallocate:before
    {
        display: block;
        width: 35%;
        margin-left: -35%;
        position: absolute;        
        font-weight: bold;
    }

    .grant-allocations .pool-name:before {  } /* content set in site-isp css */
    .grant-allocations .current-value:before { content: 'Current Value:'; }
    .grant-allocations .default-allocation:before { content: 'Default Allocation:' }
    .grant-allocations .reallocate:before { content: 'Divestment Allocation:' }
    .grant-allocations .allocation:before { content: 'Allocation:' }

    .grant-allocations .pool-name,
    .grant-allocations .current-value,
    .grant-allocations .default-allocation,
    .grant-allocations .reallocate,
    .grant-allocations .pool-name:before,
    .grant-allocations .current-value:before,
    .grant-allocations .default-allocation:before,
    .grant-allocations .reallocate:before
    {
        width: 100%!important; 
        margin-left: 0px; 
        display: block; 
        position: relative; 
    }

    /* End: Grants */



    /* Start: Account selection */

    .pending-accounts .header-row { display: none; }

    .pending-accounts .pending-link,
    .pending-accounts .pending-description,
    .pending-accounts .pending-status,
    .pending-accounts .pending-amount
    {
        text-align: left; padding-left: 35%; 
    }

    .pending-accounts .pending-link:before,
    .pending-accounts .pending-description:before,
    .pending-accounts .pending-status:before,
    .pending-accounts .pending-amount:before
    {
        display: block;
        width: 35%;
        margin-left: -35%;
        position: absolute;        
        font-weight: bold;
    }

    .pending-accounts .pending-link:before {  } /* content set in site-isp css */
    .pending-accounts .pending-description:before { content: 'Current Value:'; }
    .pending-accounts .pending-status:before { content: 'Default Allocation:' }
    .pending-accounts .pending-amount:before { content: 'Allocation:' }

    .pending-accounts .pending-link,
    .pending-accounts .pending-description,
    .pending-accounts .pending-status,
    .pending-accounts .pending-amount,
    .pending-accounts .pending-link:before,
    .pending-accounts .pending-description:before,
    .pending-accounts .pending-status:before,
    .pending-accounts .pending-amount:before
    {
        width: 100%!important; 
        margin-left: 0px; 
        padding-left: 0px; 
        display: block; 
        position: relative; 
    }

    .pending-accounts .pending-link:empty,
    .pending-accounts .pending-description:empty,
    .pending-accounts .pending-status:empty,
    .pending-accounts .pending-amount:empty {
        display: none;
    }
    /* End: Account selection */


    /* Giving the phone fields col-xs-10 will make them 83% wide at 768px. It is needed at 640px instead.
        Keep this below the .col-value class, as the phone number divs use both classes. */
    div.form-row .col-phone { width: 83.33333333%!important; }

    div.long-label { display: none; }

    div.logo { width:80%; }

    div.no-label { margin-left: 0px; }
    
    /*div.detail-row div[class*='col-'],*/
    div.form-row div[class*='col-'] { padding-left: 0px; padding-right: 0px; }   

    /* Start: Process listing */
    .process-row .process-special-handling,
    .process-row .process-received-date,
    .process-row .process-account-number,
    .process-row .process-payee,
    .process-row .process-amount,
    .process-row .process-recurring,
    .process-row .process-messages,
    .process-row .process-approve,
    .process-row .process-deny,
    .process-row .process-guide-star,
    .process-row .process-special-handling:before,
    .process-row .process-received-date:before,
    .process-row .process-account-number:before,
    .process-row .process-payee:before,
    .process-row .process-amount:before,
    .process-row .process-recurring:before,
    .process-row .process-messages:before,
    .process-row .process-approve:before,
    .process-row .process-deny:before,
    .process-row .process-guide-star:before {
        width: 100% !important;
        margin-left: 0px;
        padding-left: 0px;
        display: block;
        position: relative;
        text-align: left
    }

    .process-row .process-special-handling,
    .process-row .process-received-date,
    .process-row .process-account-number,
    .process-row .process-payee,
    .process-row .process-amount,
    .process-row .process-recurring,
    .process-row .process-messages,
    .process-row .process-approve,
    .process-row .process-deny,
    .process-row .process-guide-star { margin-bottom: 10px; padding-left: 15px; }

    
    .process-row .process-approve,
    .process-row .process-deny 
    {
        padding-left: 100px;        
        clear: both;
    }

    .process-row .process-approve:before,
    .process-row .process-deny:before 
    {
        width: auto!important;
        position: absolute;
        margin-left: -85px;
        width: 85px;
    }

    /* End: Process listing */   

    /*div[class*="col-xs"].*/

    .charity-phone-list .phone-description,
    .charity-phone-list .phone-number,
    .charity-phone-list .phone-extension,
    .charity-phone-list .phone-primary,
    .charity-phone-list .phone-start,
    .charity-phone-list .phone-end,
    .charity-phone-list .phone-user,
    .charity-phone-list .phone-description:before,
    .charity-phone-list .phone-number:before,
    .charity-phone-list .phone-extension:before,
    .charity-phone-list .phone-primary:before,
    .charity-phone-list .phone-start:before,
    .charity-phone-list .phone-end:before,
    .charity-phone-list .phone-user:before {
        width: 100%!important; 
        margin-left: 0px; 
        padding-left: 0px; 
        display: block; 
        position: relative; 
        text-align: left;
    }

    .gl-codes-row .gl-code,
    .gl-codes-row .purpose-code,
    .gl-codes-row .constituent-id,
    .gl-codes-row .isps7,
    .gl-codes-row .isps8,
    .gl-codes-row .start-date,
    .gl-codes-row .end-date,
    .gl-codes-row .user,
    .gl-codes-row .gl-code:before,
    .gl-codes-row .purpose-code:before,
    .gl-codes-row .constituent-id:before,
    .gl-codes-row .isps7:before,
    .gl-codes-row .isps8:before,
    .gl-codes-row .start-date:before,
    .gl-codes-row .end-date:before,
    .gl-codes-row .user:before
    { 
        width: 100%!important; 
        margin-left: 0px; 
        padding-left: 0px; 
        display: block; 
        position: relative; 
        text-align: left;
    }

    .report-columns li { clear: both; width: 100%; }

    
    /* Correspondence pager */
    span.corr-pager-text { display: none; }
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

   /* div[class*='col-'] { padding-left: 5px!important; padding-right: 5px!important; }*/
    /* div.content-container { padding-left: 5px!important; padding-right: 5px!important; } */
    div.col-sm-no-padding { padding-left: 5px!important; padding-right: 5px!important; }
    div.col-sm-no-padding div[class*='col-'] { margin-left: 0px; margin-right: 0px; padding-left: 0px!important; padding-right: 0px!important; }

    div.col-sm-no-padding div[class*='col-'].process-approve-total,
    div.col-sm-no-padding div[class*='col-'].process-deny-total { padding-left: 50%!important; }

    div.col-sm-no-padding div[class*='col-'].process-approve-total:before,
    div.col-sm-no-padding div[class*='col-'].process-deny-total:before { padding-left: 0px; }

    div.col-sm-no-padding div[class*='col-'].process-approve,
    div.col-sm-no-padding div[class*='col-'].process-deny 
    {
        padding-left: 85px!important;        
        clear: both;
    }

    div.col-sm-no-padding div[class*='col-'].col-label { padding-right: 5px!important; }
    div.col-sm-no-padding div[class*='col-'].col-value { padding-left: 5px!important; }

    div.detail-row div.col-sm-no-padding div[class*='col-'] { margin-left: 0px; margin-right: 0px; padding-left: 0px!important;  }

    div.documents .col-xs-3 { clear: both; }
    div.documents .col-xs-3:last-child { margin-bottom: 15px; }

    div.button a,
    a.button
    {
        display: inline-block;
        padding: 5px 10px;
        border-radius: 2px;
        font-weight: bold;    
    }

    div.details-allocation-row .allocation-pool,
    div.details-allocation-row .allocation-amount,
    div.details-allocation-row .allocation-percent 
    {
         position:relative; 
         padding-left: 15px; 
         width: 100%;
         text-align: left;  
    }

    div.details-allocation-row .allocation-pool,
    div.details-allocation-row .allocation-amount { padding-bottom: 5px; }
    div.details-allocation-row .allocation-percent { padding-bottom: 15px; }

    div.allocation-pool:before, 
    div.allocation-amount:before, 
    div.allocation-percent:before 
    { 
        margin-left: 0px;
        font-weight: bold; 
        position: relative;
        width: 100%!important; 
        text-align: left;
    }    

    div.distribution-nr:before, 
    div.distribution-amount:before, 
    div.distribution-account-code:before,
    div.distribution-account-name:before 
    { 
        margin-left: 0px;
        font-weight: bold; 
        position: relative;
        width: 100%!important; 
        text-align: left;
    }    



    .messages div[class*="message-"],
    .messages div[class*="message-"]:before { display: block; float: left; clear: both; width: 100%; }

    .charity-search input[type=text],
    .charity-search select,
    .grants-search input[type=text],
    .grants-search select,
    .contribution-search input[type=text],
    .contribution-search select { margin-bottom: 5px; }

    ul.rows { padding-left: 0px; }

    .messages .message-icon,
    .messages .message-severity,
    .messages .message-message,
    .messages .message-override,
    .messages .message-override-user { margin-bottom: 7px; }

    .messages .message-icon,
    .messages .message-severity,
    .messages .message-message,
    .messages .message-override,
    .messages .message-override-user,
    .messages .message-icon:before,
    .messages .message-severity:before,
    .messages .message-message:before,
    .messages .message-override:before,
    .messages .message-override-user:before     
    {
        width: 100%!important; 
        margin-left: 0px; 
        padding-left: 0px; 
        display: block; 
        position: relative; 
    }

    .action-select-button 
    {
        clear: both;
    }

    .action-select-button input[type=submit]
    {
        clear: both; 
        margin-top: 10px;
        float: right;
    }

    .action-select-button select 
    {
        clear: both; 
        float: right;
    }

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
    .form-row .col-label, .detail-row .col-label { clear: both; text-align: left; width: 100%!important; }
    .form-row .col-label label, .detail-row .col-label label { margin-bottom: 0px; }
    .form-row .col-value, .detail-row .col-value { width: 100%!important; margin-bottom: 6px; margin-left: 0px }
    
    /* Giving the phone fields col-xs-10 will make them 83% wide at 768px. It is needed at 640px instead.
        Keep this below the .col-value class, as the phone number divs use both classes. */
    .form-row .col-phone { width: 83.33333333%!important; }

    /* Align buttons right on very small screens */
    .button-left { float: right!important; }
    /* Stack buttons */
    .button-left, .button-right { clear: both; }

    
}

@import url("print.css") print;