/*
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
*/

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

.login-page {
    background: url(/assets/images/iengage_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;
  background-color: #fff;
    /* font-family: "Roboto-Light"; */
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: "Catamaran-Medium";
  color: #000;
  /* font-family: "Roboto-Medium"; */
}
.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: #fff;
    padding: 2rem 0;
    margin-top: 12rem;
    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,
.tabs-title > a:focus,
.tabs-title > a[aria-selected='true'] {
  color: #00679B; /* denim blue with teal hover */
}

a:hover, .link:hover,
.tabs-title > a:hover {
  color: #00AAA5;
}

select {
  font-family:sans-serif;
}

/**********      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: 2rem;
  margin-right: 2rem;
}
.top-bar {
    margin-left: 0;
    align-items: center;
}
.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 {
  /* transition: all 0.4s ease-in-out;  doesn't work...
  -moz-transition:all 0.4s ease-in-out;
  -o-transition:all 0.4s ease-in-out;
  -webkit-transition:all 0.4s ease-in-out;
  transition-delay: 0.2s; */
}
.small .logo img {
  height: 30px;
}
.logo-home img {
  width: 100px;
}
.small .logo img {
  width:auto !important;
}
.logo-swirl img {
  width:65px;
}
.primary-header .menu .logo a, .small .primary-header .menu .logo a {
  text-transform:none;
  font-size: 1.2rem;
  /* color: #00679B; for noodles theme */
  color: white;
}
.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: 0rem 0.5rem;
    height: auto;
}
.secondary-header .grid-container {
    /*margin-top: 1rem;*/
    padding:0rem 0 0rem 0;
    transition: all 0.4s ease-in-out;
    max-width: 100%;
    /* transition-delay: 0.2s; */
}

.secondary-header .grid-container,
.large .secondary-header .grid-container {
  /*margin-top: 1rem !important;*/
  padding:0rem 0 0rem 0;
  /* margin-bottom:6rem; */
}
.small .secondary-header .grid-container {
    margin-top: 0 !important;
    padding:0.5rem 0 0 0;
    margin-bottom:0.5rem;
}
.small .secondary-header h4 {
  font-size: 1.3rem;
}
.small .secondary-header h2 {
  font-size: 1.5rem;
}
.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;
  }

.accordion-menu-title, .accordion-title {
    font-size: 1.25rem;
}
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 {
  font-size:large;
  font-family: "Font Awesome 5 Free";
  content:"\f078";
  font-weight: bold;
}
.accordion-item.is-active .accordion-title::before {
  content:"\f077";
}

.accordion-title:hover, .accordion-title:focus {
  transition: ease .5s;
  background-color:#fff;
}
/* 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-radius: 6px;
    border: 1px solid #d2d2d2;
    margin-right: 1rem;
    cursor: pointer;
    vertical-align: top;
    display: inline-block;
    position: relative;
  }

  .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;
      position: relative;
  }
  .tabs .tabs-title.is-active {
    border-bottom: 1px solid #fff;
    margin-bottom: -3px; /* -1px works ok, but -3px needed for when tabs can be edited/sorted */
  }
  .tabs-title > a {
      font-size: 1rem;
      font-family: "Catamaran-Medium";
      /* font-family: Roboto-Medium; */
      padding: 0.9rem 1.5rem;
  }

  .tabs .tabs-title.is-active {

  }

  .tab-sorter {
      position: absolute;
      top: 0;
      right: 2px;
      font-size: 8pt;
  }

  .tabs-title .tab-sorter a {
      background-color: rgba(255, 255, 255, 0);
  }

  .tabs-content {
      outline: 1px solid #e6e6e6;
      outline-offset: -1px;
      /* border-top-style: solid;
      border-top-width: 1px;
      border-top-color: rgb(230, 230, 230);*/
      border:none;
      /* border around tabs-content causing content box to down 2px after first tab,
        fixed by replacing border with outline inside tabs-content */
}

  .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;
      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;
    display: table;
    width: 100%;
