@charset "UTF-8";
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/*@import url(https://fonts.googleapis.com/css?family=Fjalla+One);*/
html {
  overflow-y: scroll;
}

body {
  background-color: #ebebeb;
  padding-top: 70px;
}

a:active, a:focus {
  outline: 0;
}

h1 {
  font-size: 1.9em;
  margin-top: 5px;
}

h5 {
  font-weight: bold;
}

hr {
  color: #ebebeb;
  background-color: #ebebeb;
  height: 1px;
  border: 0px;
}

.nowrap {
  white-space: nowrap;
}

.hide {
  display: none;
}

.clear {
  clear: both;
}

.anchor {
  display: block;
  position: relative;
  top: -15px;
  visibility: hidden;
}

/*emoji*/
.em {
  margin-bottom: -2px;
}

#datadiv {
  display: none;
}

#wrapper {
  width: 950px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
  min-height: 400px;
  padding: 10px;
}

#header {
  margin-top: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

#copyright {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/*navbar*/
.navbar-prev-next {
  display: none;
}

.navbar-prev-next i {
  margin-top: 3px;
  font-size: 30px;
  margin-left: 10px;
  color: #888888;
}

.digit_field {
  width: 140px;
  border: 1px solid #000000;
  color: #878481;
  font-style: italic;
}

#foursquare_connect {
  margin-top: 10px;
  margin-left: 20px;
  display: none;
}

#foursquare_connected_msg {
  margin-top: 0px;
  margin-left: 20px;
  font-style: italic;
}

#foursquare_connect i {
  font-size: 1.3em;
}

.saved, #saved {
  display: none;
  margin-left: 10px;
}

#ajaxloader {
  display: none;
  margin-left: 20px;
}

.ajaxloader {
  display: none;
  margin-left: 20px;
}

.ajaxloader_settings {
  margin-top: -4px;
  margin-left: 20px;
}

#ajaxloader_center, .ajaxloader_center {
  display: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  margin-right: auto;
}

#logo {
  width: 775px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  font-style: italic;
}

#logo img {
  display: block;
  width: 775px;
}

#notificatie_teller_div {
  float: left;
  margin-top: 8px;
  margin-right: 8px;
}

.newcomment {
  color: orange;
}

.seencomment {
  color: #cccccc;
}

.contentblok {
  border: 1px solid #cccccc;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 3px;
}

.contentblok h1 {
  margin-bottom: 0.4em;
}

/* A row of buttons that has to survive a narrow screen: side by side when they
   fit, stacked with air between them when they wrap. Bootstrap 3 buttons are
   inline-block with no vertical margin, so wrapping leaves them touching. */
.btn-row {
  margin-top: 20px;
  margin-bottom: -8px; /* absorb the last row's margin */
}

.btn-row .btn {
  margin-bottom: 8px;
}

a, a:focus, a:active {
  outline: none;
}

a img {
  border: 0;
}

.promotebox {
  text-align: center;
}

.promotebox .btn {
  margin-top: 20px;
}

.vote-icon {
  margin-left: 0.4em;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  bottom: 2px;
}

.star-icon {
  color: #fad400;
}

/*movie-page*/
.movie_poster {
  margin-right: 10px;
  width: 92px;
  float: left;
}

.movie_poster img {
  width: 92px;
  height: 138px;
  margin-bottom: 10px;
  -webkit-box-shadow: 0;
          box-shadow: 0;
  -webkit-transition: -webkit-box-shadow 200ms;
  transition: -webkit-box-shadow 200ms;
  transition: box-shadow 200ms;
  transition: box-shadow 200ms, -webkit-box-shadow 200ms;
}

.movie_poster a:hover img {
  -webkit-box-shadow: 0px 0px 7px #337AB7;
          box-shadow: 0px 0px 7px #337AB7;
}

.movie_poster_not_logged_in {
  width: 154px;
}

.movie_poster_not_logged_in img {
  width: 154px;
  height: 231px;
}

.movie_content_right {
  float: none;
  display: table-cell;
}

.movie_content_right h3 {
  padding: 0;
  margin: 0;
  /*line-height: 1em;*/
}

.movie_content_right span {
  color: gray;
  font-size: 0.85em;
}

/* Critic scores: Metacritic Metascore + Rotten Tomatoes Tomatometer.
   Selectors are scoped under .critic_scores so they win over the generic
   `.movie_content_right span { color: gray }` rule above. */
.critic_scores {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 22px;
  margin: 12px 0 4px;
}

.critic_scores .critic_score {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 9px;
}

.critic_scores .critic_score__meta {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  line-height: 1.1;
}

.critic_scores .critic_score__num {
  color: #222;
  font-size: 1.15em;
  font-weight: 700;
}

.critic_scores .critic_score__label {
  color: #777;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Metacritic: colour-tiered rounded square with the score in white. */
.critic_scores .metascore__num {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 1.6em;
  padding: 3px 4px;
  border-radius: 4px;
  color: #fff;
  font: 700 0.95em/1 Arial, Helvetica, sans-serif;
}

.critic_scores .metascore--high .metascore__num {
  background: #66cc33;
}

.critic_scores .metascore--mid .metascore__num {
  background: #ffcc33;
  color: #1a1a1a;
}

.critic_scores .metascore--low .metascore__num {
  background: #ff0000;
}

/* Rotten Tomatoes: red tomato (Fresh) / green splat (Rotten) + the percentage. */
.critic_scores .rt__icon {
  display: block;
  width: 22px;
  height: 22px;
}

.critic_scores .rt--fresh .critic_score__num {
  color: #fa320a;
}

.critic_scores .rt--rotten .critic_score__num {
  color: #00a400;
}

/* Full film freely available on YouTube (admin-curated film.video_url),
   shown under the vote block. The Twig partial wraps it in the same
   col-xs-12 col-md-9 col-lg-8 grid as the surrounding blocks. */
.movie_video {
  margin: 20px 0;
}

.movie_video__caption {
  margin-bottom: 6px;
  font-weight: 700;
}

.movie_video__caption .fa {
  color: #cc0000;
}

.movie_video__source {
  color: #777;
  font-weight: 400;
  font-size: 0.85em;
}

.movie_video iframe {
  border: 0;
  border-radius: 4px;
}

/* ♪ Musical warning, above the poster on the movie page. Sized for a phone
   first: icon and text sit on one row and the text wraps under itself, so it
   stays two short lines at 390px instead of three. */
.musical_warning {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 10px;
  margin-bottom: 15px;
  padding: 10px 12px;
  border: 1px solid #f0d48a;
  border-left-width: 4px;
  border-radius: 4px;
  background: #fdf6e3;
  color: #6b5518;
  line-height: 1.4;
}

.musical_warning__icon {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  margin-top: 2px;
  font-size: 1.15em;
  color: #b08a2e;
}

.musical_warning__text strong {
  /* The heading half of the sentence; the joke follows inline. */
  color: #5a460f;
}

.movie_tagline {
  font-style: italic;
  margin-bottom: 10px;
}

.movie_tagline_placeholder {
  height: 8px;
}

.movie_directed_by {
  margin-bottom: 10px;
}

.movie_runtime {
  margin-bottom: 10px;
}

.movie_runtime > div {
  display: inline;
}

.runtime_short {
  color: green;
}

.runtime_medium {
  color: #333333;
}

.runtime_long {
  color: orange;
}

.runtime_very_long {
  color: red;
}

.movie_vote {
  margin-top: 5px;
}

.movie_other_vote {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.85em;
}

.movie_my_vote {
  float: left;
  font-size: 1.2em;
  font-weight: bold;
}

.movie_my_vote span {
  display: inline-block;
  font-size: 1.1em;
  margin-left: 6px;
}

.movie_specify_my_vote {
  float: left;
  margin-left: 18px;
  margin-top: 3px;
}

.movie_specify_my_vote_form {
  display: none;
  float: left;
}

.movie_specify_my_vote_form button {
  margin-left: 5px;
  margin-top: -4px;
}

.movie_specify_my_vote_return {
  float: left;
}

.movie_specify_my_vote_return .ajaxloader {
  margin-top: -5px;
}

.movie_specify_my_vote #saved {
  /*margin-top: -20px;*/
}

