#content {
  display: flex; }

.flex-row {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center; }

.flex-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0; }

#votings {
  position: relative !important;
  padding: 12px 17px; }
  #votings .description .expired-vote {
    color: red;
    font-weight: bold; }

.header {
  margin-left: 265px;
  padding: 0 17px;
  align-items: initial; }
  .header .vote.option .date-box {
    flex-grow: 1; }
  .header .vote.option .counter {
    flex-grow: 0;
    height: 32px; }

.user {
  border-top: 1px solid #ddd;
  height: 44px;
  padding: 0 17px; }

.first {
  flex-grow: 0;
  flex-shrink: 0;
  width: 265px; }

.vote, .poll-cell {
  flex-grow: 1;
  width: 85px;
  margin: 2px;
  align-items: center; }

.date-box {
  padding: 0 2px;
  align-items: center; }
  .date-box .month, .date-box .dayow {
    font-size: 1.2em;
    color: #666; }
  .date-box .day {
    font-size: 1.8em;
    margin: 5px 0 5px 0; }

.winner {
  font-style: italic;
  font-weight: bold;
  color: #49bc49; }

.counter {
  font-size: 18px; }
  .counter .yes, .counter .no {
    margin: 0 2px; }
    .counter .yes .svg, .counter .no .svg {
      background-position: center;
      background-repeat: no-repeat;
      background-size: 24px;
      height: 24px;
      width: 24px; }
  .counter .yes {
    color: #49bc49; }
    .counter .yes .svg {
      background-image: url("../img/yes-vote.svg"); }
  .counter .no {
    color: #f45573; }
    .counter .no .svg {
      background-image: url("../img/no-vote.svg"); }

.name {
  margin-left: 5px; }

.poll-cell {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 32px;
  height: 44px; }
  .poll-cell.active {
    cursor: pointer;
    border: 2px solid;
    border-radius: 4px;
    box-sizing: border-box; }
  .poll-cell.yes {
    background-color: #ebf5d6;
    color: #49bc49;
    background-image: url("../img/yes-vote.svg"); }
  .poll-cell.no {
    background-color: #ffede9;
    color: #f45573;
    background-image: url("../img/no-vote.svg"); }
  .poll-cell.maybe {
    background-color: #fcf7e1;
    color: #f0db98;
    background-image: url("../img/maybe-vote.svg"); }
  .poll-cell.unvoted {
    background-color: #fff4c8;
    color: #f0db98;
    background-color: #fff4c8; }

.toggle-cell {
  height: 28px;
  height: 32px;
  width: 32px;
  flex-grow: 0;
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 28px; }
  .toggle-cell.yes {
    background-color: #ebf5d6;
    background-image: url("../img/yes-toggle.svg"); }
  .toggle-cell.no {
    background-color: #ffede9;
    background-image: url("../img/no-toggle.svg"); }
  .toggle-cell.maybe {
    background-color: #fcf7e1;
    background-image: url("../img/maybe-toggle.svg"); }

.current-user {
  background-color: #e6f1f8; }

#switchDetails {
  margin-right: 32px; }

.button.details .badge {
  position: relative;
  top: -34px;
  right: -24px;
  background-image: url("../../../apps/polls/css/../img/yes-comment.svg");
  background-repeat: no-repeat;
  background-size: 33px;
  padding: 10px;
  margin: -10px;
  background-position-y: 9px;
  background-position-x: center;
  text-shadow: 1px 1px #666;
  color: #fff;
  min-width: 34px;
  text-align: center; }
  .button.details .badge.no-comments {
    background-image: url("../../../apps/polls/css/../img/no-comment.svg"); }

.external {
  min-width: 150px; }
  .external .th {
    padding-left: 40px; }
    .external .th input {
      min-width: 100px; }

.finish_vote {
  padding: 10px 17px; }

#poll-desc, #comments-container, #poll-dates {
  margin-bottom: 15px; }

.authorRow {
  position: relative; }
  .authorRow .author {
    margin-left: 8px;
    opacity: .5;
    flex-grow: 1; }
    .authorRow .author.external {
      margin-right: 33px;
      opacity: 1; }
      .authorRow .author.external > input {
        width: 100%; }

.detailsView {
  z-index: 1000 !important; }
  .detailsView .close.flex-row {
    justify-content: flex-end;
    margin: 8px 8px 0 0; }
  .detailsView .header.flex-row {
    flex-direction: row;
    align-items: flex-start;
    margin-left: 0;
    margin-top: 0; }
  .detailsView .pollInformation {
    width: 220px;
    flex-grow: 1;
    flex-shrink: 1;
    padding-right: 15px; }
    .detailsView .pollInformation .authorRow .leftLabel {
      margin-right: 4px; }
    .detailsView .pollInformation .cloud {
      margin: 4px 0; }
      .detailsView .pollInformation .cloud > span {
        color: #fff;
        margin: 2px;
        padding: 2px 4px;
        border-radius: 3px;
        float: left;
        text-shadow: 1px 1px #666;
        background-color: #aaa; }
      .detailsView .pollInformation .cloud .open {
        background-color: #49bc49; }
      .detailsView .pollInformation .cloud .expired {
        background-color: #f45573; }
      .detailsView .pollInformation .cloud .information {
        background-color: #b19c3e; }
  .detailsView #expired_info {
    margin: 0 15px; }
  .detailsView .pollActions {
    display: flex;
    flex-direction: column;
    margin-right: 15px; }
    .detailsView .pollActions .close {
      margin: 15px;
      background-position: right top;
      height: 30px; }
    .detailsView .pollActions > ul > li:focus, .detailsView .pollActions > ul > li:focus > a, .detailsView .pollActions > ul > li:hover, .detailsView .pollActions > ul > li:hover > a, .detailsView .pollActions > ul > li.active, .detailsView .pollActions > ul > li.active > a, .detailsView .pollActions > ul > li a.selected, .detailsView .pollActions > ul > li a.selected > a {
      opacity: 1;
      box-shadow: inset 2px 0 #0082c9; }
    .detailsView .pollActions > ul > li > a[class*="icon-"],
    .detailsView .pollActions > ul > li > ul > li > a[class*="icon-"],
    .detailsView .pollActions > ul > li > a[style*="background-image"],
    .detailsView .pollActions > ul > li > ul > li > a[style*="background-image"] {
      padding-left: 44px; }
    .detailsView .pollActions > ul > li > a,
    .detailsView .pollActions > ul > li > ul > li > a {
      background-size: 16px 16px;
      background-position: 14px center;
      background-repeat: no-repeat;
      display: block;
      justify-content: space-between;
      line-height: 44px;
      min-height: 44px;
      padding: 0 12px;
      overflow: hidden;
      box-sizing: border-box;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #000;
      opacity: 0.57;
      flex: 1 1 0;
      z-index: 100; }
    .detailsView .pollActions > ul > li a,
    .detailsView .pollActions > ul > li .app-navigation-entry-deleted {
      padding-left: 44px !important; }
  .detailsView #commentsTabView .newCommentForm div.message:empty:before {
    content: attr(data-placeholder);
    color: grey; }
  .detailsView #commentsTabView #commentBox {
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    padding: 7px 6px;
    margin: 3px 3px 3px 40px;
    cursor: text; }
  .detailsView #commentsTabView .comment {
    margin-bottom: 30px; }
    .detailsView #commentsTabView .comment .comment-header {
      background-color: #EEE;
      border-bottom: 1px solid #DDD;
      border-radius: 3px 3px 0 0; }
    .detailsView #commentsTabView .comment .comment-date {
      float: right;
      color: #555; }
    .detailsView #commentsTabView .comment .date {
      position: absolute;
      right: 0;
      top: 5px;
      opacity: .5; }
  .detailsView #commentsTabView .message {
    margin-left: 40px;
    flex-grow: 1;
    flex-shrink: 1; }
  .detailsView #commentsTabView .new-comment .submitComment {
    align-self: last baseline;
    width: 30px;
    margin: 0;
    padding: 7px 9px;
    background-color: transparent;
    border: none;
    opacity: .3; }
  .detailsView #commentsTabView .new-comment .icon-loading-small {
    float: left;
    margin-top: 10px;
    display: none; }