/*    background-size:contain;
    background-attachment: fixed;
    background-position:top;
    background-repeat: no-repeat; */

  }
    .footer-container a:hover {
      text-decoration: underline;
    }
  .primary-footer {
      padding: 0.6rem 0;
  }
  .secondary-footer {
      padding-top:2rem;
      padding-bottom:4rem;
  }

  .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 #00679B;
}
.tooltip.top::before{
  border-color: #00679B 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, graphics     *************/
  .hexagons header {

  }
  .header-container.hexagons {
    background-image:url(/assets/images/bg-blue-hex.png);
  }

  .header-container {
    background-color:#fff;
    background-size:contain;
    background-attachment: fixed;
    background-position:top;
    background-repeat: no-repeat;
  }

  .noodles header{
  }
  .header-container.noodles {
    background-image:url(/assets/images/noodles-background.png);
    background-color:#fff;
    background-size:contain;
    background-attachment: fixed;
    background-position:top;
    background-repeat: no-repeat;
  }
  .footer-container.hexagons {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(/assets/images/bg-blue-hex.png);

  }
  .footer-container.hexagons .secondary-footer { background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)) !important; }

  .footer-container.noodles .primary-footer {
    background-color: #8DC63F;
  }
  .footer-container.noodles .secondary-footer {
    background-color: #00679B;
  }
  .footer-container {
    /* color: #00679B; blue font for green bg, noodles theme */
    color: white;
  }
  .footer-container a {
    /* color: #00679B; blue font for green bg, noodles theme */
    color: white;
    font-weight: bold;
  }
  .hexagons .primary-header .dropdown.menu a,
  .hexagons .primary-header .submenu.js-dropdown-active,
  .noodles .primary-header .dropdown.menu a,
  .noodles .primary-header .submenu.js-dropdown-active {
    /* background-color: rgb(11, 63, 109, 0.6); dark blue partial transparent */
    background-color:#00679B;
  }
  .hexagons .primary-header .dropdown.menu a:hover,
  .hexagons .primary-header .submenu.js-dropdown-active a:hover,
  .noodles .primary-header .dropdown.menu a:hover,
  .noodles .primary-header .submenu.js-dropdown-active a:hover {
    background-color: #00aaa5;
  }
  .hexagons .primary-header a.outline,
  .noodles .primary-header a.outline {
    color: white;
    text-shadow:
     -1px -1px 0 #0B3F6D,
      1px -1px 0 #0B3F6D,
      -1px 1px 0 #0B3F6D,
       1px 1px 0 #0B3F6D;
  }
  .header-container.purple, .footer-container.purple {
    background-image:url(/assets/images/purple-swirl-background.png);
  }
  .purple .primary-header .submenu.js-dropdown-active {
    background-color: #4f136b; /*  purple */
  }
  .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);
  }
  .blue .primary-header .submenu.js-dropdown-active {
    /* background-color: #1b3782; royal blue */
    /* background-color: #0d397d; navy blue */
    background-color: #00679a; /*  cmg blue */
  }
  .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 */
  }
  .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      *************/
  .primary-text, .accordion-menu-title {
    color: #00679B;
  }
  .primary-bg, .button.primary, .reveal-header {
    background-color: #00679B;
    color: #fff;
  }
  .secondary-text {
    color: #00AAA5;
  }
  .secondary-bg, .button.secondary-alt {
    background-color: #00AAA5;
    color: #fff;
  }
  .button.primary:hover {
    background-color: #00AAA5;
    color: #fff;
  }
  .button.secondary-alt:hover {
    background-color: #008581;
    color: #fff;
  }
  .button.success {
    background-color: #2E9252;
    color:#fff;
  }
  .success-half-text {
    color: #8dc63f !important;
  }
  .button.success-half {
    background-color: #8dc63f;
    color:#fff;
  }
  .button.success-half:hover {
    background-color: #658f2d;
    color:#fff;
  }
  .highlight-text {
    color: #f9ed32;
  }
  .button.highlight {
    background-color:#f9ed32;
    color: #000;
  }
  .dark-text {
    color: #0b3f5d !important;
  }
  .white-text {
    color: white;
  }
  .button.dark {
    background-color: #0b3f5d;
    color:#fff;
  }
  .button.dark:hover {
    background-color: #0f5882;
  }
  .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-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 */
  }
  .button.pink {
    background-color: #ce79dc;
    color: #fff;
  }
  .button.pink:hover {
    background-color: #a55db1;
  }
  .button.yellow {
    background-color: #f7bd09;
    color: #fff;
  }
  .button.yellow:hover {
    background-color: #b38906;
  }
  .button.orange {
    background-color: #ff7d02;
    color:#fff;
  }
  .button.orange:hover {
    background-color: #ce6502;
  }
  .button.green{
    background-color: #8ac544;
    color: #fff;
  }
  .button.green:hover {
    background-color: #618c2f;
  }
  .button.success:hover, .button.warning, .button.warning:hover {
    color:#fff;
  }
  .button.neutral {
    background-color: #ccc;
    color: #fff;
  }
  .button.neutral:hover {
    background-color: #a4a4a4;
  }
  .button.lavender {
    background-color: #7e5aa7;
    color: #fff;
  }
  .button.lavender:hover {
    background-color: #634684;
  }
  .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;
  }
  .blue-icon {
    color: #055183;
  }
  .gray-icon {
    color: #ccc;
  }
  .button.success, .badge.success {
    background-color: #4eab66;
    color: #fff;
  }
  .transparent-bg {
    background: none;
    border-color: rgba(222, 222, 222, 0.4);
  }
  .white-bg {
    background: #fff;
  }
  .blue-bg {
    background: #00679a;
  }
  .shade-overlay {
    background: rgba(000,000,000,0.5);
  }
    .secondary-header.shade-overlay, .primary-footer.shade-overlay {
      background: rgba(000,000,000,0.2);
    }
    .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;
    }
    /* if header image, header needs more room */
    /* .main-content.home { margin-top:19rem;} */

  .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;
  }
  .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;
  }
  .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;
  }
  .mb05 {
    margin-bottom: 0.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;
  }
  .ml20 {
    margin-left: 2.0rem !important;
  }
  .ml30 {
    margin-left: 3.0rem !important;
  }
  .mr05 {
    margin-right: 0.5rem !important;
  }
  .mr10 {
    margin-right: 1.0rem !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;
  }
  .pl10 {
    padding-left: 1.0rem !important;
  }
  .pl20 {
    padding-left: 2.0rem !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;
  }

  /* 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;
}
/*** assessment colors ***/
.assessment .instruction-row, .assessment .question-topic,
.hide-for-instructions h5, .hide-for-purpose h5, .hide-for-scenario h5, .show-for-scenario h5,
.hide-for-purpose h4, .hide-for-scenario h4, .show-for-scenario h4 {
    /* 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 */
    color: #00679B; /* noodles primary */
  }
  .assessment  .number-button .rating-trigger.selected,
  .assessment  .number-button .rating-trigger.selected:hover,
  .assessment .blue-column .bullet-trigger.selected {
      background-color: #00aaa5; /* or 8DC63F */
      color: #fff;
  }
  .assessment .blue-column {
      /* background-color: rgb(228, 238, 244); */
      background: #f8f8f8;
  }
  .assessment .blue-column .bullet-trigger:hover {
      /* background-color: rgb(242, 247, 250); */
      background-color: #e0e5e7;
  }
  .assessment .callout {
    border: 1px solid #00679B;
    background: #f8f8f8;
    margin-left:1rem;
    margin-right:1rem;
    width:98%;
  }
  .bullet-wrapper {
      border-left: 5px solid #00aaa5; /* or 8DC63F */
      background: #f8f8f8;
    }
  .instructions-fieldset {
      background-color: #fff6d2;
  }

