:root {

  --mcg-accent-green: #7fb642;
  --mcg-accent-orange: #ec7023;
  --mcg-accent-gold: #f8b61e;
  --mcg-accent-blue: #17a1da;
  
  --mcg-white: #fff;
  
  --mcg-gray-1: #f2f2f2;
  --mcg-gray-2: #dedede;
  --mcg-gray-3: #b9b9b9;
  --mcg-gray-4: #999999;
  --mcg-gray-5: #636363;
  --mcg-gray-6: #373737;
  --mcg-gray-7: #000;
  
  --mcg-navy-1: #f4f5f9;
  --mcg-navy-2: #e4e9f2;
  --mcg-navy-3: #d5dee8;
  --mcg-navy-4: #c5d2e4;
  --mcg-navy-5: #95aaca;
  --mcg-navy-6: #6581b1;
  --mcg-navy-7: #355997;
  
  --mcg-sky-1: #f0f6fc; 
  --mcg-sky-2: #e1edf5;
  --mcg-sky-3: #d0e3ef;
  --mcg-sky-4: #bfd9ea;
  --mcg-sky-5: #92c0de;
  --mcg-sky-6: #5ea6cf;
  --mcg-sky-7: #1973ac;

  --mcg-purple-1: #f7f3f7;
  --mcg-purple-2: #e8dbea;
  --mcg-purple-3: #d8c5db;
  --mcg-purple-4: #caacce;
  --mcg-purple-5: #b68ebd;
  --mcg-purple-6: #a16cab;
  --mcg-purple-7: #763880;

  --mcg-green-1: #f4f7f4;
  --mcg-green-2: #dce9dc; 
  --mcg-green-3: #c5d8c6;
  --mcg-green-4: #aac7b0;
  --mcg-green-5: #84af91;
  --mcg-green-6: #53956d;
  --mcg-green-7: #156133;

  --mcg-orange-1: #fef6f4;
  --mcg-orange-2: #fbe6e0;
  --mcg-orange-3: #f6d2ca;
  --mcg-orange-4: #eeafa0;
  --mcg-orange-5: #e58b75;
  --mcg-orange-6: #dd674b;
  --mcg-orange-7: #bf4621; 

  --mcg-red-1: #fbf3f3;
  --mcg-red-2: #f3dbdf;
  --mcg-red-3: #eac3c6;
  --mcg-red-4: #e3a7b0;
  --mcg-red-5: #d4828e;
  --mcg-red-6: #c35566;
  --mcg-red-7: #971c27;

  --mcg-brown-1: #fcf6ef;
  --mcg-brown-2: #f7ead8;
  --mcg-brown-3: #f1ddc0;
  --mcg-brown-4: #edcfa5;
  --mcg-brown-5: #d8b283;
  --mcg-brown-6: #c0915b;
  --mcg-brown-7: #895723; 

  --mcg-yellow-1: #fffed7;
  --mcg-yellow-2: #fef9b3;
  --mcg-yellow-3: #fef58f;
  --mcg-yellow-4: #fef16c;
  --mcg-yellow-5: #fdec48;
  --mcg-yellow-6: #fde824;
  --mcg-yellow-7: #fce300;

/* ---------------------------- */
/* set up named color variables */
/* ---------------------------- */
  --mcg-primary: var(--mcg-navy-7); 
  --mcg-success: var(--mcg-green-7); 
  --mcg-danger: var(--mcg-red-7);
  --mcg-dark: var(--mcg-gray-6);
  --mcg-core-gray: var(--mcg-gray-1);
  --mcg-text-body: var(--mcg-gray-6);
  --mcg-text-link: var(--mcg-navy-7);
  --mcg-error-red: #c9302c;
}

/*== COLORS ==*/

.mcg-bg-white {background-color:var(--mcg-white); color: var(--mcg-text-body);}

.mcg-bg-error-red {background-color:var(--mcg-error-red); color: var(--mcg-white);} 
.text-error-red {color: var(--mcg-error-red) !important;}