.movie_specify_my_vote .close {
  float: none;
}

.movie_extra {
  background-color: #cccccc;
  padding: 5px;
  border-radius: 3px;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.movie_extra h4 {
  margin: 0;
  margin-top: 5px;
  margin-bottom: 10px;
  padding: 0;
}

.movie_extra label {
  display: block;
  margin-top: 5px;
}

.movie_extra .prevalue {
  font-style: italic;
  color: #bbbbbb;
}

.movie_extra .delete {
  color: red;
}

.movie_extra_gezien_with {
  padding-top: 2px;
}

.movie_extra_gezien_with a {
  display: block;
  border: 1px solid #cccccc;
  border-radius: 4px;
  background-color: #ffffff;
  margin-bottom: 0.7em;
  padding: 3px;
  padding-left: 1em;
  color: #555555;
  line-height: 21px;
  border: 2px solid #ffffff;
}

.movie_extra_gezien_with a:hover {
  border-color: red;
  cursor: pointer;
  text-decoration: none;
}

div.movie_extra_new_gezien_with {
  display: none;
}

div.movie_extra_show_wrapper {
  border: 1px solid #cccccc;
  border-radius: 3px;
  margin-top: 5px;
  margin-bottom: 15px;
  padding-left: 8px;
  padding-right: 8px;
}

div.movie_extra_show {
  display: table;
  padding-top: 4px;
  padding-bottom: 4px;
}

div.movie_extra_show > div {
  display: table-row;
}

div.movie_extra_show i {
  width: 25px;
  display: table-cell;
  padding-top: 6px;
  padding-bottom: 6px;
}

div.movie_extra_show > div > div {
  display: table-cell;
  padding-top: 4px;
  padding-bottom: 4px;
}

div.movie_extra_show_yearlist i {
  color: #fad400;
}

/*comments*/
.movie_comments, #movie_review {
  /*margin-top: 1.5em;*/
  margin-bottom: 1.5em;
  /*max-width: 600px;*/
}

.movie_comment_post_button_row {
  margin-top: 6px;
  height: 30px;
}

.movie_comments_new {
  display: none;
}

.movie_post_review_hidden {
  display: none;
}

.movie_review_textarea, .movie_comment_textarea {
  display: block;
  height: 3em;
  padding: 5px;
}

.movie_comment_comment_on {
  font-weight: bold;
  margin-bottom: 5px;
}

#movie_comment_input {
  width: 300px;
  height: 20px;
}

.comment {
  border: 1px solid #cccccc;
  border-radius: 3px;
  margin-bottom: 20px;
  -webkit-box-shadow: 3px 3px 5px #aaaaaa;
          box-shadow: 3px 3px 5px #aaaaaa;
}

.comment_header {
  background-color: #ebebeb;
  color: #777777;
  padding: 5px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  font-size: 0.85em;
}

.comment_header_naam {
  float: left;
}

.comment_header_naam img {
  width: 20px;
  height: 20px;
  margin-right: 7px;
}

.comment_header_cijfer {
  float: left;
}

.comment_header_geplaatst {
  float: right;
}

.comment_header_edit {
  float: right;
  display: block;
  margin-left: 5px;
  cursor: pointer;
}

.comment_header_edit:hover {
  text-decoration: none;
}

.comment_content {
  padding: 5px;
  word-wrap: break-word;
}

.comment_content a, .newsfeed_review a {
  word-break: break-all;
}

.legend_review > div, .legend_comment > div {
  display: none;
}

.legend {
  border: 1px solid #cccccc;
  width: 200px;
  padding: 4px;
  border-radius: 3px;
}

.legend li {
  display: block;
  clear: both;
}

.legend span.term {
  display: inline-block;
  float: left;
  width: 60px;
}

.legend span.explain {
  display: inline-block;
  float: left;
}

#movie_review .comment_header {
  background-color: #333333;
  color: #ffffff;
}

#movie_review .comment_header .fa-edit {
  color: #fff9d5;
}

.comment_edit {
  display: none;
}

.comment_edit textarea {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  padding: 4px;
  padding-top: 5px;
  border: 0;
  background-color: #fff9d5;
  margin-bottom: 5px;
}

.comment_edit button {
  margin-left: 10px;
  margin-bottom: 5px;
}

/*table-like div's with links*/
.detail_links {
  display: table;
  width: 100%;
}

.detail_links_header {
  margin-top: 1.5em;
}

.detail_links > div {
  font-weight: bold;
  display: table-row;
  padding: 20px;
}

.detail_links > div div, .detail_links a div {
  border-top: 1px solid #dddddd;
  display: table-cell;
  padding: 8px;
  vertical-align: top;
}

.detail_links > div div {
  padding-top: 8px;
  padding-bottom: 8px;
}

.detail_links a div.link_cell {
  /*white-space: nowrap;*/
}

.detail_links a div {
  color: #333333;
}

.detail_links a div.link_cell, .detail_links a div.link_cell_partly span:not(.jaartal) {
  color: #0088cc;
}

.detail_links a:hover {
  text-decoration: none;
  background-color: #ebebeb;
}

