body {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    font-size: 15px;
    background-color: #f2f3f5;
    color: #34495e;
    margin: 0;
    padding-top: 55px;
    overflow-y: scroll
}

.content {
    max-width: 800px;
    margin: 0 auto;
    padding: 15px 5px
}

.item {
    margin: 0 30px;
}


a {
    color: #34495e;
    text-decoration: none;
}

.header {
    background-color: #f60;
    position: fixed;
    z-index: 999;
    height: 55px;
    top: 0;
    left: 0;
    right: 0
}

.header .inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 15px 5px;
}

.header a {
    color: #ffffffcc;
    vertical-align: middle;
    font-weight: 300;
    margin-right: 1.8em
}

.header a:hover {
    color: #fff
}

.header a.link-active {
    color: #fff;
    font-weight: 400
}

.logo {
    color: white;
    font-weight: 600;
    display: inline-block;
    margin: 0 20;
    vertical-align: middle;
}

h3 {
    margin-bottom: 3px;
}

h3 a:hover {
    color: #ff6600;
}

.poll {
    margin: 5 5 5 10px;
}

.poll-option {
    margin: 3px auto;
    
}

.poll-option:before{
    content: " • ";
}

.comment {
    padding: 0 10px;
    margin: 10 5 5 5px;
    border: 1px solid #ccc;
}

.commentText {
    padding: 0 10px;
}
  
.page-control {
    background-color: #eaeaea;
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    margin: 0 5px;
}

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

/* loader */
#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 5px solid #f3f3f3;
    -webkit-animation: spin .5s linear infinite;
    animation: spin .5s linear infinite;
    border-top: 5px solid #555;
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  /* loader */


  /* Snackbar */

  #snackbar {
    bottom: 15px;
    right: 50px;
    visibility: hidden;
    min-width: 250px;
    background-color: #34495e;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    font-size: 17px;
  }
  
  #snackbar a {
    color: white;
    font-weight: 600;
    text-decoration: underline;
  }

  #snackbar.show {
    visibility: visible;
    animation-name: fadein;
    animation-duration: 0.5s;
  }
  
  @-webkit-keyframes fadein {
    0% {bottom: 0; opacity: 0;} 
    20% {bottom: 30px; opacity: 1;}
    90% {bottom: 30px; opacity: 1;}
    100% {bottom: 0; opacity: 0;} 
  }
  
  @keyframes fadein {
    /* 0% {bottom: 0; opacity: 0;} 
    25% {bottom: 10px; opacity: 0.50;}
    50% {bottom: 20px; opacity: 0.70;}
    100% {bottom: 30px; opacity: 1;} */
    from {bottom: 0; opacity: 0; }
    to   {bottom: 30px; opacity: 1; }
  }

  /* Snackbar */