.mcg-bg-accent-green {background-color: var(--mcg-accent-green); color: var(--mcg-text-body);}
.mcg-bg-accent-orange {background-color: var(--mcg-accent-orange);}
.mcg-bg-accent-gold {background-color: var(--mcg-accent-gold); color: var(--mcg-text-body);}
.mcg-bg-accent-blue {background-color: var(--mcg-accent-blue);}

.mcg-bg-primary {background-color: var(--mcg-primary)!important; color: var(--mcg-white) !important;}
    .mcg-bg-primary h1, 
    .mcg-bg-primary .h1,
    .mcg-bg-primary h2, 
    .mcg-bg-primary .h2,
    .mcg-bg-primary h3,
    .mcg-bg-primary .h3,
    .mcg-bg-primary h4,
    .mcg-bg-primary .h4 {color: var(--mcg-white) !important;}
    .mcg-bg-primary a {color: var(--mcg-white) !important;}
    .mcg-bg-primary .link--transparent a:hover {color:var(--mcg-primary) !important;}

.mcg-bg-white {background-color:  var(--mcg-white);}
.mcg-bg-gray-1 {background-color: var(--mcg-gray-1); color: var(--mcg-text-body);}
.mcg-bg-gray-2 {background-color: var(--mcg-gray-2); color: var(--mcg-text-body);}
.mcg-bg-gray-3 {background-color: var(--mcg-gray-3); }
.mcg-bg-gray-4 {background-color: var(--mcg-gray-4);}
.mcg-bg-gray-5 {background-color: var(--mcg-gray-5);  color: var(--mcg-white);}
.mcg-bg-gray-6 {background-color: var(--mcg-gray-6); color: var(--mcg-white);}
.mcg-bg-gray-7 {background-color: var(--mcg-gray-7); color: var(--mcg-white) !important;}
    .mcg-bg-gray-7 a {color: var(--mcg-white) !important;}
    .mcg-bg-gray-7 .mcg-link--transparent a:hover {color:var(--mcg-gray-7) !important;}
    
.mcg-bg-navy-1 {background-color: var(--mcg-navy-1); color: var(--mcg-text-body);}
.mcg-bg-navy-2 {background-color: var(--mcg-navy-2); color: var(--mcg-text-body);}
.mcg-bg-navy-3 {background-color: var(--mcg-navy-3); color: var(--mcg-text-body);}
.mcg-bg-navy-4 {background-color: var(--mcg-navy-4); color: var(--mcg-text-body);}
.mcg-bg-navy-5 {background-color: var(--mcg-navy-5);}
.mcg-bg-navy-6 {background-color: var(--mcg-navy-6); color: var(--mcg-white);}
.mcg-bg-navy-7 {background-color: var(--mcg-navy-7)!important; color: var(--mcg-white) !important;} 
    .mcg-bg-navy-7 a {color: var(--mcg-white) !important;}
    .mcg-bg-navy-7 .mcg-link--transparent a:hover {color:var(--mcg-navy-7) !important;}

.mcg-bg-sky-1 {background-color: var(--mcg-sky-1); color: var(--mcg-text-body);}
.mcg-bg-sky-2 {background-color: var(--mcg-sky-2); color: var(--mcg-text-body);}
.mcg-bg-sky-3 {background-color: var(--mcg-sky-3); color: var(--mcg-text-body);}
.mcg-bg-sky-4 {background-color: var(--mcg-sky-4); color: var(--mcg-text-body);}
.mcg-bg-sky-5 {background-color: var(--mcg-sky-5);}
.mcg-bg-sky-6 {background-color: var(--mcg-sky-6);}
.mcg-bg-sky-7 {background-color: var(--mcg-sky-7)!important; color: var(--mcg-white);}
    .mcg-bg-sky-7 h1, 
    .mcg-bg-sky-7 .h1,
    .mcg-bg-sky-7 h2, 
    .mcg-bg-sky-7 .h2,
    .mcg-bg-sky-7 h3,
    .mcg-bg-sky-7 .h3,
    .mcg-bg-sky-7 h4,
    .mcg-bg-sky-7 .h4 {color: var(--mcg-white) !important;}
    .mcg-bg-sky-7 a {color: var(--mcg-white) !important;}
    .mcg-bg-sky-7 .mcg-link--transparent a:hover {color:var(--mcg-sky-7) !important;}
    
