/*
01 login page
02 global and layout
03 header and main nav
04 content
05 footer
06 sidebar
07 parallax stuff
08a header-nav-footer colors
08 colors and helper classes
09 responsive stuff
*/

/**********      01 login       *************/

.login-page {
    background: url(/assets/images/agency_home.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.login-button {
    width: 200px;
    margin: 10rem auto 2rem 20%;
}

.request-access-form {
    width: 40rem;
    margin-left: 4rem;
    border: 1px solid #666;
    background-color: #eee;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/**********      02 global and layout     *************/

body {
  /* font-family: 'Catamaran-Regular'; */
  letter-spacing: 0.3pt;
  color: #000;
  font-family: 'Roboto', sans-serif;
  background-color: #ededed;
}
.alt-font {
  font-family: 'Berthold Imago';
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  /* font-family: "Catamaran-Medium"; */
  color: #000;
  /* font-family: 'Roboto-Medium'; */
  font-family: 'Roboto', sans-serif;
}
.grid-container {
  max-width: 78.5rem;
}
header  {
  padding:0;
}
section {
  overflow: hidden;
  display: table;
  width: 100%;
  /* min-height: 30.0rem; */
  /* padding: 10.0rem 0; */
  /* position: relative; */
}
section.header-container {
  overflow:visible;
}
.primary-header, .secondary-header {
  width:100%;
}
  .main-content {
    background-color:#ededed;
    padding: 2rem 0;
    margin-top: 10rem;
    z-index: 0;
  }
  .no-header {
    margin-top: -10rem;
  }
.full-height {
  height: 100vh !important;
}
.half-height {
  height: 50vh !important;
  padding:8.0rem 0 4.0rem 0;
}
.quarter-height {
  height: 25vh !important;
  /* height: 200px; */
}
.anchored-header {
  margin-top: 5rem !important;
}
a, .link,
.info a,
.info .tabs-title > a:focus,
.open-detail .tabs-title > a:focus,
.open-detail a,
.tabs-title > a[aria-selected='true'] {
  color: #1b3782;
}

a:hover, .link:hover,
.info a:hover,
.info .tabs-title > a:hover,
.open-detail .tabs-title > a:hover,
.open-detail a:hover {
  color: #2ba6cb;
}

select {
  font-family:sans-serif;
}
.button {
  border-radius: 5px;
  padding: 0.5em 1.5em;
  font-size:1.1rem;
}
/**********      03 header and main nav     *************/
.header-container {
  background-size:cover;
  background-attachment: fixed;
  z-index: 10;
  color: #fff;
  position: fixed;
  top:0;
  z-index:9999;
}
.primary-header .top-bar,
.secondary-header .grid-container {
  margin-left: 4rem;
  margin-right: 4rem;
}
.top-bar {
    margin-left: 0;
    align-items: center;
}
.menu .logo h4 a {
  /*font-family: 'Roboto-Medium'; */
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.primary-header .logo,
.large .primary-header .logo {
  padding-top: .5rem;
  padding-bottom: .5rem;
}
  .small .primary-header .menu-text.logo {
    padding: 0;
  }
.primary-header .menu .menu-text.logo,
.primary-header .menu .menu-text.logo a {
  padding-left: 0 !important;
}
.logo,
.logo img,
.menu .logo a {
  transition: all 0.4s ease-in-out;
  /* transition-delay: 0.2s; */
  text-transform: none !important;
}
.small .logo img {
  height: 30px;
}
.primary-header .menu a {
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  /* color: #0d397d; navy blue */
  /* color: #00679a; approved cmb blue */
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.primary-header .menu .submenu a {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.primary-header .menu .is-active a,
.primary-header .dropdown.menu > li.is-active > a,
.small .primary-header .top-bar a,
.small .primary-header .dropdown.menu > li.is-active > a {
  color: #fff;
  text-decoration: none;
}
  .primary-header .menu .is-active a:hover,
  .primary-header .menu .is-active .submenu a:hover {
    text-decoration: underline;
    color:#fff;
  }
.primary-header .submenu.js-dropdown-active {
  /* background-color: #1b3782; royal blue */
  /* background-color: #0d397d; navy blue */
  /* background-color: #00679a; cmg blue */
}

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
    border-width: 0;
    border: none;
}
/* when primary-header is blue or .small class */
.small .primary-header {
/*  background-image: url(/assets/images/vcms_header_upper.png);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff; */
}

.top-bar, .top-bar ul {
    background-color: rgba(0, 0, 0, 0);
    color: #fff;
}

.top-bar a {
    color: #fff;
}
.mini-top-bar {
    background-image: none;
    background-color: rgba(255,255,255,0);
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-right:0;
    width: 100%;
}

.mini-top-bar ul {
    background-color: rgba(255, 255, 255, 0);
}

.mini-top-bar .is-dropdown-submenu.js-dropdown-active {
    background-color: #333;
}

.mini-top-bar .is-dropdown-submenu.js-dropdown-active li {
    text-align: right;
}

.secondary-header {
    padding: 0.5rem 1rem;
    height: auto;
}
.secondary-header .grid-container {
    /*margin-top: 1rem;*/
    padding:1rem 0 0rem 0;
    transition: all 0.4s ease-in-out;
    max-width: 100%;
    /* transition-delay: 0.2s; */
}

.large .secondary-header .grid-container {
  /*margin-top: 1rem !important;*/
  padding:1rem 0 0rem 0;
}
.small .secondary-header .grid-container {
    margin-top: 0 !important;
    padding:0.5rem 0 0 0;
}
.small .secondary-header h4 {
  font-size: 1.3rem;
}
.small .secondary-header h1 {
  font-size: 2rem;
}
.secondary-header h1 {
    color: #fff;
}

#jarallax-container-0 {
  clip: auto !important;
}
  #jarallax-container-0 > :first-child {
    margin-top:0 !important;
  }

  /**********     04  content      *************/
.row.header {
  font-weight:600;
}
.bucket-container {
  padding-left: 0 !important;
  margin-bottom: 1rem;
}
.bucket-container li {
  padding-left: 0 !important;
  margin-bottom: 0.5rem;
}
.bucket-title {
  padding-left: .5rem;
  padding-top: .2rem;
  padding-bottom: .2rem;
  margin-bottom: 1px;
}
.bucket .instance {
  padding: 5px 0;
}
.bucket .instance .button,
.tabs-panel-table .button {
  margin-bottom: 0;
  font-weight: 600;
}
.instance-title {
  font-size: 1.1rem;
  line-height: 1.4;
}
.status {
  font-size: 15px;
  font-weight: 800;
}
  .status.badge .fa {
      vertical-align: middle;
  }
.badge {
  font-weight:bold;
  font-size:large;
  vertical-align:top;
}
.accordion {
  background-color: inherit;
  width:100%;
}
.accordion-item {
  background-color: #fefefe;
  margin: 1.5rem 0;
  border: 1px solid #333;
}
.accordion-menu-title, .accordion-title {
    font-size: 1.5rem;
    line-height:1.5;
    padding:0.5rem 1rem;
}
a.accordion-menu-title::after {
  border-top-width:10px !important;
  border-right-width:10px !important;
  border-left-width:10px !important;
}
.accordion-menu .nested.is-accordion-submenu {
  padding-right: 1rem;
}
/* used for accordion */
.accordion-title::before,
ul.large-bullet li::before {
  font-family: "Font Awesome 5 Free";
  content:"\f055";
  font-weight: bold;
  margin-top: -1rem;
}

ul.no-bullet {
    list-style-type: none;
}
.accordion-item.is-active .accordion-title::before {
  content:"\f056";
}

.accordion-title:hover, .accordion-title:focus {
  transition: ease .5s;
  background-color:#fff;
}
.accordion-content {
  margin-left: 40px;
  border: none;
}
/* end for accordion */

  .category-block ul {
      list-style-type: none;
      margin-left: 0;
  }

  .category-block ul li {
      padding: 0.2rem;
  }

  .category-block input {
      margin-bottom: 0;
  }

  .category-block .button {
      margin-top: 0.4rem;
  }

  .category-block .card-section ul li .display-on-hover {
      display: none;
  }

  .category-block .card-section ul li:hover {
      background-color: #fefefe;
  }

  .category-block .card-section ul .no-white-hover:hover {
      background-color: #eee;
  }

  .category-block .card-section ul li:hover .display-on-hover {
      display: block;
  }

  .category-block .card-section {
      background-color: #eee;
  }

  #card-wrapper .card-divider {
      min-height: 170px;
  }
  .card-divider.draggable {
      position: relative;
  }
  .card {
    overflow:visible;
    border: 1px solid #333;
    background-color:#f2f2f2;
    margin-right: 1rem;
    vertical-align: top;
    display: inline-block;
    position: relative;
    width:100%;
  }
  .card.action.status-completed,
  .card.action.status-passed {
    border: 1px solid #a1a1a1;
  }
  .card.action.status-completed .card-section,
  .card.action.status-completed h5,
  .card.action.status-completed .card-divider,
  .card.action.status-passed .card-section,
  .card.action.status-passed h5,
  .card.action.status-passed .card-divider {
    color: #a1a1a1;
  }
  .card.action .card-divider {
    font-size: xxx-large;
    float:right;
    color: #333;
    padding-bottom: 0;
  }
  .card-divider {
    float:none;
    background-color:#f2f2f2;
  }
  .card .fa-check {
    display:none;
  }
  .card .fa-check.text-left {
    position: absolute;
    left: 0;
    margin-left: 16px;
  }
  .card.status-completed .fa-check,
  .card.status-passed .fa-check {
    display: inline;
    font-size: xxx-large;
  }
  .card-section {
    clear: both;
    font-size: 1.2rem;
  }
  .project-container {
      position: relative;
  }
  .project-container .card-divider, .vendor-container .card-divider, .category-container .card-divider {
    border-radius: 6px;
  }
  .project-container, .vendor-container, .category-container {
    width: 260px;
  }
  .card .top-bar {
      align-items: center;
  }
    .project-container .card .top-bar {
      margin-bottom: 1rem;
      }
  .card.category-block {
    width: 100%;
  }
  .card-title {
    font-size: 1.3rem;
    font-weight: 600;
    max-height: 7rem;
    overflow-y: hidden;
    text-overflow: ellipsis;
    line-height: 1.7rem;
    font-family: "Catamaran-Medium";
  }
  .card-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
   .in-contract {
    background: #B22222;
    padding: .6rem .8rem;
    color: #fff;
    text-transform: uppercase;
    margin-top: 0;
    font-weight: 600;
    border-radius: 0 0 6px 6px;
  }
  .card-bottom-bar .bottom-bar-text {
    margin: 0.5rem 0;
    font-style: italic;
  }
    .card-bottom-bar .in-contract + .bottom-bar-text {
      display: none;
    }
  .card .icon.open-close {
    position: absolute;
    top: 5px;
    right: 7px;
  }
  .vendor-logo {
      width: 75px;
      height: 75px;
  }
  .button.primary {
      color: #eee;
  }

  .button.primary:hover,
  .button.primary:focus {
      color: #fff;
  }

  .expanded-action {
      border: 1px solid #ccc;
      padding-top: 1rem;
  }

  #message-wrapper {
      background-color: #eee;
  }


  .open .vendor-container:before,
  .open .project-container:before {
      border-bottom: 30px solid #d2d2d2; /* #d2d2d2;*/
  }

  .project-container:before,
  .vendor-container:before {
    content: '';
    position: absolute;
    height: 0px;
    width: 0px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 0px solid #d2d2d2; /* #d2d2d2;*/
    top: 100%;
    /*z-index: 6000;*/
    z-index: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  /*
  .vendor-container.active-container:before{
      border-bottom: 20px solid #d2d2d2;
  }
  */

  .tabs {
      border: none;
  }

  .tabs .tabs-title {
      border: 1px solid #ddd;
      border-radius: 10px 10px 0 0;
      margin-right: 0.5rem;
      border-bottom-width: 0;
  }
  .tabs .tabs-title.is-active {
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
  }
  .tabs-title > a {
      font-size: 1rem;
      font-family: 'Catamaran-Medium';
      /* font-family: 'Roboto-Medium'; */
      padding: 0.9rem 1.5rem;
  }

  .tabs .tabs-title.is-active {

  }
  .tabs-content {
      border-top-style: solid;
      border-top-width: 1px;
      border-top-color: rgb(230, 230, 230);
}
/* do not know why tab content is shifting down 2px after first tab,
  probably something with the borders, but here's the fix */

.tabs-content + .tabs-content > .tabs-panel.is-active {
    margin-top:-2px;
    background:#fff;
  }

  .tabs-title a {
    background: #e6e6e6;
  }
  .tabs-title a, .tabs-title > a:hover, .tabs-title > a:focus, .tabs-title > a[aria-selected='true']  {
      border-radius: 10px 10px 0 0;
  }
  /* don't show project details pageheader when project details viewed through overlay window */
  .card-wrapper.open .info .secondary-header.project-details-header {
    display: none;
  }
  .card-wrapper.open .info {
  /*    background-color: #d2d2d2; */
      padding: 0.1rem;
      padding-bottom: 1rem;
      margin-bottom: 1.2rem;
      margin-top: 0.7rem;
      border: 1px solid #d2d2d2;
      z-index: 1;
  }
  .card-wrapper.open .info .grid-container {
    width: 100%;
  }
  .card-wrapper.open .info,
  .card-wrapper.open .info .grid-container,
  .card-wrapper.open .info .tabs,
  table tbody .open-detail td .tabs {
    background-color: rgb(241, 241, 241);
  }
  .card-wrapper.open .info .tabs-content, .tabs-title > a[aria-selected='true'], .tabs .tabs-title:hover {
    background-color: #fefefe;
  }
  .card-wrapper.open .info .grid-container .grid-padding-x {
      padding: 1rem;
  }
  .project-details-container .card, .vendor-details-container .card {
    margin:0;
    display: flex;
  }
  #card-wrapper .project-details-container .card-divider,
  #card-wrapper .vendor-details-container .card-divider,
  #create-category-wrapper .card-divider,
  #details-panel .card-divider {
    min-height: auto;
    font-weight: 600;
  }
  .vendor-details-container .contacts + .no-contacts {
    display: none;
  }

  .contracting-table td {
      vertical-align: top;
  }

  .contracting-table .next-step {
      background-color: #fcc;
      border: 2px solid #a33;
  }
  .can-work-begin-No {
    padding: 0;
  }
  .can-work-begin-No .cell-container {
    background-color: #a33;
    color: #fff;
    font-weight: bold;
    align-items: center;
    vertical-align: top;
    padding: 0;
    margin: auto;
    margin-bottom: -0.625rem;
    font-size: 0.8rem;
    text-transform: uppercase;
  }
  .can-work-begin-Yes .cell-container {
    display: none;
  }
  .can-work-begin-No .cell-container > .fa-ban {
    margin-right:0.3rem;
    margin-top: 0.1rem;
    font-size:12px;
  }

  .editable-date {
    word-wrap : break-word;
  }

  /* reveal overlays */
  .reveal-overlay {
    z-index: 9999;
  }
  .reveal-overlay .project-reveal {
    margin-top: 5rem;
  }

  .reveal {
    padding: 0 ;
  }

  .reveal-header {
      font-weight: bold;
      font-size: 1.2rem;
      color: #fff;
      background-color: #00679a; /* cmg blue */
      padding: 0.5rem;
      width: 100%;
      margin-bottom: 1rem;
  }


  .contracting-status-tooltip::before {
      content: '';
      position: absolute;
      height: 0px;
      width: 0px;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 20px solid #461282; /* #d2d2d2;*/
      top: 100%;
      /*z-index: 6000;*/
      z-index: 0;
      left: 90%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
  }

  .contracting-status-tooltip .modal-title,
  .reveal .modal-title {
      color: #fff;
      background-color: #461282;
      padding-left: 1rem;
      padding-bottom: 0.5rem;
      padding-top: 0.5rem;
      margin-bottom: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
    .reveal .modal-title {
      margin-bottom: 1rem;
    }
    .reveal label {
      font-size: 1.1rem; /* was 1.25, seemed a little too large in the visual heirarchy */
      line-height: 1.4;
      margin-top: 0;
      /* margin-bottom: 1.0rem; seems like label is too far away from field */
      font-family: Catamaran-Medium;
    }
  .contracting-status-tooltip {
      width: 454px; /* +4 for border */
      border: 2px solid #461282;
      position: absolute;
      bottom: 55px;
      left: -310px;
  }

  .contracting-status-tooltip table {
      margin-bottom: 0;
      table-layout: fixed;
  }

  .contracting-status-tooltip tbody tr th,
  .contracting-status-tooltip tbody tr td {
      font-size: 0.8rem;
      line-height: 1rem;
  }

  .contracting-status-tooltip tbody tr th {
      background-color: #fff;
      white-space: pre-wrap;
  }

  .contracting-status-tooltip .modal-title {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .top-bar-right .fa-star {
      cursor: pointer;
  }
  .fa-star {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .fa-star.gene-user,
  .gene-user.can-rate {
    padding:0.2rem;
    border: 1px solid #ffc966;
  }
  .small-status {
    font-family: 'Catamaran-Light';
      /* font-family: 'Roboto-Light'; */
  }
  .archive-jump {
      color: #009;
  }

  /* end content */

  /**********      05 footer      *************/
  .footer-container {
    background-size:cover;
    background-attachment: fixed;
  }
    .footer-container a:hover {
      text-decoration: underline;
    }
  .primary-footer {
      padding: 0.6rem 0;
      margin-top: 1rem;
  }
  .secondary-footer {
      height: 200px;
      padding-top:2rem; /* to make it look like footer content is valign in the middle of 2nd footer */
  }

  .secondary-footer, .primary-footer {
      color: #fff;
  }

  .secondary-footer p {
      margin-top: 3rem;
  }
  /* end footer */

  /**********      06 sidebar      *************/
  /* pull out sidebar example */
  /*this is the magic stuff*/
   #add-sidebar {
      position:absolute;
      left:-200px;
      /*we hide it to the left while being absolute*/
      cursor:pointer;
      /*this code makes a smooth transition */
      transition:all 0.4s ease-in-out;
      -moz-transition:all 0.4s ease-in-out;
      -o-transition:all 0.4s ease-in-out;
      -webkit-transition:all 0.4s ease-in-out;
  }
  #add-sidebar:hover {
      left:-40px;
      /*on mouse over, we bring back its position*/
  }

  #sidebar-spreader {
      height: 2rem;
  }

  #sidebar-spreader:hover {
      height: 3rem;
  }
  /* ESR says "this is normal code for styles I needed" */
  aside {
      color:#fff;
      width:250px;
      background:#e67b09;
      height:2.5rem;
      border-radius: 0 20px 20px 0;
      box-shadow: 2px 3px rgba(144, 144, 144, 0.3);
  }

  aside .new-slider {
      text-align: right;
      width: 100%;
      padding-top: 0.5rem;
      padding-right: 1.0rem;
  }

  aside .new-slider a {
      color: #fff;
  }
  #filter-wrapper .project-filter, #filter-wrapper.large .project-filter {
    padding-top: 18rem !important;
  }
  #filter-wrapper.small .project-filter {
    padding-top: 12rem !important;
  }
  #filter-wrapper .cell {
    margin-left: 28px;
    margin-top: 0rem;
    margin-bottom: 0.5rem;
    margin-right: 0;
    line-height: 1;
    letter-spacing: 0;
  }
  #filter-wrapper [type='checkbox'],
  #filter-warning-1 [type='checkbox'] {
    margin-left: -1.2rem;
    vertical-align: top;
    margin-top: 1px;
  }
  .project-filter {
  }
  /* end sidebar */


  /**********      07 parallax and magic stuff       *************/
  .parallax {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
  .has-tip {
    border-bottom:none;
    /* color: #4f136b; purple */
    color: #2ba6cb; /* default foundation light blue */
  }
.tooltip {
  background-color: #fff;
  color: #333;
  font-size:90%;
  border: 1px solid #663367;
}
.tooltip.top::before{
  border-color: #663367 transparent transparent;
}
  .smooth-1s, .smooth-1s:hover {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }
  .smooth-04s, .smooth-04s:hover {
    transition:all 0.4s ease-in-out;
    -moz-transition:all 0.4s ease-in-out;
    -o-transition:all 0.4s ease-in-out;
    -webkit-transition:all 0.4s ease-in-out;
  }
  .smooth-02s, .smooth-02s:hover {
    transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    -webkit-transition:all 0.2s ease-in-out;
  }
  .hover-glow {
    transform: perspective(1px) translateZ(0px);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 1px;
    transition-property: box-shadow;
    color: rgb(102, 102, 102);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .hover-glow:hover, .hover-glow:focus, .hover-glow:active {
    box-shadow: rgba(75, 37, 134, 0.6) 0px 0px 8px;
  }

  .hover-shadow {

  }
  .hover-sweep-to-right {
    -webkit-transform: perspective(1px) translateZ(0px);
    transform: perspective(1px) translateZ(0px);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 1px;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
  }
  .hover-sweep-to-right:hover:before, .hover-sweep-to-right:focus:before, .hover-sweep-to-right:active:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
  .hover-sweep-to-right:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right:0;
    bottom: 0;
    background: #eee;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }

  .hover-sweep-to-bottom {
    display: inline-block;
    vertical-align:middle;
    -webkit-transform: perspective(1px) translateZ(0px);
    transform: perspective(1px) translateZ(0px);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 1px;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;

  }

  /**********      08a header-nav-footer colors     *************/
  .header-container.purple, .footer-container.purple {
    /* background-image:url(/assets/images/purple-swirl-background.png); */
    background-color: #845ba6; /* secondary color purple, heahter */
  }
  .purple .primary-header .submenu.js-dropdown-active {
    /* background-color: #4f136b;  purple to go with swirl header */
    background-color: #522a68; /* to go with secondary color purple, heather */
  }
  .purple .primary-header.shade-overlay, .purple .primary-footer.shade-overlay {
    border-bottom: 1px solid #ffc966; /* orange */
  }
  .footer-container.purple a {
    /* color: #ffc966; /* same color as border bottom highlight */
    color: #2ba6cb;  /* or bright blue */
  }

  .header-container.blue, .footer-container.blue {
    /* background-image:url(/assets/images/blue-swirl-background.png); */
    background-color: #0266cc;
  }
  .blue .primary-header .submenu.js-dropdown-active {
    /* background-color: #1b3782; royal blue */
    /* background-color: #0d397d; navy blue */
    background-color: #00356a;
  }
  .blue .primary-header.shade-overlay, .blue .primary-footer.shade-overlay {
    /* border-bottom:1px solid #3865e0; bright royal blue */
    /* border-bottom: 1px solid #ffc966;  orange highlight */
    /* border-bottom: 1px solid #38c1e0;  light blue */
    border-bottom: 1px solid #fff;
  }
  .footer-container.blue a {
    color: #38c1e0; /* same color as border bottom highlight */
  }

  .header-container.red, .footer-container.red {
    background-image:url(/assets/images/red-swirl-background.png);
  }
  .red .primary-header .submenu.js-dropdown-active {
    /* background-color: #1b3782; royal blue */
    /* background-color: #0d397d; navy blue */
    background-color: #ad1f25; /*  cmg red */
  }
  .red .primary-header.shade-overlay, .red .primary-footer.shade-overlay {
    /* border-bottom:1px solid #3865e0; bright royal blue */
    /* border-bottom: 1px solid #ffc966;  orange highlight */
    border-bottom: 1px solid #3864e0; /* light blue */
  }
  .footer-container.red a {
    color: #58f1f9;
  }

  .header-container.red.red2, .footer-container.red.red2 {
    background-image:url(/assets/images/red-swirl-background-2.png);
  }
  .header-container.red.red3, .footer-container.red.red3 {
    background-image:url(/assets/images/red-swirl-background-3.png);
  }
  .header-container.red.red4, .footer-container.red.red4 {
    background-image:url(/assets/images/red-swirl-background-4.png);
  }


  /**********      08 colors and helper classes      *************/
  .purple .theme-color-text {
    color: #522a68;
  }
  .purple .theme-color-border {
    border-color: #522a68;
  }
  .purple .theme-color-bg,
  .purple .reveal .modal-title {
    background-color: #6a428b; /* purple */
    color: #fff;
  }
  .purple .button.theme-color {
    background-color: #845ba6;
  }
  .purple .button.theme-color:hover {
    background-color: #452f57;
  }
  .purple .theme-color-text-success {
    color: #7a9640;
  }
  .purple .button.success {
    background-color: #7a9640; /* green */
  }
  .purple .button.success:hover {
    background-color: #647b34;
    color: #fff;
  }
  .purple .success-border-color {
    border-color: #7a9640;
  }
  .secondary-success {
    background-color: #dae2c8; /* secondary color green */
  }
  .purple .theme-color-text-alert {
    color: #c10808;
  }
  .purple .button.alert,
  .blue .button.alert {
    background-color: #c10808;
  }
  .purple .badge.alert {
    background: #ed1c24;
  }

  .blue .theme-color-text {
    color: #0266cc;
  }
  .blue .theme-color-border {
    border-color: #0266cc;
  }
  .blue .theme-color-bg,
  .blue .reveal .modal-title {
    background-color: #0266cc; /* blue */
    color: #fff;
  }
  .blue .reveal .close-button {
    color: #dedede;
  }
  .blue .accordion-title {
    color: #000;
  }
  .blue .accordion-title::before {
    color:#0266cc;
  }
  .blue .button.theme-color {
    background-color: #0266cc;
  }
  .blue .button.theme-color:hover {
    background-color: #00356a;
  }
  .blue .theme-color-text-success {
    color: #7a9640;
  }
  .blue .button.success {
    background-color: #7a9640; /* green */
  }
  .blue .button.success:hover {
    background-color: #647b34;
    color: #fff;
  }
  .blue .success-border-color {
    border-color: #7a9640;
  }
  .secondary-success {
    background-color: #dae2c8; /* secondary color green */
  }
  .blue .theme-color-text-alert {
    color: #c10908;
  }
  .blue .button.alert {
    background-color: #ed1d24;
  }
  .blue .badge.alert {
    background: #ed1d24;
  }
  .blue .tooltip {
    border: 1px solid #0266cc;
  }
  .blue .tooltip.top::before{
    border-color: #0266cc transparent transparent;
  }

  .theme-color-1 {
      background-color: #015c90;
      color: #fff;
  }
  .theme-color-2 {
      background-color: #512440;
      color: #fff;
  }
  .theme-color-3 {
      background-color: #a41c20;
      color: #fff;
  }
  .theme-color-4 {
      background-color: #575757;
      color: #fff;
  }

  .theme-color-5 {
      background-color: #12520a;
      color: #fff;
  }

  .theme-color-faded-light {
      background-color: #b4d1ed !important;
      color: #000 !important;
  }

  .theme-color-faded-dark{
      background-color: #7f98b0 !important;
      color: #000 !important;
  }

  .theme-color-faded-anchor:hover {
      color: #e6f0fa !important;
  }

  .theme-color-none {
    background-color: #f1f1f1;
    color: #000;
  }
  .theme-color-none .top-bar,
  .theme-color-none .top-bar ul {
    color: #000;
  }
  .theme-color-6 {
    background-color: #461282; /* purple */
    color: #fff;
  }
  .theme-color-7 {
    background-color: #1b3782; /* royal blue */
    color: #fff;
  }
  .theme-color-8 {
    /* background-color: #0c537f;  dark denim */
    background-color: #00679a; /* cmg blue */
    color: #fff;
  }
  .theme-color-8-text {
    color: #00679a;
  }
  .theme-color-8.accent {
    background-color: #52a0cc;
    /* background-color: #6394b1; */
    color: #fff;
  }
  .theme-color-8-border {
    border-color: #00679a !important;
  }
  .theme-color-9 {
    /* background-color: #663367; cmg purple */
    background-color: #461282; /* more vibrant purple */
    color: #fff;
  }
  .button.theme-color-9:hover {
    background-color: #452246;
  }
  .theme-color-9-text {
    /* color: #663367; cmg purple */
    color: #461282; /* more vibrant purple */
  }
  .theme-color-10 {
    background-color: #ad1f25; /* cmg red */
    color: #fff;
  }
  .button.theme-color-10:hover {
    background-color: #88171c;
  }

  .theme-color-10-text {
    color: #ad1f25; /* cmg red */
  }
  .text-white {
    color:#fff;
  }
  .text-gray {
    color:#d3d3d3;
  }
  .text-black {
    color: #000;
  }
  .text-dark-blue {
    color: #205692;
  }
  .text-blue { /* approved cmg blue #00679a */
    color: #2ba6cb; /* foundation blue #2ba6cb; */
  }
  .text-purple {
    color: #461282;
  }
  .italic {
    font-style: italic;
  }
  .bolditalic {
    font-style: italic;
    font-weight:bold;
  }
  .blue-icon {
    color: #055183;
  }
  .gray-icon {
    color: #ccc;
  }
  .button.success, .badge.success {
    background-color: #4eab66;
    color: #fff;
  }
  .button.inactive {
    background-color: #d7d7d7;
    color: #fff;
    border:1px dotted #afafaf;
  }
  .transparent-bg {
    background: none;
    border-color: rgba(222, 222, 222, 0.4);
  }
  .white-bg {
    background: #fff;
  }
  .blue-bg {
    background: #00679a;
  }
  .white-table tbody, .white-table tbody tr:nth-child(even),
  .white-bg {
    background-color:#fff !important;
  }
  .shade-overlay {
    background: rgba(000,000,000,0.5);
  }
    .secondary-header.shade-overlay, .primary-footer.shade-overlay {
      /*background: rgba(000,000,000,0.2);*/
      background: rgba(000,000,000,0.0);
    }
    .header-image {
      background:url('/assets/images/two-people-digital-meeting.png');
      background-repeat: no-repeat;
      background-size: 150px 100px;
      position:relative;
      height:100px;
    }
    .purple-shade-overlay {
      background-color: rgba(67,34,118,0.5);
      position: absolute;
      top:0;
      left:0;
      width:150px;
      height:100px;
    }
    .main-content.home { }

  .search-highlight {
      background-color: #fffa66;
  }
  .editable:hover {
      cursor: pointer;
      color: #2ba6cb;
      text-decoration: underline;
  }
  .ui-autocomplete {
    z-index: 9999;
  }
  .font-em {
    font-weight: 600;
  }
  .font-sm {
    font-size: 0.9rem;
  }
  .border {
    border-width: 1px;
    border-style: solid;
  }
  .clear {
    clear: both;
  }
  table.border {
    border-collapse:inherit;
  }
  .project-edit-wrapper label {
      text-align: right;
  }
  .category-block .user-add-button {
      border-radius: 2px;
      font-weight: bold;
      margin-top: -3px;
      margin-left: 0;
      padding: 0.7rem;
  }

  .user-combo {
      width: 75%;
      display: inline-block;
  }

  .callout {
    background-color: #fff6d2;
  }

  .callout.no-radius {
      border-radius: 0;
  }

  .has-selections {
      background-color: #eee;
  }

  .callout.no-radius:hover {
      border: #eee;
      background-color: #eee;
      -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.42);
      -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.42);
      box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.42);
      /* margin-top:-4px; */
  }
  .callout.gene-user {
    border: 1px solid #ffc966;
    z-index: 10;
  }
  .callout.gene-user.no-radius:hover {
    border: 1px solid #ffc966;
  }
  #filter-wrapper .callout.gene-user.no-radius:hover {
    border-right: 1px solid #eee;
  }
  #filter-wrapper .gene-user .dropdown-pane {
    border: 1px solid #ffc966;
    border-left:none;
    left: 168px !important;
    z-index: 9;
  }
  #filter-warning-1 .callout:nth-child(2) .dropdown-pane {
    left:-50px !important;
  }
  #filter-warning-1 .callout:nth-child(3) .dropdown-pane {
    left:-200px !important;
  }
  #filter-warning-1 .callout:nth-child(4) .dropdown-pane {
    left:-400px !important;
  }
  #filter-warning-1 .callout:nth-child(5) .dropdown-pane {
    left:-600px !important;
  }
  #filter-warning-1 .callout:nth-child(6) .dropdown-pane {
    left:-700px !important;
  }
  #filter-warning-1 .callout:last-child .dropdown-pane {
  }
  .dropdown-pane {
      width: 950px;
      background-color: #eee;
      border: none;
      -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.42);
      -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.42);
      box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.42);
  }
  .reveal .gene-user .dropdown-pane {
    border: 1px solid #ffc966 !important;
  }
  .tooltip {
      /*max-width: 14rem;*/
      max-width:50%;
  }
  .nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .inline {
    display: inline-block !important;
  }
  .mt10 {
    margin-top: 1.0rem !important;
  }
  .mt15 {
    margin-top: 1.5rem !important;
  }
  .mt20 {
    margin-top: 2.0rem !important;
  }
  .mt25 {
    margin-top: 2.5rem !important;
  }
  .mb00 {
    margin-bottom: 0rem !important;
  }
  .mb05 {
    margin-bottom: 1.5rem !important;
  }
  .mb10 {
    margin-bottom: 1.0rem !important;
  }
  .mb15 {
    margin-bottom: 1.5rem !important;
  }
  .mb20 {
    margin-bottom: 2.0rem !important;
  }
  .ml05 {
    margin-left: 0.5rem !important;
  }
  .ml10 {
    margin-left: 1.0rem !important;
  }
  .ml15 {
    margin-left: 1.5rem !important;
  }
  .ml20 {
    margin-left: 2.0rem !important;
  }
  .ml30 {
    margin-left: 3.0rem !important;
  }
  .mr10 {
    margin-right: 1.0rem !important;
  }
  .mr15 {
    margin-right: 1.5rem !important;
  }
  .mr20 {
    margin-right: 2.0rem !important;
  }
  .mr30 {
    margin-right: 3.0rem !important;
  }
  .pt05 {
    padding-top: 0.5rem !important;
  }
  .pt10 {
    padding-top: 1.0rem !important;
  }
  .pt15 {
    padding-top: 1.5rem !important;
  }
  .pt20 {
    padding-top: 2.0rem !important;
  }
  .pt25 {
    padding-top: 2.5rem !important;
  }
  .pl05 {
    padding-left: 0.5rem !important;
  }
  .pl10 {
    padding-left: 1.0rem !important;
  }
  .pl15 {
    padding-left: 1.5rem !important;
  }
  .pl20 {
    padding-left: 2.0rem !important;
  }
  .pl25 {
    padding-left: 2.5rem !important;
  }
  .pl30 {
    padding-left: 3.0rem !important;
  }
  .pr05 {
    padding-right: 0.5rem !important;
  }
  .pr10 {
    padding-right: 1.0rem !important;
  }
  .pr15 {
    padding-right: 1.5rem !important;
  }
  .pr20 {
    padding-right: 2.0rem !important;
  }
  .pr25 {
    padding-right: 2.5rem !important;
  }
  .pr30 {
    padding-right: 3.0rem !important;
  }

  /* album art update */


  .info {
    position: absolute;
    background: #efefef;
    height: 0px;
    width: 100%;
    left: 20px;
    margin-top: 10px;
    text-align: left;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: initial;
    border: 0px solid #666;
    transition: all 0.2s ease 0s;
  }

  /* styles for the open box*/
  .card-wrapper.open .info {
    height: auto;
   /* max-height:600px;*/
    overflow: auto;
    padding: 30px 7px 5px 15px;
    /*transition: all 0.2s ease 0s;*/

    /* so we can change the border on the open content box */
    border-width: 1px
  }


  #filter-wrapper .hover-sweep-to-right .dropdown-pane .cell,
  #filter-warning-1 .dropdown-pane .cell {
      line-height: 1.3rem;
      margin-bottom: 0.5rem;
      margin-top: 6px;
  }

  .filter-drawer {
      max-height: 400px;
      overflow-y: auto;
  }
  #filter-warning-1 .filter-drawer {
    padding: 1rem;
  }

  .filter-drawer input[type='checkbox'] {
      margin-bottom: 0;
  }

  .button.primary {
      font-weight: bold;
  }

  .button.primary:hover {
  }

  .modal-close {
      position: absolute;
      top: 4px;
      right: 4px;
  }

  .modal-close a {
      color: #fff;
      font-size: 16px;
  }

  .document-list {
      font-size: 1.2rem;
  }

  .shopping-cart-id,
  .description {
      cursor: pointer;
  }

  #ui-datepicker-div.ui-datepicker {
    z-index:10000 !important;
  }
  .orbit-container {
    max-height:250px;
  }

  .card-divider-loading {
      background: url(/assets/images/ajax-loader.gif) no-repeat center;
  }

  .document-block-wrapper i {
      margin-right: 0.3rem;
  }

  .in-process-row {
      padding: 0.3rem;
  }

  .in-process-row:nth-child(odd) {
      background-color: #eee;
  }

  .in-process-row-container {
    border: 1px dotted #ededed;
  }

  .subcategory-admin {
      list-style-type: none;
      padding-left: 0;
      margin-left: 0;
      width: 100%;
  }

  .subcategory-admin li {
      margin-top: 0.3rem;
      border: 1px solid #ccc;
      width: 100%;
      padding-left: 0.4rem;
  }

  .subcategory-admin li:hover {
      background-color: #eee;
  }