.detail_links a:hover div.link_cell {
  text-decoration: underline;
  color: #005580;
}

.detail_links a:hover div.link_cell_partly span:not(.jaartal) {
  text-decoration: underline;
  color: #005580;
}

.detail_links a {
  display: table-row;
}

.detail_links_avatar_img {
  /*width: 50px;*/
}

.detail_links_avatar_img img {
  width: 50px;
  height: 50px;
}

.detail_links_movie_img img {
  width: 50px;
  height: 75px;
}

.detail_links_me {
  background-color: #fff9d5;
}

/*please write review - rechterkolom*/
.please_write_review a {
  display: block;
  text-decoration: none;
  color: #333333;
  margin-bottom: 15px;
  padding: 4px;
  font-size: 0.9em;
  border: 1px solid #cccccc;
  border-radius: 3px;
}

.please_write_review .my_latest_vote_text {
  margin-top: 10px;
}

.please_write_review span {
  font-size: 1.1em;
}

.please_write_review img {
  width: 60px;
  height: 90px;
  display: block;
  float: left;
  margin-right: 10px;
}

.please_write_review_text span:not(.jaartal) {
  color: #0088cc;
}

.please_write_review a:hover {
  text-decoration: none;
  background-color: #ebebeb;
  color: #333333;
}

.please_write_review a:hover span:not(.jaartal) {
  text-decoration: underline;
  color: #005580;
}

/*my latest vote - rechterkolom*/
.my_latest_vote a {
  display: block;
  text-decoration: none;
  color: #333333;
  margin-bottom: 15px;
}

.my_latest_vote img {
  width: 60px;
  height: 90px;
  display: block;
  float: left;
  margin-right: 10px;
}

.my_latest_vote_text span:not(.jaartal) {
  color: #0088cc;
}

.my_latest_vote a:hover {
  text-decoration: none;
  background-color: #ebebeb;
  color: #333333;
}

.my_latest_vote a:hover span:not(.jaartal) {
  text-decoration: underline;
  color: #005580;
}

.my_latest_vote_text_date {
  color: gray;
}

.pick_yearlist td img {
  width: 50px;
  height: 75px;
}

.yearlist_list {
  max-width: 500px;
}

.yearlist_list tr td:nth-child(2) {
  text-align: center;
}

.about_opsomming li {
  margin-bottom: 1.5em;
}

.jaartal {
  color: gray;
}

.jumbotron {
  padding-top: 1em;
  padding-bottom: 1em;
  background-color: #ffffff;
}

.stats_linklist {
  font-size: 1.1em;
  margin-bottom: 20px;
}

.stats_linklist li {
  margin-bottom: 0.6em;
}

.vote_history_sort label {
  display: inline;
  margin-right: 1em;
}

.vote_history_sort select {
  margin-top: 5px;
}

.index_voordelen {
  padding-left: 30px;
  padding-right: 30px;
}

.index_voordelen p {
  height: 80px;
}

.index_movie-item {
  background: url("../pic/movie-items.png") top left no-repeat;
}

.index_movie-item1 {
  display: block;
  width: 106px;
  height: 180px;
  background-position: -4px 0px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 20px;
}

.index_movie-item2 {
  display: block;
  width: 210px;
  height: 182px;
  background-position: -194px 0px;
  margin-left: auto;
  margin-right: auto;
}

.index_movie-item3 {
  display: block;
  width: 186px;
  height: 183px;
  background-position: -438px 0px;
  margin-left: auto;
  margin-right: auto;
}

/* /join landing page */
.join_hero {
  text-align: center;
  padding: 35px 20px 40px;
}

.join_hero h1 {
  font-size: 2.4em;
  margin-bottom: 0.5em;
}

.join_highlight {
  background-color: #fad400;
  border-radius: 3px;
  padding: 0 10px;
  display: inline-block;
}

.join_intro {
  font-size: 1.25em;
  color: #555555;
  max-width: 620px;
  margin: 0 auto 1.5em auto;
}

.join_form .form-control {
  min-width: 260px;
}

.join_form .btn {
  margin-top: 5px;
}

.join_smallprint {
  margin-top: 15px;
  color: #999999;
}

.join_sharelink {
  font-size: 1.6em;
  margin: 1em 0 1.5em 0;
}

.join_section {
  margin-top: 15px;
}

.join_section_title {
  text-align: center;
  margin-bottom: 1em;
}

.join_step {
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 15px;
}

.join_step h3 {
  font-size: 1.25em;
}

.join_step p {
  color: #555555;
}

.join_step_icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  line-height: 64px;
  border-radius: 50%;
  background-color: #fff9d5;
  border: 1px solid #fad400;
  font-size: 26px;
}

.join_signin {
  text-align: center;
  font-size: 1.1em;
  margin: 20px 0;
}

.join_invite_banner {
  display: inline-block;
  background-color: #fff9d5;
  border: 1px solid #fad400;
  border-radius: 30px;
  padding: 8px 22px 8px 8px;
  margin-bottom: 20px;
  font-size: 1.2em;
}

.join_invite_avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}

.join_sharebox {
  max-width: 560px;
  margin: 0 auto;
}

.join_resetform {
  margin-bottom: 10px;
}

.join_resetform .btn-link {
  color: #999999;
}

.index_new_comments {
  margin-bottom: 15px;
  background-color: #fff9d5;
  padding: 15px;
  padding-top: 0px;
  border: 1px solid #cccccc;
  border-radius: 3px;
}

.index_new_comments a {
  display: block;
  margin-bottom: 10px;
}

.index_new_comments a img {
  width: 35px;
  margin-right: 5px;
  float: left;
  display: block;
}

.index_new_comments a span {
  float: left;
  display: block;
  width: 80%;
}

.index_new_comments a span i {
  display: block;
  font-style: normal;
}

.index_new_comments a:hover {
  text-decoration: none;
  color: #333333;
}

.index_new_comments a:hover span {
  text-decoration: none;
}

.index_new_comments a:hover span:not(.jaartal) {
  text-decoration: underline;
  color: #005580;
}

.index_leaderboard {
  background-color: #fff9d5;
  padding: 15px;
  padding-top: 0px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  margin-bottom: 15px;
}

.index_leaderboard a {
  font-size: 1.1em;
}

.index_leaderboard .position {
  font-weight: bold;
}

#body_setup .well {
  background: #ffffff;
}

#body_settings label:hover {
  cursor: pointer;
}

#body_settings h2 {
  font-size: 1.5em;
  margin-top: 1em;
  padding-top: 0.7em;
  padding-bottom: 0.4em;
  border-top: 1px solid #cccccc;
}

#body_privacy h4 {
  margin-top: 2em;
}

.settings_list li {
  margin-top: 1em;
  margin-bottom: 1.5em;
}