.mcg-bg-purple-1 {background-color: var(--mcg-purple-1); color: var(--mcg-text-body);}
.mcg-bg-purple-2 {background-color: var(--mcg-purple-2); color: var(--mcg-text-body);}
.mcg-bg-purple-3 {background-color: var(--mcg-purple-3); color: var(--mcg-text-body);}
.mcg-bg-purple-4 {background-color: var(--mcg-purple-4); color: var(--mcg-text-body);}
.mcg-bg-purple-5 {background-color: var(--mcg-purple-5);}
.mcg-bg-purple-6 {background-color: var(--mcg-purple-6);}
.mcg-bg-purple-7 {background-color: var(--mcg-purple-7)!important; color: var(--mcg-white)!important;}
    .mcg-bg-purple-7 a {color: var(--mcg-white) !important;}
    .mcg-bg-purple-7 .mcg-link--transparent a:hover {color:var(--mcg-purple-7) !important;}

.mcg-bg-green-1 {background-color: var(--mcg-green-1); color: var(--mcg-text-body);}
.mcg-bg-green-2 {background-color: var(--mcg-green-2); color: var(--mcg-text-body);}
.mcg-bg-green-3 {background-color: var(--mcg-green-3); color: var(--mcg-text-body);}
.mcg-bg-green-4 {background-color: var(--mcg-green-4); color: var(--mcg-text-body);}
.mcg-bg-green-5 {background-color: var(--mcg-green-5);}
.mcg-bg-green-6 {background-color: var(--mcg-green-6);}
.mcg-bg-green-7 {background-color: var(--mcg-green-7)!important; color: var(--mcg-white)!important;}
    .mcg-bg-green-7 a {color: var(--mcg-white) !important;}
    .mcg-bg-green-7 .mcg-link--transparent a:hover {color:var(--mcg-green-7) !important;}
    
.mcg-bg-orange-1 {background-color: var(--mcg-orange-1); color: var(--mcg-text-body);}
.mcg-bg-orange-2 {background-color: var(--mcg-orange-2); color: var(--mcg-text-body);}
.mcg-bg-orange-3 {background-color: var(--mcg-orange-3); color: var(--mcg-text-body);}
.mcg-bg-orange-4 {background-color: var(--mcg-orange-4); color: var(--mcg-text-body);}
.mcg-bg-orange-5 {background-color: var(--mcg-orange-5);}
.mcg-bg-orange-6 {background-color: var(--mcg-orange-6);}
.mcg-bg-orange-7 {background-color: var(--mcg-orange-7)!important; color: var(--mcg-white)!important;}
    .mcg-bg-orange-7 a {color: var(--mcg-white) !important;}
    .mcg-bg-orange-7 .mcg-link--transparent a:hover {color:var(--mcg-orange-7) !important;}

.mcg-bg-red-1 {background-color: var(--mcg-red-1); color: var(--mcg-text-body);}
.mcg-bg-red-2 {background-color: var(--mcg-red-2); color: var(--mcg-text-body);}
.mcg-bg-red-3 {background-color: var(--mcg-red-3); color: var(--mcg-text-body);}
.mcg-bg-red-4 {background-color: var(--mcg-red-4); color: var(--mcg-text-body);}
.mcg-bg-red-5 {background-color: var(--mcg-red-5);}
.mcg-bg-red-6 {background-color: var(--mcg-red-6);}
.mcg-bg-red-7 {background-color: var(--mcg-red-7)!important; color: var(--mcg-white)!important;}
    .mcg-bg-red-7 a {color: var(--mcg-white) !important;}
    .mcg-bg-red-7 .mcg-link--transparent a:hover {color:var(--mcg-red-7) !important;}