.template-admin-row {
    font-size: 0.75rem;
    padding-left: 2rem;
    padding-top: 0.3rem;
}

.template-admin-row .button {
    margin-bottom: 0;
}

/* shouldn't need this, can just use theme-color-8 */
.assessment-blue-background {
    background-color: rgb(0, 103, 154);
}

.assessment-purple-background {
    background-color: rgb(102, 51, 103);
}

.assessment-bar {
    margin-bottom: 1rem;
    padding-top: 0.3rem;
}

.assessment-red {
    color: rgb(173, 31, 37);
}

.assessment p {
    line-height: 1.4rem;
}

.assessment .blue-column {
    background-color: rgb(228, 238, 244);
}
#purpose-value h5, .hide-for-purpose h5, .hide-for-scenario h5, .show-for-scenario h5,
#purpose-value h4, .hide-for-purpose h4, .hide-for-scenario h4, .show-for-scenario h4 {
    /* color: #663367 !important; match cmg purple */
    color: #461282 !important; /* more vibrant purple */
    text-transform: uppercase;
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.rubric strong {
    font-size: 1.5rem;
}

.rubric-heading {
    font-family: "Catamaran-Light";
    color: rgb(0, 103, 154);
    font-style: italic;
    font-size: 1.2rem;
    margin: 0px;
}