footer {
  display: block;
  margin-top: 15px;
  margin-bottom: 15px;
}

#searchbar {
  display: block;
  margin-bottom: 10px;
}

#searchfield {
  background-color: #ffffff;
  width: 400px;
}

.searchfield_ajaxloader {
  background-image: url(../pic/ajax-loader.gif);
  background-repeat: no-repeat;
  background-position: 98% center;
}

.title_alt {
  font-style: italic;
}

.tt-dropdown-menu {
  width: 400px;
}

.tt-is-under-cursor .jaartal {
  color: #cccccc;
}

#compatibility {
  border: 1px solid #cccccc;
  background-color: #fff9d5;
  padding: 20px;
  margin-bottom: 30px;
}

/*newsfeed*/
.newsfeed {
  color: #333333;
  line-height: 1em;
}

.newsfeed table {
  width: 100%;
}

.newsfeed h1 {
  font-size: 1.2em;
  margin: 0;
  margin-bottom: 3px;
  padding: 0;
  line-height: 1.2em;
  color: #0088cc;
}

.newsfeed_datum {
  color: #808080;
  margin-bottom: 5px;
}

.newsfeed h1 span.jaartal {
  font-weight: normal;
  font-size: 0.8em;
}

.newsfeed td {
  vertical-align: top;
}

.newsfeed_poster img {
  width: 80px;
}

.newsfeed_user {
  line-height: 1.3em;
}

.newsfeed_item_checkin .newsfeed_user {
  line-height: 2.3em;
}

.newsfeed_user img {
  float: left;
  width: 35px;
  margin-right: 5px;
}

.newsfeed_right {
  margin-left: 1em;
  padding: 0;
}

.newsfeed_review {
  margin-top: 8px;
  line-height: 1.3em;
}

.newsfeed_review a {
  -ms-hyphens: auto;
      hyphens: auto;
}

.newsfeed_review_with_comments {
  border: 1px solid #cccccc;
  padding: 3px;
}

.newsfeed_write_review {
  margin-top: 8px;
  line-height: 1.1em;
  color: #0088cc;
}

.newsfeed_comment {
  margin-top: 10px;
  margin-left: 2em;
  padding: 3px;
  border: 1px dashed #cccccc;
  color: #777777;
  line-height: 1.3em;
}

.newsfeed_comment span.name {
  display: block;
  color: #777777;
  margin-bottom: 4px;
}

.newsfeed_comment img {
  width: 17px;
  margin-top: -2px;
  margin-right: 8px;
}

div.newsfeed h1 span:not(.jaartal) {
  color: #333333;
}

a.newsfeed:hover {
  text-decoration: none;
  color: #333333;
}

a.newsfeed:hover table td {
  background-color: #ebebeb;
}

a.newsfeed:hover h1 span:not(.jaartal), a.newsfeed:hover .newsfeed_write_review {
  color: #005580;
  text-decoration: underline;
}

a.newsfeed_item_news table {
  background-color: #dbdbdb;
}
.newsfeed_item_footer {
  margin-top: 8px;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  color: #888888;
  padding: 3px;
  /*padding-left: 6px;*/
}

.newsfeed_item_footer i {
  display: inline-block;
  padding-left: 4px;
  padding-right: 7px;
  /*	margin-bottom: -5px;*/
}

.please_login {
  background-color: #ffec7d;
  color: #000000;
  border: 1px solid #cccccc;
  padding: 1em;
  max-width: 350px;
  text-align: center;
  border-radius: 3px;
}

.please_login strong {
  display: block;
  margin-top: 10px;
}

.index_syncnow {
  margin-bottom: 15px;
}

.syncnow {
  white-space: normal;
  height: auto;
  min-height: 34px;
  padding-left: 2px;
  padding-right: 2px;
}

#syncnow_respons {
  margin-left: 5px;
}

.index_syncnow_user_interaction {
  display: none;
  height: 2em;
  margin-top: 0.8em;
  text-align: center;
}

/*spoilers*/
.spoiler-layout {
  color: transparent;
  text-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}

.lt-ie10 .spoiler-layout {
  color: #bbbbbb !important;
  background-color: #bbbbbb !important;
  text-shadow: none;
}

.spoiler-layout-shown {
  color: #333333;
  background-color: #dddddd;
}

.newsfeed .spoiler-layout-shown {
  background-color: #eeeeee;
}

.show_spoilers_div {
  /*margin-top: 5px;*/
  margin-bottom: 10px;
}

/*movielist*/
.movielist_content {
  max-width: 700px;
}

.movielist_list_placeholder {
  display: none;
  height: 600px;
}

ul.movielist li {
  line-height: 2.5em;
}

.movielist_stats {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 2em;
}

.movielist_score {
  margin-bottom: 3em;
}

.movielist_movie_seen {
  background-color: #ebebeb;
}

.movielist_movie_seen .link_cell_partly span, .movielist_movie_seen .link_cell {
  /*color: gray !important;*/
}

.movielist_item em {
  display: block;
  margin: 0.3em 0;
  font-size: 0.9em;
  font-style: normal;
}
.movielist_item .runtime_medium {
  color: #888;
}

.movielist_user_picture img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.movielist_spacing {
  height: 30px;
}

.movielist_mark_as_watched {
  font-weight: normal;
  background-color: #fff !important;
  height: 20px;
  display: table-cell;
}

.movielist_mark_as_watched label {
  color: #aaa;
  display: inline;
}

.movielist_mark_as_watched_active label {
  color: #000;
}

.movielist_mark_as_watched_saved label {
  color: green !important;
}

.movielist_mark_as_watched input[type=checkbox] {
  width: 20px;
  margin-right: 1px;
}

.movielist_mark_as_watched label {
  font-weight: normal;
  cursor: pointer;
}

.movielist_mark_as_watched label:hover {
  color: #000;
}

.movielist_userlink {
  /*display: none;*/
}

