@charset "UTF-8";
.vote-ui {
  box-sizing: border-box;
  padding: 50px 1% 1vmin;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%; }
  .vote-ui .ballot, .vote-ui .candidates {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-negative: 1;
        flex-shrink: 1;
    overflow-y: auto;
    min-height: 30%; }
    .vote-ui .ballot .candidate, .vote-ui .candidates .candidate {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      max-height: 180px;
      overflow: hidden; }
      .vote-ui .ballot .candidate .image, .vote-ui .candidates .candidate .image {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; }
      .vote-ui .ballot .candidate img, .vote-ui .candidates .candidate img {
        width: 110px; }
  .vote-ui .ballot {
    counter-reset: rank-number; }
    .vote-ui .ballot .content {
      position: relative; }
    .vote-ui .ballot .counter:before {
      counter-increment: rank-number;
      content: "#" counter(rank-number);
      display: block;
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      font-size: 3rem;
      color: grey; }

body:not(.mobile) .vote-ui h1 {
  padding-top: 1vh;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0; }

body:not(.mobile) .vote-ui .ballot:empty:before {
  content: "請從下方依序將喜歡的桌遊拉上來"; }

body:not(.mobile) .vote-ui .candidates:empty:before {
  content: "可將卡片拖下來移出選票"; }

body:not(.mobile) .vote-ui .ballot, body:not(.mobile) .vote-ui .candidates {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  padding-top: 10px;
  border-bottom: 1px solid gray; }
  body:not(.mobile) .vote-ui .ballot:empty, body:not(.mobile) .vote-ui .candidates:empty {
    border: 0.5vmin dotted silver;
    border-radius: 3vmin;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  body:not(.mobile) .vote-ui .ballot:empty:before, body:not(.mobile) .vote-ui .candidates:empty:before {
    display: block;
    font-size: 10vh;
    line-height: 10vh;
    color: silver; }
  body:not(.mobile) .vote-ui .ballot .candidate, body:not(.mobile) .vote-ui .candidates .candidate {
    margin: 5px 10px 5px 0; }

body:not(.mobile) .vote-ui .mobile-action {
  display: none; }

body:not(.mobile) .vote-ui .ballot:empty {
  content: "把線下面的卡片拖曳上來排序"; }

body.mobile .desktop {
  display: none !important; }

body.mobile .vote-ui {
  padding: 4rem 1.5vw 0; }
  body.mobile .vote-ui .ballot {
    padding-bottom: 2vmin; }
    body.mobile .vote-ui .ballot .add-this {
      display: none; }
  body.mobile .vote-ui .candidates {
    display: none; }
  body.mobile .vote-ui .ballot, body.mobile .vote-ui .candidates {
    margin-top: 5px;
    padding-top: 0.5rem;
    overflow-y: scroll; }
    body.mobile .vote-ui .ballot .candidate, body.mobile .vote-ui .candidates .candidate {
      margin-left: 1vw;
      margin-right: 1vw;
      width: auto;
      position: relative; }
  body.mobile .vote-ui footer.mobile-action {
    padding: 10px 0;
    text-align: center; }
  body.mobile .vote-ui:not(.add-item-mode) #exit-mode {
    display: none; }
  body.mobile .vote-ui:not(.add-item-mode) .candidate {
    height: auto;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    position: relative;
    padding-bottom: 3rem; }
  body.mobile .vote-ui:not(.add-item-mode) .image {
    height: 150px; }
  body.mobile .vote-ui:not(.add-item-mode) .candidate:first-child .move-up {
    display: none; }
  body.mobile .vote-ui:not(.add-item-mode) .candidate:last-child .move-down {
    display: none; }
  body.mobile .vote-ui:not(.add-item-mode) .buttons.mobile-action {
    position: absolute;
    height: 2rem;
    line-height: 2rem;
    width: 100%;
    bottom: 0;
    left: 0; }
    body.mobile .vote-ui:not(.add-item-mode) .buttons.mobile-action .button {
      border-radius: 0; }
  body.mobile .vote-ui.add-item-mode .ballot {
    display: none; }
  body.mobile .vote-ui.add-item-mode .candidates {
    display: block; }
  body.mobile .vote-ui.add-item-mode #add-candidate {
    display: none; }
  body.mobile .vote-ui.add-item-mode .move-up, body.mobile .vote-ui.add-item-mode .move-down, body.mobile .vote-ui.add-item-mode .drop-this {
    display: none; }

.result-main {
  margin: 50px 10%;
  width: 80%; }

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