.assessment .top-border {
    border-top: 1px solid #333;
}

.assessment p {
    margin-top: 0.8rem;
}

.assessment .instruction-row {
    /* color: rgb(173, 31, 37);  not sure about this red */
    /* color: rgb(0, 103, 154);  blue */
    /* color: #663367;  cmg purple */
    color: #461282; /* more vibrant purple */
    line-height: 1.3rem;
    padding-bottom: 0.8rem;
    padding-top: 0.3rem;
}
/* same as .theme-color-8-text color: #00679a; */

.assessment .question-topic {
    font-weight: bold;
    font-size: 1.2rem;
    /* color: rgb(0, 103, 154);  blue */
    /* color: #663367; cmg purple */
    color: #461282; /* more vibrant purple */
    padding-bottom: 8px;
}

.assessment .five-up {
    width: 19%;
    display: inline-block;
    margin: 0;
    padding: 0 0.3rem;
}

.assessment .two-up {
    width: 49%;
    display: inline-block;
    margin: 0;
    padding: 0 0.3rem;
}

.assessment .number-button div {
    width: 2rem;
    border: 1px solid #333;
    border-radius: 3px;
    padding: 0.2rem;
    margin: 0 auto;
}

.assessment .number-button div:hover {
    background-color: #eee;
}