.movielist_userlink div {
  border-top-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.movielist_userlink div:nth-child(1) {
  background-color: #ffffff;
}

.movielist_userlink:nth-child(odd) div:nth-child(2), .movielist_userlink:nth-child(odd) div:nth-child(3) {
  background-color: #eeeeee;
}

.movielist_userlink:nth-child(even) div:nth-child(2), .movielist_userlink:nth-child(even) div:nth-child(3) {
  background-color: #dddddd;
}

.movielist_list .detail_links_me div:nth-child(2), .movielist_list .detail_links_me div:nth-child(3) {
  background-color: #fff9d5;
}

.movielist_filter {
  margin: 10px 0;
  background-color: #eeeeee;
  padding: 3px;
  line-height: 30px;
}

.movielist_filter_choices {
  display: inline;
  cursor: pointer;
}

.movielist_filter_choices_inactive {
  opacity: 0.4;
}

.movielist_number_of_movies {
  margin: 10px 0;
}

.badge-success {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5cb85c), to(#419641));
  background-image: linear-gradient(to bottom, #5cb85c 0, #419641 100%);
  background-repeat: repeat-x;
  border-color: #3e8f3e;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c',endColorstr='#ff419641',GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

a, a:visited, a:focus, a:active, a:hover {
  outline: 0 none !important;
}

@media (min-width: 768px) {
  /*alles groter dan mobiel*/
  .no-gutter > div {
    padding-right: 0px;
    padding-left: 0px;
  }
  .small-gutter > div {
    padding-right: 0px;
    padding-left: 0px;
  }
  .small-gutter > div:first-child {
    padding-left: 10px;
  }
}
@media (max-width: 767px) {
  /*mobiel*/
  body {
    background-color: #ffffff;
  }
  .visible-xs-inline {
    display: inline-block !important;
  }
  .hidden-xs-inline {
    display: none !important;
  }
  #logo {
    width: 95%;
    margin-bottom: 10px;
    font-size: 1em;
  }
  #logo img {
    display: block;
    width: 95%;
  }
  #searchbar {
    margin-bottom: 15px;
  }
  #searchfield, .twitter-typeahead {
    width: 100%;
  }
  .tt-dropdown-menu {
    width: 100%;
  }
  .jumbotron {
    background-color: #eeeeee;
  }
  .jumbotron h2 {
    font-size: 1.1em;
    line-height: 1.1em;
  }
  .contentblok {
    border: 0px;
    padding: 0;
    margin: 0;
  }
  .newsfeed_right {
    margin-left: 0.5em;
  }
  .movie_specify_my_vote {
    margin-left: 0;
    height: 50px;
  }
  .movie_specify_my_vote .btn-danger {
    margin-left: 0;
    margin-top: 3px;
  }
  .nowrap {
    white-space: normal;
  }
  #notificatie_teller_div .dropdown-menu {
    margin-left: -107px;
  }
  .please_login {
    margin-top: 0;
  }
  .newsfeed_comment span.date {
    display: block;
  }
  .movie_extra_at_hide {
    display: none;
  }
}
@media (max-width: 767px) and (orientation: portrait) {
  /*mobiel portrait*/
  .movie_list td img {
    display: none;
  }
  .movie_list .img_cell {
    display: none;
  }
  .detail_links div.hide_mobile_portrait {
    display: none;
  }
  .hide_mobile_portrait_td {
    display: none;
  }
  .movie_list_recent .more_than_5 {
    display: none;
  }
  .latest_comment_poster {
    display: none;
  }
}
@media only screen and (orientation: portrait) {
  #logo img {
    width: 95%;
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
  /*small screens*/
  .visible-sm-inline {
    display: inline-block !important;
  }
  .hidden-sm-inline {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  /*smaller than small screens*/
  .visible-sm-inline {
    display: none !important;
  }
  .hidden-sm-inline {
    display: inline-block !important;
  }
}
@media screen and (min-width: 993px) {
  /*larger than small screens*/
  .visible-sm-inline {
    display: none !important;
  }
  .hidden-sm-inline {
    display: inline-block !important;
  }
}
@media screen and (min-width: 768px) {
  .visible-xs-inline {
    display: none !important;
  }
  .hidden-xs-inline {
    display: inline-block !important;
  }
}
/* Fix for viewport being too wide below smallest breakpoint */
@media (max-width: 767px) {
  body > .container {
    overflow: hidden;
  } /* fix */
  body > .container > * {
    overflow: visible;
  } /* reset back to normal */
}
/* Web push opt-in (homepage sidebar). The wrapper is always rendered, so only
   the revealed child carries spacing: the hidden steady state adds no gap. */
.index_notifications .btn,
.index_notifications_confirmed,
.index_notifications_ios_hint {
  margin-bottom: 15px;
}

.index_notifications_confirmed {
  color: #3c763d;
  font-size: 0.9em;
}

.index_notifications_ios_hint {
  color: #777777;
  font-size: 0.9em;
}

/* ---------- Swarm archive (/swarm, user 1 only) ---------- */
.swarm_checkin__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.swarm_account {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  padding: 2px 8px;
  border-radius: 10px;
  background: #eeeeee;
  color: #555555;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* One colour each, so a mixed feed is scannable without reading the label. */
.swarm_account--jeroen {
  background: #dcecfa;
  color: #1c5b8c;
}

.swarm_account--susanne {
  background: #f7e2ee;
  color: #8c1c62;
}

.swarm_checkin__time {
  color: #999999;
  font-size: 16px;
  text-align: right;
}

.swarm_checkin__venue {
  margin: 0;
  font-size: 1.25em;
  line-height: 1.25;
}

.swarm_checkin__meta {
  color: #777777;
  font-size: 16px;
}

.swarm_parent,
.swarm_event,
.swarm_renamed {
  display: inline-block;
  color: #777777;
  font-size: 0.85em;
  font-weight: normal;
}
.swarm_parent a,
.swarm_event a,
.swarm_renamed a {
  color: #777777;
  text-decoration: underline;
}

.swarm_checkin__category:before {
  content: "·";
  margin: 0 5px;
}

.swarm_checkin__filter {
  display: inline-block;
  padding: 8px 4px;
  color: #777777;
  text-decoration: underline;
}
.swarm_checkin__filter:hover, .swarm_checkin__filter:focus {
  color: #333333;
}

.swarm_checkin__anchor {
  scroll-margin-top: 60px;
}

.swarm_checkin__anchor:target .swarm_checkin {
  -webkit-animation: swarm-jump-landed 4s ease-out 1;
          animation: swarm-jump-landed 4s ease-out 1;
}

@-webkit-keyframes swarm-jump-landed {
  0%, 55% {
    -webkit-box-shadow: 0 0 0 2px #12505d;
            box-shadow: 0 0 0 2px #12505d;
  }
  100% {
    -webkit-box-shadow: 0 0 0 2px rgba(18, 80, 93, 0);
            box-shadow: 0 0 0 2px rgba(18, 80, 93, 0);
  }
}

@keyframes swarm-jump-landed {
  0%, 55% {
    -webkit-box-shadow: 0 0 0 2px #12505d;
            box-shadow: 0 0 0 2px #12505d;
  }
  100% {
    -webkit-box-shadow: 0 0 0 2px rgba(18, 80, 93, 0);
            box-shadow: 0 0 0 2px rgba(18, 80, 93, 0);
  }
}
.swarm_checkin__shout {
  margin: 10px 0 0;
  white-space: pre-line;
}

.swarm_checkin__pending {
  margin: 10px 0 0;
  font-size: 16px;
}

.swarm_photos {
  margin-top: 12px;
}

.swarm_photos img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}

/* Two per row on a phone; a lone photo gets the full width and its own shape. */
.swarm_photos--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.swarm_photos--grid img {
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}

.swarm_linked,
.swarm_link_failed {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.4;
}

.swarm_linked {
  background: #dff0d8;
  color: #3c763d;
}

.swarm_link_failed {
  background: #f2dede;
  color: #a94442;
}

.swarm_pager {
  color: #777777;
  font-size: 16px;
}

/* Visit tallies, one per account, never summed: a shared total would hide
   which of the two actually goes there. */
.swarm_visits {
  margin-top: 6px;
}

.swarm_visits a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
  text-decoration: none;
}

