crowdAI/crowdai

// added by the developer - to be reconciled with the designer

// Gems
@import 'jquery.atwho';
@import "social-share-button";
@import "codemirror";
@import "notebook";
@import "prism";
@import 'cookies';
@import 'doorkeeper';


ul.list-job-details {
  list-style-type: square;
}

.pull-right {
  float: right;
}

.hidden {
  display: none;
}

//.turbolinks-progress-bar {
//  background-color: #f0524d;
//}

.ellipsis {
  max-width: 640px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.wrapper {
  word-wrap: break-word;
}

.fa-2x {
  font-size: 2em !important;
}

.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
// http://jsfiddle.net/omarjuvera/8zkunqxy/2/
// https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

// Inspired by :
// https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
blockquote {
  background: $color-grey-03;
  border-left: 10px solid $color-accent;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: $color-accent;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}


/*
.cookies-eu-ok {
  background: $color-accent;
  color: #fff;
  border: none;
  &:hover {
    background: $color-accent-dark;
    color: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.16);
  }
}
*/

.leaderboard-note {
  background: #fffbed;
  color: #69634d;
  font-size: 14px;
  padding: 14px;
  margin-top: 8px;
}

.grading_status_cd {
  .fa {
    padding-right: 3px;
  }
  .submitted {
    color: $color-amber;
  }
  .initiated {
    color: $color-amber;
  }
  .graded {
    color: $color-green;
  }
  .failed {
    color: $color-accent;
  }
}

.display-none {
  display: none;
}

.filter-wrapper {
  display: flex;
  .filter-table {
    flex: 4;
  }
  .filter-sidebar {
    flex: 1;
    margin: 0 20px;
  }
  .filter-sidebar h4 {
    text-transform: uppercase;
    font-weight: 700;
    line-height: 30px;
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 0;
  }
}

.flex-row {
  display: flex;
  justify-content: space-between;
}

.site-message {
  background: $color-accent;
  color: #fff;
  font-size: 14px;
  height: 48px;
  font-weight: 600;
  border-bottom: 1px solid #e6e6e6;
  p {
    float: left;
    margin-top: 14px;
    a {
      color: #fff;
      text-decoration: underline;
    }
  }
}