.assessment .blue-column .bullet-trigger:hover {
    background-color: rgb(242, 247, 250);
}

.assessment .blue-column.number-button {
    padding-bottom: 1rem;
}

.assessment textarea {
    margin-top: .5rem;
    height: 7rem;
}

.editable {
    cursor: pointer;
}

.assessment  .number-button .rating-trigger.selected,
.assessment  .number-button .rating-trigger.selected:hover,
.assessment .blue-column .bullet-trigger.selected {
    background-color: rgb(0, 103, 154);;
    color: #fff;
}

.bullet-point .trumbowyg-editor,
.bullet-point .trumbowyg-box {
    min-height: 60px;
}

.bullet-controls {
    float: right;
}

.non-link {
    float: right;
    cursor: pointer;
    color: #1b3782;
}

.non-link:hover {
    color: #2ba6cb;
}

.gray-background {
    background-color: #d8d8d8;
}

.opt-category {
    font-weight: bold;
}

.opt-child {
    padding-left: 1rem;
}

.instructions-fieldset {
    border: 1px solid #222;
    color: #000;
    padding: 0.5rem 1rem 1rem 1rem;
    margin-bottom: 1rem;
    background-color: #fff6d2;
}

.instructions-fieldset legend {
    margin-left: 1rem;
    color: #000;
}