.mcg-bg-brown-1 {background-color: var(--mcg-brown-1); color: var(--mcg-text-body);}
.mcg-bg-brown-2 {background-color: var(--mcg-brown-2); color: var(--mcg-text-body);}
.mcg-bg-brown-3 {background-color: var(--mcg-brown-3); color: var(--mcg-text-body);}
.mcg-bg-brown-4 {background-color: var(--mcg-brown-4); color: var(--mcg-text-body);}
.mcg-bg-brown-5 {background-color: var(--mcg-brown-5);}
.mcg-bg-brown-6 {background-color: var(--mcg-brown-6);}
.mcg-bg-brown-7 {background-color: var(--mcg-brown-7)!important; color: var(--mcg-white)!important;}
    .mcg-bg-brown-7 a {color: var(--mcg-white) !important;}
    .mcg-bg-brown-7 .mcg-link--transparent a:hover {color:var(--mcg-brown-7) !important;}

.mcg-bg-yellow-1 {background-color: var(--mcg-yellow-1); color: var(--mcg-text-body);}
.mcg-bg-yellow-2 {background-color: var(--mcg-yellow-2); color: var(--mcg-text-body);}
.mcg-bg-yellow-3 {background-color: var(--mcg-yellow-3); color: var(--mcg-text-body);}
.mcg-bg-yellow-4 {background-color: var(--mcg-yellow-4); color: var(--mcg-text-body);}
.mcg-bg-yellow-5 {background-color: var(--mcg-yellow-5); color: var(--mcg-text-body);}
.mcg-bg-yellow-6 {background-color: var(--mcg-yellow-6); color: var(--mcg-text-body);}
.mcg-bg-yellow-7 {background-color: var(--mcg-yellow-7)!important; color: var(--mcg-text-body)!important;}

/*============================*/
/* for accessible focus state */
/*============================*/

/* --> DARK BACKGROUNDS <-- */
.mcg-bg-primary a:not(.navbar-nav a):focus, 
.mcg-bg-primary a:not(.navbar-nav a):focus img,
.mcg-bg-primary button:focus,
.mcg-bg-primary input:focus,
.mcg-bg-primary select:focus,

.mcg-bg-gray-7 a:not(.navbar-nav a):focus, 
.mcg-bg-gray-7 a:not(.navbar-nav a):focus img,
.mcg-bg-gray-7 button:focus,
.mcg-bg-gray-7 input:focus,
.mcg-bg-gray-7 select:focus,

.mcg-bg-navy-7 a:not(.navbar-nav a):focus, 
.mcg-bg-navy-7 a:not(.navbar-nav a):focus img,
.mcg-bg-navy-7 button:focus,
.mcg-bg-navy-7 input:focus,
.mcg-bg-navy-7 select:focus,

.mcg-bg-sky-7 a:not(.navbar-nav a):focus, 
.mcg-bg-sky-7 a:not(.navbar-nav a):focus img,
.mcg-bg-sky-7 button:focus,
.mcg-bg-sky-7 input:focus,
.mcg-bg-sky-7 select:focus, 

.mcg-bg-purple-7 a:not(.navbar-nav a):focus, 
.mcg-bg-purple-7 a:not(.navbar-nav a):focus img,
.mcg-bg-purple-7 button:focus,
.mcg-bg-purple-7 input:focus,
.mcg-bg-purple-7 select:focus, 

.mcg-bg-purple-7 a:not(.navbar-nav a):focus, 
.mcg-bg-purple-7 a:not(.navbar-nav a):focus img,
.mcg-bg-purple-7 button:focus,
.mcg-bg-purple-7 input:focus,
.mcg-bg-purple-7 select:focus, 

.mcg-bg-green-7 a:not(.navbar-nav a):focus, 
.mcg-bg-green-7 a:not(.navbar-nav a):focus img,
.mcg-bg-green-7 button:focus,
.mcg-bg-green-7 input:focus,
.mcg-bg-green-7 select:focus,

.mcg-bg-orange-7 a:not(.navbar-nav a):focus, 
.mcg-bg-orange-7 a:not(.navbar-nav a):focus img,
.mcg-bg-orange-7 button:focus,
.mcg-bg-orange-7 input:focus,
.mcg-bg-orange-7 select:focus,

.mcg-bg-red-7 a:not(.navbar-nav a):focus, 
.mcg-bg-red-7 a:not(.navbar-nav a):focus img,
.mcg-bg-red-7 button:focus,
.mcg-bg-red-7 input:focus,
.mcg-bg-red-7 select:focus,