.swarm_visits__account {
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: bold;
}

/* The map fills what is left of the screen below the header. Explicit height,
   because Leaflet measures its container and an auto-height div collapses to
   nothing. */
#swarm_map {
  height: 70vh;
  min-height: 320px;
  border: 1px solid #cccccc;
  border-radius: 3px;
}

@media (max-width: 767px) {
  #swarm_map {
    height: 75vh;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}
/* Venue header: what the check-in title now opens onto. */
.swarm_venue__where {
  color: #777777;
  font-size: 16px;
  margin-bottom: 8px;
}

.swarm_venue__visits {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.swarm_venue__dates {
  color: #999999;
  font-size: 16px;
}

/* Search box and the date jump. Full width on a phone, inline once there is
   room; the button never wraps onto its own line. */
.swarm_tools {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.swarm_tools__search {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}

.swarm_tools .form-control {
  width: 100%;
}

.swarm_tools__label {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  margin: 0;
  color: #777777;
  font-weight: normal;
}

.swarm_tools .btn {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

/* typeahead renders its own wrapper around the input; without this the field
   collapses inside the flex row. */
.swarm_tools .twitter-typeahead {
  display: block !important;
  width: 100%;
}

.swarm_suggest__kind {
  float: right;
  color: #999999;
  font-size: 15px;
  text-transform: uppercase;
}

/* The shared Bootstrap bits inside these pages: paragraphs, the small buttons
   (12px out of the box) and the search fields. Scoped by body id so the rest of
   the site keeps its own scale, and by .contentblok so the navbar and the
   site-wide search bar are left alone. Headings are deliberately not in here -
   they are already large enough to read. */
#body_swarm .contentblok p,
#body_swarm .contentblok .btn,
#body_swarm .contentblok .form-control,
#body_swarm .contentblok .swarm_tools__label,
#body_swarm-map .contentblok p,
#body_swarm-map .contentblok .btn,
#body_swarm-map .contentblok .form-control,
#body_swarm-map .contentblok .swarm_tools__label,
#body_swarm-stats .contentblok p,
#body_swarm-stats .contentblok .btn,
#body_swarm-stats .contentblok .form-control,
#body_swarm-stats .contentblok .swarm_tools__label {
  font-size: 16px;
}

/* Leaflet's popup and attribution ship at 13px and 11px. */
#swarm_map .leaflet-popup-content {
  font-size: 16px;
}
#swarm_map .leaflet-control-attribution {
  font-size: 13px;
}

/* "Where am I", below the zoom controls. .leaflet-bar supplies the white box
   and the border; this only has to centre the icon and match the 30px zoom
   buttons above it. */
.swarm_locate a {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #1565c0;
  font-size: 16px;
}

@media (min-width: 768px) {
  .swarm_photos--grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .swarm_photos--single img {
    max-width: 520px;
  }
}
/* Under 768px the site-wide rule strips border, padding and margin from every
   .contentblok, which left one check-in running straight into the next with no
   sign of where the boundary was. Give this page's cards their own separator
   instead of changing that rule for the whole site. */
@media (max-width: 767px) {
  .swarm_checkin {
    border-top: 1px solid #cccccc !important;
    padding-top: 15px !important;
  }
}
/* Lightbox2 keeps its prev/next arrows at opacity 0 until hover
   (css/plugins.css:250, :268), which on a phone means never. Show them outright
   wherever hovering is not a thing, so a multi-photo check-in can actually be
   paged through by tapping. */
@media (hover: none), (max-width: 767px) {
  .lb-nav a.lb-prev,
  .lb-nav a.lb-next {
    opacity: 1;
  }
}
/* ---------- Swarm statistics (/swarm/stats) ---------- */
/* No charting library anywhere on this page: every bar is a div with a
   percentage width and every heat cell a table cell with a class. That is
   ~2KB of CSS against ~60KB of JavaScript, it prints, and it needs no resize
   handler to survive a phone rotating. */
/* The two account colours the feed already uses, reused for every chart
   segment so a colour means the same thing on all three pages. The badge rules
   above set the text colour; a chart segment only ever shows its background,
   so the two uses do not collide. */
/* A chart segment is an empty span whose width or height is the whole message.
   The padding and radius are cleared because the account-badge rules below also
   match these elements, and on an empty span that padding only distorts the
   percentage just set. */
.swarm_bar__seg,
.swarm_column__seg,
.swarm_stack__seg {
  display: block;
  min-width: 1px;
  padding: 0;
  border-radius: 0;
}

/* An account's chart mark takes the strong colour of its badge, not the badge's
   own background. .swarm_account--jeroen is written for a text chip - pale wash
   behind dark text - and a bar painted in that wash is all but invisible
   against the track. Two classes, so these win over the badge rule on
   specificity wherever the two meet.

   Every kind of mark is listed, and that is the point: this was fixed first for
   bars and columns alone, and the stacked bar and the legend key beside it then
   turned up in the pale wash a section later. Anything that carries an account
   colour belongs here. */
.swarm_bar__seg.swarm_account--jeroen,
.swarm_column__seg.swarm_account--jeroen,
.swarm_stack__seg.swarm_account--jeroen,
.swarm_legend__key.swarm_account--jeroen {
  background: #1c5b8c;
}

.swarm_bar__seg.swarm_account--susanne,
.swarm_column__seg.swarm_account--susanne,
.swarm_stack__seg.swarm_account--susanne,
.swarm_legend__key.swarm_account--susanne {
  background: #8c1c62;
}

.swarm_h2 {
  margin: 0 0 4px;
  font-size: 1.4em;
}

.swarm_h3 {
  margin: 26px 0 8px;
  font-size: 1.1em;
  font-weight: bold;
  color: #555555;
}

.swarm_note {
  margin: 8px 0 0;
  color: #777777;
  font-size: 16px;
}