/* 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-red {
    color: rgb(173, 31, 37);
}
*/

/*** assessment everything else ***/
.assessment-bar {
    margin-bottom: 1rem;
    padding-top: 0.3rem;
}

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

.hide-for-instructions h5,.hide-for-purpose h5, .hide-for-scenario h5, .show-for-scenario h5,
.hide-for-purpose h4, .hide-for-scenario h4, .show-for-scenario h4 {
    text-transform: uppercase;
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 1px;
}
#purpose-value h5, #purpose-value h4 {
  text-transform: none;
  font-size: 1.1rem;
  color: #000;
  letter-spacing: 1px;
  font-weight:normal;
}

.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 {
    line-height: 1.3rem;
    padding-bottom: 0.8rem;
    padding-top: 0.3rem;
}

.assessment .question-topic {
    font-weight: bold;
    font-size: 1.2rem;
    padding-bottom: 8px;
}

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

.assessment .three-up {
    width: 32%;
    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.number-button {
    padding-bottom: 1rem;
}

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

.editable {
    cursor: pointer;
}


.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;
}

.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;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

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

.reveal label sup {
    color: #900;
}

.gray-link {
    color: #ccc;
}

.gray-link:hover {
    color: #a4a4a4;
}

.learner-roles-grid {
    padding-left: 1.25rem;
    font-size: 1.25rem;
    color: #00679B;
}
.learner-roles-grid .cell {
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
}
.learner-roles-grid .small-12 {
    border-left: 1px solid rgb(230, 230, 230);
    border-right: 1px solid rgb(230, 230, 230);
    border-top: 1px solid  rgb(230, 230, 230);
}

.learner-roles-grid:last-of-type .small-12 {
    border-bottom: 1px solid  rgb(230, 230, 230);
}

.less-padding .small-10 {
    padding:  3px 3px 3px 15px;
}

.less-padding .small-2 {
    padding:  3px 15px 3px 3px;
}

.click-cursor {
    cursor: pointer;
}

/* learner suggestions */
#preflight-check .new-user {
    color: #0b0;
}

#preflight-check .existing-user {
    color: #00b;
}

#preflight-check .error {
    color: #b00;
}

#preflight-check .deleted {
    color: #ccc;
}