.mcg-bg-brown-7 a:not(.navbar-nav a):focus, 
.mcg-bg-brown-7 a:not(.navbar-nav a):focus img,
.mcg-bg-brown-7 button:focus,
.mcg-bg-brown-7 input:focus,
.mcg-bg-brown-7 select:focus {outline-color: var(--mcg-yellow-2) !important;}

/* --> some LIGHT BACKGROUNDS need a darker outline than the default <-- */
.mcg-bg-brown-1 a:not(.navbar-nav a):focus, 
.mcg-bg-brown-1 a:not(.navbar-nav a):focus img,
.mcg-bg-brown-1 button:focus,
.mcg-bg-brown-1 input:focus,
.mcg-bg-brown-1 select:focus,
.mcg-bg-gray-1 a:not(.navbar-nav a):focus, 
.mcg-bg-gray-1 a:not(.navbar-nav a):focus img,
.mcg-bg-gray-1 button:focus,
.mcg-bg-gray-1 input:focus,
.mcg-bg-gray-1 select:focus,
.mcg-bg-green-1 a:not(.navbar-nav a):focus, 
.mcg-bg-green-1 a:not(.navbar-nav a):focus img,
.mcg-bg-green-1 button:focus,
.mcg-bg-green-1 input:focus,
.mcg-bg-green-1 select:focus,
.mcg-bg-navy-1 a:not(.navbar-nav a):focus, 
.mcg-bg-navy-1 a:not(.navbar-nav a):focus img,
.mcg-bg-navy-1 button:focus,
.mcg-bg-navy-1 input:focus,
.mcg-bg-navy-1 select:focus,
.mcg-bg-sky-1 a:not(.navbar-nav a):focus, 
.mcg-bg-sky-1 a:not(.navbar-nav a):focus img,
.mcg-bg-sky-1 button:focus,
.mcg-bg-sky-1 input:focus,
.mcg-bg-sky-1 select:focus,
.mcg-bg-orange-1 a:not(.navbar-nav a):focus, 
.mcg-bg-orange-1 a:not(.navbar-nav a):focus img,
.mcg-bg-orange-1 button:focus,
.mcg-bg-orange-1 input:focus,
.mcg-bg-orange-1 select:focus,
.mcg-bg-purple-1 a:not(.navbar-nav a):focus, 
.mcg-bg-purple-1 a:not(.navbar-nav a):focus img,
.mcg-bg-purple-1 button:focus,
.mcg-bg-purple-1 input:focus,
.mcg-bg-purple-1 select:focus,
.mcg-bg-red-1 a:not(.navbar-nav a):focus, 
.mcg-bg-red-1 a:not(.navbar-nav a):focus img,
.mcg-bg-red-1 button:focus,
.mcg-bg-red-1 input:focus,
.mcg-bg-red-1 select:focus,
.mcg-bg-yellow-1 a:not(.navbar-nav a):focus, 
.mcg-bg-yellow-1 a:not(.navbar-nav a):focus img,
.mcg-bg-yellow-1 button:focus,
.mcg-bg-yellow-1 input:focus,
.mcg-bg-yellow-1 select:focus,
.mcg-bg-yellow-2 a:not(.navbar-nav a):focus, 
.mcg-bg-yellow-2 a:not(.navbar-nav a):focus img,
.mcg-bg-yellow-2 button:focus,
.mcg-bg-yellow-2 input:focus,
.mcg-bg-yellow-2 select:focus {outline-color: #0F87FF !important;}

.mcg-bg-brown-2 a:not(.navbar-nav a):focus, 
.mcg-bg-brown-2 a:not(.navbar-nav a):focus img,
.mcg-bg-brown-2 button:focus,
.mcg-bg-brown-2 input:focus,
.mcg-bg-brown-2 select:focus,
.mcg-alert-warning a:not(.navbar-nav a):focus, 
.mcg-alert-warning a:not(.navbar-nav a):focus img,
.mcg-alert-warning button:focus,
.mcg-alert-warning input:focus,
.mcg-alert-warning select:focus
.mcg-bg-gray-2 a:not(.navbar-nav a):focus, 
.mcg-bg-gray-2 a:not(.navbar-nav a):focus img,
.mcg-bg-gray-2 button:focus,
.mcg-bg-gray-2 input:focus,
.mcg-bg-gray-2 select:focus,
.mcg-bg-green-2 a:not(.navbar-nav a):focus, 
.mcg-bg-green-2 a:not(.navbar-nav a):focus img,
.mcg-bg-green-2 button:focus,
.mcg-bg-green-2 input:focus,
.mcg-bg-green-2 select:focus,
.mcg-alert-success a:not(.navbar-nav a):focus, 
.mcg-alert-success a:not(.navbar-nav a):focus img,
.mcg-alert-success button:focus,
.mcg-alert-success input:focus,
.mcg-alert-success select:focus,
.mcg-bg-navy-2 a:not(.navbar-nav a):focus, 
.mcg-bg-navy-2 a:not(.navbar-nav a):focus img,
.mcg-bg-navy-2 button:focus,
.mcg-bg-navy-2 input:focus,
.mcg-bg-navy-2 select:focus,
.mcg-bg-orange-2 a:not(.navbar-nav a):focus, 
.mcg-bg-orange-2 a:not(.navbar-nav a):focus img,
.mcg-bg-orange-2 button:focus,
.mcg-bg-orange-2 input:focus,
.mcg-bg-orange-2 select:focus,
.mcg-bg-purple-2 a:not(.navbar-nav a):focus, 
.mcg-bg-purple-2 a:not(.navbar-nav a):focus img,
.mcg-bg-purple-2 button:focus,
.mcg-bg-purple-2 input:focus,
.mcg-bg-purple-2 select:focus,
.mcg-bg-red-2 a:not(.navbar-nav a):focus, 
.mcg-bg-red-2 a:not(.navbar-nav a):focus img,
.mcg-bg-red-2 button:focus,
.mcg-bg-red-2 input:focus,
.mcg-bg-red-2 select:focus,
.mcg-alert-danger a:not(.navbar-nav a):focus, 
.mcg-alert-danger a:not(.navbar-nav a):focus img,
.mcg-alert-danger button:focus,
.mcg-alert-danger input:focus,
.mcg-alert-danger select:focus,
.mcg-bg-sky-2 a:not(.navbar-nav a):focus, 
.mcg-bg-sky-2 a:not(.navbar-nav a):focus img,
.mcg-bg-sky-2 button:focus,
.mcg-bg-sky-2 input:focus,
.mcg-bg-sky-2 select:focus,
.mcg-alert-info a:not(.navbar-nav a):focus, 
.mcg-alert-info a:not(.navbar-nav a):focus img,
.mcg-alert-info button:focus,
.mcg-alert-info input:focus,
.mcg-alert-info select:focus {outline-color: var(--mcg-brown-7) !important;}


/*===========================================*/
/*   for Design Guide color swatch display   */
/*===========================================*/

.colorsquare--small {
    height: 2.5rem;
    width: 2.5rem;
    display: inline-block;
    margin-right: .25rem;
    margin-bottom: .25rem;
    vertical-align: middle;
    position: relative;
}

.colorsquare--small__dot {
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    position: absolute;
    left: .9rem;
    top: .8rem;
}

.colorsquare {
    width: 7.5rem; 
    height: 8rem; 
    margin-right: .5rem;
    margin-bottom: .5rem;
    position: relative;
}
.colorsquare__dot {
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    position: absolute;
    left: 6.3rem;
    top: .4rem;
}
.colorsquare__text {
    text-align: center;
    width: 100%;
}

.utility-value-color {
    border-width: 1px;
    border-color: #e6e6e6;
    border-style: solid;
    margin: 0;
    white-space: nowrap;
    padding: 0 .25rem;
}

.utility-value-color-chip {
    height: .75rem;
    border-radius: 99rem;
    width: .75rem;
    display: inline-block;
    margin-right: .25rem;
    margin-bottom: .25rem;
    vertical-align: middle;}