/* ---------- the number tiles ---------- */
.swarm_figures {
  display: grid;
  /* Fixed column counts rather than auto-fit. The separators here are the
     container colour showing through a 1px gap, so a part-filled last row
     reads as a grey block rather than as nothing - and auto-fit at 1280px
     chose nine columns for ten tiles, leaving exactly that. Two and five both
     divide the tiles evenly, so every row is full at every width. */
  grid-template-columns: repeat(2, 1fr);
  /* The lines between tiles are the tiles' own right and bottom borders, not a
     gap showing a coloured container through. With the gap, a last row that
     does not fill - five tiles across two columns - painted the empty cell as
     a solid grey block. The container supplies only the top and left edges, so
     nothing is drawn twice. */
  background: #ffffff;
  border-top: 1px solid #e4eaeb;
  border-left: 1px solid #e4eaeb;
  border-radius: 4px;
  margin: 14px 0 4px;
  overflow: hidden;
}

@media (min-width: 600px) {
  .swarm_figures {
    grid-template-columns: repeat(5, 1fr);
  }
}
.swarm_figure {
  background: #ffffff;
  padding: 10px 12px 12px;
  border-right: 1px solid #e4eaeb;
  border-bottom: 1px solid #e4eaeb;
}

.swarm_figure__n {
  display: block;
  color: #12505d;
  font-size: 23px;
  font-weight: bold;
  line-height: 1.1;
  /* Digits the same width, so the tiles line up down a column. */
  font-variant-numeric: tabular-nums;
}

.swarm_figure__l {
  display: block;
  margin-top: 3px;
  color: #777777;
  font-size: 15px;
}

.swarm_figure__note {
  display: block;
  margin-top: 2px;
  color: #999999;
  font-size: 13px;
}

/* ---------- horizontal bars ---------- */
.swarm_bars {
  margin-top: 10px;
}

.swarm_bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 3px 0;
}

.swarm_bar__label {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33%;
          flex: 0 0 33%;
  max-width: 33%;
  font-size: 16px;
  line-height: 1.25;
  /* A long city name wraps rather than pushing the bar off the row. */
  overflow-wrap: break-word;
}

.swarm_bar__note {
  display: block;
  color: #999999;
  font-size: 13px;
}

.swarm_bar__track {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 15px;
  background: #f0f3f4;
  border-radius: 2px;
  overflow: hidden;
}

.swarm_bar__value {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  min-width: 46px;
  text-align: right;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: #555555;
}

/* Single-colour bars, where the split by account would say nothing: a distance,
   a place, one day. */
.swarm_bar__seg--place,
.swarm_bar__seg--km,
.swarm_bar__seg--day {
  background: #12505d;
}

.swarm_bar__seg--weekday {
  background: #7ba7c4;
}

.swarm_bar__seg--weekend {
  background: #12505d;
}

/* ---------- vertical columns ---------- */
.swarm_columns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 2px;
  margin-top: 12px;
}

.swarm_column {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
}

.swarm_column__stack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  height: 90px;
  background: #f0f3f4;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
}

.swarm_column__label {
  margin-top: 4px;
  text-align: center;
  color: #999999;
  font-size: 12px;
  /* Every label reserves its line whether or not it prints one, so the
     columns keep a common baseline. */
  min-height: 15px;
  white-space: nowrap;
}

/* ---------- the single stacked bar (parts of the day) ---------- */
.swarm_stack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 22px;
  margin-top: 12px;
  border-radius: 3px;
  overflow: hidden;
  background: #f0f3f4;
}

.swarm_stack__seg {
  display: block;
  min-width: 2px;
}

/* Light through the middle of the day and dark at both ends, so the shape of a
   day is legible in the bar itself rather than only in the legend. */
.swarm_stack__seg--night {
  background: #123f4a;
}

.swarm_stack__seg--morning {
  background: #3f8fa3;
}

.swarm_stack__seg--lunch {
  background: #74b8c7;
}

.swarm_stack__seg--afternoon {
  background: #9ecfda;
}

.swarm_stack__seg--evening {
  background: #4f9db0;
}

.swarm_stack__seg--late {
  background: #1d6577;
}

.swarm_legend {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
}

.swarm_legend__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #555555;
}