.instructions-fieldset .slightly-smaller {
    font-size: 0.9rem;
}

.additional-text-wrapper {
    margin-bottom: 1rem;
}

.additional-text-dots {
    display:none;
    border: 1px dashed #999;
    padding-right: 1rem;
    padding-top: 0.7rem;
    padding-left: 0.7rem;
    margin-bottom: 1rem;
    color: #666;
}

.additional-text-no-border {
    border: none;
    padding-right: 1rem;
    padding-top: 0.7rem;
    padding-left: 0.7rem;
    margin-bottom: 1rem;
    color: #000;
}

.new-bullet-wrapper {
    border: 1px solid #000;
/*    padding: 0.7rem;
    margin-bottom: 1rem; */
}

.existing-bullet-wrapper {
/*     border: none; */
/*     padding: 0.7rem; move this to bullet-wrapper
    margin-bottom: 1rem; */
}

.bullet-wrapper {
    padding-bottom: 1.5rem;
    border-left: 5px solid #461282;  /* change to more vibrant purple #663367; */
    background: #f8f8f8;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.callout.alert {
    background-color: #f7e4e1;
}

.reveal label sup, .reveal sup {
    color: #900;
}

ul.large-bullet {
  list-style:none;
  margin-left:0;
}
ul.large-bullet li::before {
  content:"\f111";
  font-size:5rem;
  color: #bbb;
  display:inline-block;
}
ul.large-bullet li p {
  margin-top:-7rem;
  margin-left:6rem;
}
#step-cards .card-section, #step-cards .card,
#task-cards .card-section, #task-cards .card {
  height:90% !important;
}
.resources-container .heading {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin-bottom:0.5rem;
  padding-bottom:0px;
}
.resources-container .heading h5 {
  font-size: 1.2rem;
  margin-bottom:0;
}
.resources-container .icon {
  width:40px;
  vertical-align: top;
}
.resources-container .icon-vid,
.resources-container .icon-ppt  {
  padding-left:0.3rem !important;
  padding-right:0.3rem !important;
}
.resources-container tbody {
  border:none;
}
.crowded-table th, .crowded-table td {
  font-size:smaller;
}
/**********      09 responsive stuff      *************/

/* responsive-expand-buttons */
@media screen and (max-width: 39.9375em) {
  .button.small-only-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0; } }
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .button.medium-only-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0; } }
@media screen and (max-width: 63.9375em) {
  .button.medium-down-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0; } }
@media print, screen and (min-width: 40em) {
  .button.medium-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0; } }
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
  .button.large-only-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0; } }
@media screen and (max-width: 74.9375em) {
  .button.large-down-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0; } }
@media print, screen and (min-width: 64em) {
  .button.large-expanded {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0; } }
/* end responsive-expand-buttons */

/* responsive-resize-buttons */
@media print, screen and (min-width: 40em) { /* this one first */
  .button.medium-resize {
    font-size: 1.1rem;
    white-space: normal;
     } }
/* end responsive-resize-buttons */

/***** end 09 responsive stuff *****/

.dotted-red-border {
    border: 1px dashed red;
}