/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4; }

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

textarea {
  resize: vertical; }

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* ==========================================================================
   Media Queries
   ========================================================================== */
/* ==========================================================================
   Helper classes
   ========================================================================== */
.hidden {
  display: none !important;
  visibility: hidden; }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

.invisible {
  visibility: hidden; }

.clearfix:before, #search:before,
.clearfix:after,
#search:after {
  content: " ";
  display: table; }

.clearfix:after, #search:after {
  clear: both; }

.clearfix, #search {
  *zoom: 1; }

/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important; }

  a,
  a:visited {
    text-decoration: underline; }

  a[href]:after {
    content: " (" attr(href) ")"; }

  abbr[title]:after {
    content: " (" attr(title) ")"; }

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: ""; }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group; }

  tr,
  img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }

  h2,
  h3 {
    page-break-after: avoid; } }
:root {
  --main-color: #FF4799;
  --font-color: #270060 ; }

body {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--main-color); }

#search .results {
  max-height: 450px;
  overflow: auto; }

.matching {
  font-weight: bold; }

.content {
  width: 100%;
  max-width: 960px;
  margin: auto;
  color: #270060;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 30px;
  box-sizing: border-box; }

.is-loaded #main-view {
  display: block; }

header {
  position: relative;
  padding: 15px;
  background: #fafafa;
  border-radius: 30px;
  margin-bottom: 30px;
  transition: all 300ms ease-in-out;
  box-sizing: border-box;
  max-width: 350px;
  display: flex;
  justify-content: space-between; }
  .is-not-loaded header {
    transform: translate(-50%, 0%);
    left: 50%;
    top: 30vh; }
  .is-loaded header {
    transform: translate(0%, 0%);
    left: 0;
    top: 0;
    max-width: 100%; }

main {
  padding: 30px;
  background: #fafafa;
  border-radius: 30px;
  transition: 300ms ease-in-out 300ms;
  transition-property: visibility, opacity;
  display: grid;
  grid-template: "a b" "c c"/1fr 1fr; }
  .is-not-loaded main {
    visibility: collapse;
    opacity: 0; }
  .is-loaded main {
    visibility: visible;
    opacity: 1; }

h2 {
  border-bottom: 1px solid #2EE0FF; }

.small {
  font-size: 10%;
  left: -1px; }

#app {
  visibility: visible;
  opacity: 1;
  transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out; }

#app[v-cloak] {
  visibility: collapse;
  opacity: 0; }

.genre-chart {
  width: 100%;
  height: 250px; }

.movie-chart {
  width: 100%;
  height: 200px; }

@media screen and (max-width: 600px) {
  .movie-role, .movie-role-heading, .movie-votes, .movie-votes-heading {
    display: none; } }
.logo {
  height: 30px;
  width: 30px;
  background: var(--main-color);
  display: inline-block;
  border-radius: 100%;
  flex: 0 0 30px;
  margin: 0 15px 0 0; }

@media screen and (max-width: 500px) {
  .content, main {
    padding: 15px; } }
#search {
  float: right;
  position: relative;
  z-index: 1;
  top: 5px;
  display: flex;
  flex: 0 1 auto; }
  #search #search_field {
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--main-color);
    background: #fafafa;
    width: 100%;
    flex: 1 1 auto;
    max-width: 200px; }
  #search label {
    flex: 1 0 auto; }
  #search .results {
    margin-top: 5px;
    background: rgba(250, 250, 250, 0.9);
    clear: both;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%; }
    #search .results ul, #search .results li {
      margin: 0;
      padding: 0;
      display: block; }
    #search .results .result {
      padding: 5px 10px;
      cursor: pointer;
      white-space: nowrap; }
    #search .results .is-active .result {
      background: rgba(255, 71, 153, 0.2); }
      #search .results .is-active .result:after {
        content: '\23CE';
        float: right; }

#main-view {
  position: relative; }
  #main-view .info {
    grid-area: a; }
  #main-view .score_list {
    grid-area: b;
    text-align: right; }
    #main-view .score_list .average {
      font-size: 4em; }
    #main-view .score_list .first_billing_average, #main-view .score_list .top-5_billing_average, #main-view .score_list .average {
      font-weight: bold; }
  #main-view .data {
    grid-area: c; }
  #main-view.is-not-loaded .info,
  #main-view.is-not-loaded .score_list,
  #main-view.is-not-loaded .data {
    opacity: 0;
    visibility: collapse; }
  #main-view .info,
  #main-view .score_list,
  #main-view .data {
    transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out;
    transition-delay: 300ms;
    opacity: 1;
    visibility: visible;
    clear: both; }
  #main-view .name {
    font-weight: bold;
    margin: 0; }
  #main-view .genre-rating-list {
    clear: both;
    overflow: hidden; }
  #main-view .genre-rating-list table {
    width: 100%;
    max-width: 720px;
    margin: auto;
    text-align: left; }
  #main-view .genre-rating-list .genre-name,
  #main-view .genre-rating-list .genre-name-head
   {
    width: 14ex; }
  #main-view .genre-rating-list .genre-rating {
    padding: 0 2ex 0 0; }
    #main-view .genre-rating-list .genre-rating span {
      float: left;
      width: 4ex; }
  #main-view .genre-rating-list .genre-film_count {
    width: 7ex; }
  #main-view .genre-rating-list .genre-rating-bar {
    width: auto;
    overflow: hidden;
    height: 1.2em;
    position: relative;
    background: #e1e1e1; }
    #main-view .genre-rating-list .genre-rating-bar .genre-rating-bar-inside {
      height: 100%;
      background: #2EE0FF;
      width: 0;
      transition: width 300ms ease-in-out; }
  #main-view .movies table {
    text-align: left;
    width: 100%; }
    #main-view .movies table td {
      padding: .25ex 2ex .25ex 1ex; }
    #main-view .movies table th:hover, #main-view .movies table tbody > tr:hover {
      background: #aef3ff; }
    #main-view .movies table th {
      padding: .25ex 0 .25ex 1ex;
      cursor: pointer;
      white-space: nowrap; }
      #main-view .movies table th span {
        padding-right: 1.5em;
        position: relative;
        user-select: none; }
      #main-view .movies table th.is-active span:after {
        position: absolute;
        right: .25em;
        height: 1.25em;
        margin: auto;
        top: 0;
        bottom: 0;
        content: '\25B2'; }
      #main-view .movies table th.is-active.is-sorted_desc span:after {
        content: '\25BC'; }
    #main-view .movies table .movie-role {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100px; }

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