/* Imports are copied to the tmp folder for SCSS'ing */
/*
 * A.M. 1/31/17 - This is a SASS duplicate of the LESS file, vspot-colors.less.
 * The LESS file should be considered the canonical source for color definitions
 * for now. Any updates there should be reflected here.
 */
/* Black */
/* Gray */
/* This one is a bit blue */
/* This one is pure gray */
/* Super light gray, almost white */
/* This one is a bit blue */
/* This one is a bit blue */
/* Green */
/* Green */
/* Green */
/* Orange */
/* Orange */
/* Orange */
/* Blue */
/* Blue */
/* Blue */
/* White */
/* Bluish */
/* Yellowish */
/* Red */
/* Brown */
/* Yellow */
/*Gold*/
/* Purple - added for the them tag color */
/* Pink - added for the them tag color */
/* Page structure:
 * Left rail: fixed width, but can expand over content area.
 * Center rail: expands to fit content.
 * Right rail: fixed width, 340px with 20px padding.
 */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important; }

/* Safari has a bug in flex where by it ignores the min and max width settings under certain conditions:
 * https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items
 * In order to cope with this, we are setting the body to have a min width, which is the container
 * for the flex items, and will therefore ensure that our min-width declaration is honored.
 */
body.vs1.responsive {
  min-width: 100%; }

.vs1 #content_container #notification_bar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #5bb3df;
  color: #ffffff;
  width: 100%;
  height: 55px;
  overflow-y: scroll; }
.vs1 #content_container .content-area {
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  min-width: 530px;
  max-width: 1000px;
  margin-left: 58px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 30px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }
  .vs1 #content_container .content-area .error {
    background-color: #f2dede;
    border-color: #dca7a7;
    border-radius: 4px;
    padding: 5px 15px;
    margin-right: 10px; }
  .vs1 #content_container .content-area .shrink {
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1; }
  .vs1 #content_container .content-area .grow {
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; }
.vs1 #content_container .right-placeholder {
  -webkit-flex: 0 0 340px;
      -ms-flex: 0 0 340px;
          flex: 0 0 340px; }
.vs1 #content_container .fixed {
  right: 0;
  top: 0;
  z-index: 1001;
  position: fixed; }
.vs1 #preview_share_bar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #333333;
  height: 55px;
  width: 100%;
  color: #ffffff;
  font-size: 1.8rem; }
.vs1 #notification_bar_placeholder {
  width: 100%;
  height: 55px; }
.vs1 .main-rail {
  padding-left: 58px; }
.vs1 .outer-container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }
  .vs1 .outer-container left-rail {
    -webkit-flex: 0 0 58px;
        -ms-flex: 0 0 58px;
            flex: 0 0 58px; }
  .vs1 .outer-container .btn {
    font-family: "Open Sans", helvetica, arial, sans-serif;
    font-size: 1.2rem; }
  .vs1 .outer-container .main-content {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; }
    .vs1 .outer-container .main-content .inner-content {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-flex-wrap: nowrap;
          -ms-flex-wrap: nowrap;
              flex-wrap: nowrap;
      /* Layout for the container for the multiple sections involved in the assignment flow */ }
      .vs1 .outer-container .main-content .inner-content .participant-section {
        padding: 20px 15px 20px;
        background-color: transparent; }
        .vs1 .outer-container .main-content .inner-content .participant-section .section-inner {
          background-color: #ffffff;
          border: 1px solid #d1d1d1; }
      .vs1 .outer-container .main-content .inner-content .assignment {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column; }
        .vs1 .outer-container .main-content .inner-content .assignment .assignment-body {
          /* Repeat display flex, it's not inherited. */
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-flex-direction: row;
              -ms-flex-direction: row;
                  flex-direction: row;
          -webkit-flex-wrap: nowrap;
              -ms-flex-wrap: nowrap;
                  flex-wrap: nowrap; }
        .vs1 .outer-container .main-content .inner-content .assignment .assignment-right {
          -webkit-flex: 1;
              -ms-flex: 1;
                  flex: 1;
          background-color: #ffffff;
          padding: 0;
          /* Repeat display flex, it's not inherited. */
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-flex-direction: column;
              -ms-flex-direction: column;
                  flex-direction: column;
          -webkit-justify-content: space-between;
              -ms-flex-pack: justify;
                  justify-content: space-between; }
          .vs1 .outer-container .main-content .inner-content .assignment .assignment-right .assignments-title {
            text-align: center;
            color: #3993bf;
            border-bottom: 2px solid #3993bf; }
      .vs1 .outer-container .main-content .inner-content .participant-bottom-section {
        margin-top: 30px; }
      .vs1 .outer-container .main-content .inner-content .participant-signup {
        margin: 20px 15px 100px; }
        .vs1 .outer-container .main-content .inner-content .participant-signup .divided-section {
          border-top: 1px solid #d1d1d1;
          margin-top: 10px;
          padding-top: 10px; }
        .vs1 .outer-container .main-content .inner-content .participant-signup .left-col {
          padding-right: 7.5px;
          margin-right: 7.5px;
          width: -webkit-calc(50% - 7.5px);
          width: calc(50% - 7.5px); }
        .vs1 .outer-container .main-content .inner-content .participant-signup .right-col {
          padding-left: 7.5px;
          margin-left: 7.5px;
          width: -webkit-calc(50% - 7.5px);
          width: calc(50% - 7.5px); }
        .vs1 .outer-container .main-content .inner-content .participant-signup .left-col .section-inner,
        .vs1 .outer-container .main-content .inner-content .participant-signup .right-col .section-inner {
          min-height: 350px; }
        .vs1 .outer-container .main-content .inner-content .participant-signup .expandable-feature {
          color: #3993bf;
          font-size: 1.3rem;
          cursor: pointer; }
      .vs1 .outer-container .main-content .inner-content .center-content {
        -webkit-flex-shrink: 1;
            -ms-flex-negative: 1;
                flex-shrink: 1;
        -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        min-width: 530px;
        max-width: 1000px; }
      .vs1 .outer-container .main-content .inner-content .right-content {
        -webkit-flex: 0 0 340px;
            -ms-flex: 0 0 340px;
                flex: 0 0 340px; }
.vs1 .leftRailGutter {
  position: absolute;
  width: 58px;
  min-width: 58px;
  height: 100%;
  background-color: red; }

#invitationAlert {
  position: fixed;
  margin-left: 30px;
  z-index: 200; }

.loading {
  text-align: center; }
  .loading background {
    top: 0px;
    left: 0px;
    position: fixed;
    width: 100%;
    height: 110%;
    background-color: #000000;
    opacity: .8;
    z-index: 3000; }
  .loading .imgdiv {
    position: fixed;
    top: 30%;
    left: 50%;
    z-index: 3001; }
    .loading .imgdiv h2 {
      margin-right: auto;
      margin-left: auto; }