@media all and (max-width: 768px) {
  #app-content {
    position: relative !important; } }
@media all and (max-width: 480px) {
  #votings {
    padding: 0px 2px; }

  .flex-row {
    flex-direction: column; }
    .flex-row.user-cell, .flex-row.counter, .flex-row.counter .yes, .flex-row.counter .no, .flex-row.controls, .flex-row.breadcrump, .flex-row.submitPoll, .flex-row.newCommentForm, .flex-row.close {
      flex-direction: row; }
    .flex-row.header {
      flex-grow: 1;
      margin-left: 0;
      margin-top: 44px;
      width: 120px;
      padding: 0 0 0 4px; }
      .flex-row.header .vote {
        padding-right: 10px; }
        .flex-row.header .vote.option {
          align-items: baseline;
          width: 100%;
          border-top: 1px solid #ddd; }
        .flex-row.header .vote.time {
          align-items: center;
          width: 100%;
          border-top: 1px solid #ddd; }
          .flex-row.header .vote.time .counter {
            flex-direction: column;
            align-items: flex-end; }
    .flex-row.user {
      display: none; }
    .flex-row.current-user {
      display: flex;
      width: 44px;
      padding: 0;
      border: none;
      background-color: transparent; }
      .flex-row.current-user .poll-cell {
        border: none;
        border-radius: 0;
        border-top: 1px solid #ddd;
        background-color: transparent;
        padding: 0 2px; }
        .flex-row.current-user .poll-cell.active.yes {
          background-image: url("../img/yes-vote-bordered.svg"); }
        .flex-row.current-user .poll-cell.active.no {
          background-image: url("../img/no-vote-bordered.svg"); }
        .flex-row.current-user .poll-cell.active.maybe {
          background-image: url("../img/maybe-vote-bordered.svg"); }
        .flex-row.current-user .poll-cell.active.unvoted {
          background-image: url("../img/unvoted-vote-bordered.svg"); }
      .flex-row.current-user .user-cell {
        position: absolute;
        left: 22px; }
      .flex-row.current-user .poll-cell, .flex-row.current-user .toggle-cell {
        width: 44px;
        height: 44px;
        background-color: transparent; }

  .description {
    margin: 4px; }

  .flex-column.table-body {
    flex-grow: 0; }
  .flex-column.poll-cell, .flex-column.table {
    flex-direction: row;
    align-items: center; }
  .flex-column.vote.time {
    flex-direction: row; }

  .table {
    display: flex;
    margin-right: 8px;
    padding-bottom: 75px; }

  .submitPoll {
    border-top: 1px solid #ddd;
    box-shadow: 0 0 9px 2px #999999;
    flex-wrap: wrap;
    align-items: center;
    position: fixed;
    background-color: #fff;
    bottom: 0;
    left: 0;
    width: 100%; }
    .submitPoll .finish_vote {
      padding: 8px 8px; }
    .submitPoll .notification {
      display: flex;
      padding: 8px 8px;
      line-height: 2em; }

  .first {
    height: 44px;
    width: unset; }

  #options.flex-row {
    flex-direction: column;
    width: 100%; } }
@media all and (max-width: 320px) {
  .table {
    padding-bottom: 105px; } }