.swarm_legend__key {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

/* ---------- year chips ---------- */
.swarm_years {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.swarm_year {
  padding: 3px 9px;
  border: 1px solid #d4dcde;
  border-radius: 11px;
  background: #ffffff;
  color: #555555;
  font-size: 15px;
  /* A tap target that clears 30px with the padding above, which is what these
     need to be usable on a phone without hitting the year beside them. */
  line-height: 1.5;
}

.swarm_year:hover,
.swarm_year:focus {
  border-color: #12505d;
  color: #12505d;
  text-decoration: none;
}

.swarm_year--on,
.swarm_year--on:hover,
.swarm_year--on:focus {
  background: #12505d;
  border-color: #12505d;
  color: #ffffff;
}

/* ---------- tables ---------- */
.swarm_table {
  width: 100%;
  font-size: 16px;
}
.swarm_table th {
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid #d4dcde;
  color: #777777;
  font-size: 13px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.swarm_table td {
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid #eef2f3;
  vertical-align: top;
}
.swarm_table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- definition lists of records ---------- */
.swarm_records {
  margin: 12px 0 0;
}
.swarm_records dt {
  color: #777777;
  font-size: 13px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.swarm_records dd {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.4;
}

.swarm_cc {
  color: #999999;
  font-size: 13px;
  text-transform: uppercase;
}

/* ---------- anything too wide for a phone ---------- */
/* The calendar and the 7x24 heat grid are the two things here that genuinely
   cannot fit 390px. They scroll inside their own box rather than making the
   page scroll sideways, which is the rule for wide content on this site. */
.swarm_scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 12px;
  padding-bottom: 4px;
}

/* ---------- the calendar heatmap ---------- */
.swarm_cal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.swarm_cal__year {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 34px;
  padding-top: 1px;
  color: #777777;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  position: sticky;
  left: 0;
  background: #ffffff;
  z-index: 1;
}

.swarm_cal__grid {
  display: grid;
  /* Seven rows, filling downwards then across, so one column is one week and
     the top row is every Monday. */
  grid-template-rows: repeat(7, 11px);
  grid-auto-flow: column;
  grid-auto-columns: 11px;
  gap: 2px;
}

.swarm_cal__pad {
  display: block;
}

.swarm_cal__day {
  display: block;
  border-radius: 2px;
  background: #eef2f3;
}

.swarm_cal__day:hover {
  outline: 1px solid #777777;
}

.swarm_cal__day--0 {
  background: #eef2f3;
}

.swarm_cal__day--1 {
  background: #b8dbe3;
}

.swarm_cal__day--2 {
  background: #7fbccb;
}

.swarm_cal__day--3 {
  background: #3f8ea3;
}

.swarm_cal__day--4 {
  background: #12505d;
}

/* ---------- the hour-by-weekday grid ---------- */
.swarm_heat {
  border-collapse: separate;
  border-spacing: 2px;
}
.swarm_heat th {
  padding-right: 6px;
  color: #777777;
  font-size: 13px;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
}

.swarm_heat__cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  padding: 0;
}

.swarm_heat__cell--0 {
  background: #eef2f3;
}

.swarm_heat__cell--1 {
  background: #b8dbe3;
}

.swarm_heat__cell--2 {
  background: #7fbccb;
}

.swarm_heat__cell--3 {
  background: #3f8ea3;
}

.swarm_heat__cell--4 {
  background: #12505d;
}

.swarm_heat__axis td {
  color: #999999;
  font-size: 11px;
  text-align: center;
  padding: 0;
}

/* At 390px a third of the row is not enough for "Wednesday" beside a bar worth
   looking at, so the label takes the full width and the bar sits under it. */
@media (max-width: 480px) {
  .swarm_bar {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2px 10px;
    padding: 5px 0;
  }
  .swarm_bar__label {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
            flex: 1 0 100%;
    max-width: none;
  }
  .swarm_bar__note {
    display: inline;
    margin-left: 6px;
  }
  .swarm_bar__track {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 60%;
            flex: 1 1 60%;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .swarm_bar__value {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
  }
}
/* ---------- Swarm statistics: places and content ---------- */
/* One colour per category group, used by the group bars, the mix-per-year
   stack and the category leaderboard alike - so "food" is the same teal
   wherever it appears and the stacked bar needs no legend to be followed from
   one year to the next. Ordered around the archive's own shape: food is by far
   the biggest, so it takes the anchor colour and the rest fan out from it. */
/* The fallback comes first so the nine named groups override it. Without it an
   unknown group drew as a transparent slice - vanishing from the chart, which
   is exactly what SwarmVenueStats::GROUP_NAMES says it does not do. */
[class*=swarm_group--] {
  background: #9aa7ac;
}

.swarm_group--food {
  background: #12505d;
}

.swarm_group--arts_entertainment {
  background: #b0562f;
}

.swarm_group--parks_outdoors {
  background: #4f7a3a;
}

.swarm_group--travel {
  background: #6a5b9b;
}

.swarm_group--nightlife {
  background: #9c3a63;
}

.swarm_group--shops {
  background: #b8892b;
}

.swarm_group--building {
  background: #6d7c82;
}

.swarm_group--event {
  background: #2f8f8a;
}

.swarm_group--education {
  background: #8a6b4f;
}

/* Shouts and photos are two different habits, so they get two colours rather
   than the account colours: on this chart the split is by kind, not by person. */
.swarm_bar__seg--shout {
  background: #12505d;
}

.swarm_bar__seg--photo {
  background: #b0562f;
}

/* Plain lists of things - one-off categories, events, the venues inside a
   parent. list-style rather than bullets of our own: these are lists. */
.swarm_list {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.5;
}

.swarm_list li {
  margin-bottom: 4px;
}

.swarm_family {
  margin-top: 14px;
}

.swarm_family__parent {
  font-weight: bold;
  font-size: 16px;
}

/* The word list. Size carries the count, so it reads as a ranking without a
   number beside every word; the numbers are in the title attribute. */
.swarm_cloud {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 6px 14px;
  margin-top: 12px;
}

.swarm_cloud__word {
  color: #12505d;
  line-height: 1.3;
}

.swarm_emoji {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
  font-size: 16px;
}

.swarm_emoji__item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  color: #777777;
}

.swarm_emoji__glyph {
  /* Emoji render small at body size next to their count. */
  font-size: 22px;
  line-height: 1;
}

.swarm_quote {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 3px solid #12505d;
  background: #f6f9f9;
  font-size: 16px;
  line-height: 1.5;
}

.swarm_quote footer {
  margin-top: 6px;
  color: #777777;
  font-size: 13px;
}

/* ---------- Swarm statistics: the two of you ---------- */
/* A shared day belongs to neither account, so it gets its own colour rather
   than one of the two personal ones - using either would suggest whose day it
   was. Teal, the page's own colour, for the same reason. */
.swarm_bar__seg--together,
.swarm_stack__seg--both {
  background: #12505d;
}

/* The two "alone" lists side by side on a desktop, stacked on a phone, so the
   comparison the section is making is the shape of the block itself. */
.swarm_apart {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
}

@media (min-width: 600px) {
  .swarm_apart {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}
.swarm_apart__who {
  margin-bottom: 4px;
}

.swarm_apart .swarm_list {
  margin-top: 0;
}

/* ---------- Swarm venue profile (the venue page header) ---------- */
/* Sits between the venue heading and its check-ins, so it is separated from
   both rather than floating: the rule above is the boundary, and the block
   keeps the small print at the page's own reading size. */
.swarm_profile {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e4eaeb;
  font-size: 16px;
}

/* Label above value rather than beside it. At 390px a "Rank" column wide enough
   to read leaves too little for the sentence next to it, and these values are
   sentences rather than figures. */
.swarm_profile__facts {
  margin: 0;
}
.swarm_profile__facts dt {
  color: #777777;
  font-size: 13px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.swarm_profile__facts dd {
  margin: 0 0 10px;
  line-height: 1.4;
}

/* One column per year of the venue's span, including the years with nothing -
   a place you stopped going to for three years should show the gap. */
.swarm_profile__years {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 3px;
  margin: 12px 0 4px;
}

.swarm_profile__year {
  /* Grows to fill the row when there are few years, but never shrinks below a
     four-digit label - past that the strip scrolls instead. */
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  min-width: 36px;
}

/* The height lives on the track, not on the cell that also holds the label -
   the same shape .swarm_column__stack uses further up. With it on the cell, the
   tallest bar was 100% of a box it had to share with a 17px label, and only
   flex-shrink kept it from spilling over the block above. */
.swarm_profile__track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  height: 44px;
  overflow: hidden;
}

.swarm_profile__bar {
  width: 100%;
  background: #12505d;
  border-radius: 2px 2px 0 0;
  /* A year with no visits still draws a hairline, so the column reads as an
     empty year rather than as a missing one. */
  min-height: 2px;
}

.swarm_profile__ylabel {
  margin-top: 3px;
  color: #999999;
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.swarm_profile__block {
  margin-top: 12px;
}

.swarm_profile__title {
  color: #777777;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/*# sourceMappingURL=main.css.map */