/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.ks-left-border {
  border-left: 1px solid #52575c;
}

.ks-right-border {
  border-right: 1px solid #52575c;
}

.comments .main form {
  margin-top: 25px;
}

.comment .content .text {
  padding: 3px 8px;
  background-color: #efefef;
  border-radius: 10px;
}

.load-sub-comments {
  margin-left: 28px;
}

.ks-left-border {
  border-left: 1px solid rgba(34, 36, 38, 0.15);
}

.ks-right-border {
  border-right: 1px solid rgba(34, 36, 38, 0.15);
}

.ui.menu .item a img.logo {
  width: 2.5em;
  display: inline-block;
  vertical-align: middle;
}
.main.container {
  margin-top: 7em;
}
.wireframe {
  margin-top: 2em;
}
.ui.footer.segment {
  margin: 5em 0em 0em;
  padding: 5em 0em;
}
.seen {
  -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
       -o-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
          filter: grayscale(100%);
}
.blurred {
  filter: blur(30px);
}
.seen-and-blurred {
  -webkit-filter: grayscale(100%) blur(30px);
     -moz-filter: grayscale(100%) blur(30px);
       -o-filter: grayscale(100%) blur(30px);
      -ms-filter: grayscale(100%) blur(30px);
          filter: grayscale(100%) blur(30px);
}
.item, .card, .hidden-content {
  .visible-if-over {
    visibility: hidden;
  }

  &:hover {
    .visible-if-over {
      visibility: visible;
    }
  }

  .ribon {
    z-index: 1000;
  }
}

div [class*="left floated"] {
  float: left;
  margin-left: 0.25em;
}

div [class*="right floated"] {
  float: right;
   margin-right: 0.25em;
}

.banner {
  font: 40px Impact;
  line-height: 140px;
  text-align: center;
  background-color: #efefef;
}

.pointer:hover {
  cursor: pointer;
}

.ui.progress .bar {
  min-width: 0;
}

.ui.progress.attached, .ui.progress.attached .bar {
  height: 0.3em;
}

.vote-item {
  .icon {
    margin: 0;
  }

  a {
    cursor: pointer;
    margin-right: 5px !important;
  }

  .icon, a {
    font-size: 12px;
    color: #a333c8 !important;
  }
}

/* Long press ripple effect */
.long-press-ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(59, 130, 246, 0.3);
  width: 20px;
  height: 20px;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple-grow forwards;
}

@keyframes ripple-grow {
  to {
    transform: translate(-50%, -50%) scale(30);
    opacity: 0.8;
  }
}