// Table of Contents
//
// 01. Global styles
// 02. Header
// 03. Footer
// 04. Tags
// 05. Auth pages
// 06. Forms
// 07. Callout
// 08. User account
// 09. Search
// 10. Official levels
// 11. Tables
// 12. Social
// 13. Pages
// 14. Verification
// 15. Comments
// 16. Flags
// 17. Activity
// 18. Banners
//

// 01. Global styles
// -----------------

::selection {
  color: white;
  background-color: $brand;
}

body {
  font-size: $base-font-size;
}

h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-weight: 700;
}

p {
  font-size: $base-font-size;
  font-weight: 400;
  line-height: $base-line;
}

a {
  color: $link;

  &:hover, &:active {
    color: $link-hover;
    text-decoration: underline;

    h1, h2, h3, h4, h5, h6 {
      color: $link-hover;
    }
  }

  &:focus {
    color: $link-hover;
    outline: 3px solid #ffbf47;
  }
}

.button {
  background: $brand;
  font-size: $base-font-size;

  &:hover {
    text-decoration: none !important;
  }
}

.postfix.button {
  padding: 0;
}

.clear {
  clear: both;
}

.inline {
  display: inline !important;
}

.inline-block {
  display: inline-block;
}

.sidebar-divider {
  border-top: 1px solid $border;
  margin-top: $line-height;

  &:first-child {
    margin-top: 0;
  }
}

.f-dropdown {
  li a {
    font-size: $small-font-size;

    &:hover {
      color: $link-hover;
    }
  }

  li:hover, .f-dropdown li:focus {
    background: white;
  }

  &.open {
    outline: none;
  }
}

.margin {
  margin-bottom: $line-height;
  margin-top: $line-height;
}

.margin-top {
  margin-top: $line-height;
}

.margin-bottom {
  margin-bottom: $line-height;
}

.margin-right {
  margin-right: $line-height;
}

.no-margin-top {
  margin-top: rem-calc(-24);
}

.padding {
  padding-bottom: $line-height;
  padding-top: $line-height;
}

.highlight {
  background: $highlight;
}

.icon-check {
  color: $check;
}

.wrapper {
  min-height: 100%;
  margin: 0 auto (-$line-height)*12;
  height: auto !important;
  height: 100%;
}

.footer, .push {
  clear: both;
  min-height: $line-height*12;
}

.ie-callout {
  position: absolute;
  top: 0;
  width: 100%;

  a.close {
    font-size: rem-calc(34);
    top: 20%;
  }
}

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

.menu.simple {
  border-bottom: 1px solid $border;
  margin: $line-height 0;

  li {
    padding-bottom: rem-calc(7);

    a {
      color: $text-medium;
    }

    &.active {
      border-bottom: 2px solid $brand;
      color: $brand;
    }
  }
}

.small {
  font-size: $small-font-size;
}

.relative {
  position: relative;
}

.logo {
  @include logo;
}

.close-button {
  top: $line-height/2;
}

.back, .icon-angle-left {
  clear: both;
  color: $text-medium;
  float: left;
}

.tabs-content {
  border: 0;
}

.tabs {
  border: {
    left: 0;
    right: 0;
    top: 0;
  };
  margin-bottom: $line-height;

  .tabs-title > a {
    color: $text-medium;
    margin-bottom: rem-calc(-1);
    margin-right: $line-height;

    &[aria-selected='true'],
    &.is-active {
      color: $brand;
      border-bottom: 2px solid $brand;
      font-weight: bold;
    }
  }

  h2, h3 {
    font-size: $base-font-size;
  }
}

.no-max-width {
  max-width: none;
}

.button.float-right ~ .button.float-right {
  margin: 0 $line-height/2;
}

.pagination .current {
  background: $brand;
}

// 02. Header
// ----------

header {
  background: $brand;
  border-bottom: 1px solid $border;
  margin-bottom: $line-height;

  .selected {
    border-bottom: 1px solid white;
  }

  .locale {
    float: left;
    height: $line-height*1.5;
    margin-left: $line-height/2;
  }

  .external-links {
    float: none;
    padding: rem-calc(6) 0;
    text-align: center;

    @include breakpoint(medium) {
      float: right;
    }
  }
}

.top-bar {
  background: $brand !important;
  color: white;
  height: $line-height*2;
  line-height: $line-height*2;
  padding-bottom: 0;
  padding-top: 0;

  @include breakpoint(medium) {
    padding: 0;
  }

  .top-bar-title a {
    @include logo;
    line-height: rem-calc(80) !important;

    &:hover {
      text-decoration: none;
    }
  }

  ul {
    background: none;
    padding-right: rem-calc(15);

    &.menu > li {
      display: block;

      @include breakpoint(medium) {
        display: table-cell;
        height: $line-height*3.5;
      }

      a {
        color: white;
        padding-left: 0;

        @include breakpoint(medium) {
          font-size: $small-font-size;
          padding: rem-calc(11) rem-calc(16);
        }

        &.button {
          text-align: left;

          @include breakpoint(medium) {
            background: white;
            color: $brand;
            text-align: center;
          }
        }
      }
    }
  }

  .menu-icon.dark {
    height: 20px;

    &::after, &:hover::after {
      background: white;
      box-shadow: 0 7px 0 white, 0 14px 0 white;
    }
  }
}

.top-links {
  background: $dark;
  color: white;
  font-size: $small-font-size;
  padding-right: $line-height/2;

  a {
    color: white;
    margin: 0 rem-calc(6);

    &:hover {
      text-decoration: underline;
    }
  }

  ul {
    margin-bottom: 0;

    li {
      display: block;
    }

    @include breakpoint(medium) {
      li {
        display: inline-block;

        &:after {
          content: "|";
        }

        &:last-child:after {
          content: none;
        }
      }
    }
  }
}

.subnavigation {

  @include breakpoint(medium) {
    background: white;
    padding-bottom: 0;
  }

  ul {
    list-style-type: none;
    margin: 0;

    li {
      @include breakpoint(medium) {
        display: inline-block;
        margin-right: rem-calc(36);
      }

      a {
        color: white;
        display: inline-block;
        line-height: $line-height*2;
        position: relative;
        text-align: left;
        width: 100%;

        @include breakpoint(medium) {
          color: $text;
          display: block;
          font-weight: bold;
          width: auto;

          &:hover {
            color: $link;
          }
        }

        &.active {
          color: white;

          @include breakpoint(medium) {
            border-bottom: 2px solid $brand;
            color: $brand;
          }
        }
      }
    }
  }

  .input-group {
    padding-top: $line-height/4;

    @include breakpoint(medium) {
      margin-bottom: 0;
    }
  }

  .input-group-field {
    margin-bottom: 0 !important;
  }

  .input-group-button {
    line-height: $line-height*1.5;

    button {
      background: $border;
      border: 1px solid #ccc;
      border-left: 0;
      color: $text;
      height: $line-height*1.5;
      line-height: $line-height*1.5;
      padding-top: 0;
    }
  }

  input {
    height: $line-height*1.5 !important;
    margin-bottom: 0;
    margin-right: 0;
    width: 100%;
  }
}

.submenu {
  background: white;
  border-bottom: 1px solid $border;
  clear: both;
  margin-bottom: $line-height/2;

  a {
    color: $text;
    display: inline-block;
    font-weight: bold;
    margin-right: $line-height/2;
    position: relative;
    text-align: left;

    @include breakpoint(medium) {
      margin-right: $line-height*1.5;
    }

    &:hover {
      color: $link;
    }

    &.active {
      border-bottom: 2px solid $brand;
      color: $brand;

      &:hover {
        text-decoration: none;
      }
    }
  }

  h2 {
    font-size: $base-font-size;
  }
}

.search-form-header input[type=text] {
  max-width: none;
}

// 03. Footer
// ----------

footer {
  color: $text;

  .logo a {
    font-family: 'Lato' !important;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  p {
    font-size: $small-font-size;

    &.info a {
      text-decoration: underline;
    }
  }

  a, a:active, a:focus {
    color: $text;
    text-decoration: underline;

    &:hover {
      color: $text-medium;
    }
  }

  .footer-sections {
    padding-left: 0;
  }

  h2 a {
    border-bottom: 1px solid $text-light;
    display: block;
    font-size: rem-calc(24);
    line-height: rem-calc(31);
    padding-bottom: $line-height/4;
    text-decoration: none;
  }
}

.footer {
  background: $border;
  border-top: 6px solid $brand;
  margin-top: $line-height*2;
  padding-top: $line-height;
}

.subfooter {
  border-top: 1px solid $text-light;
  font-size: $small-font-size;
  padding-top: $line-height/2;
}

// 04. Tags
// --------

.tags a , .tag-cloud a, .categories a, .geozone a, .sidebar-links a {
  background: #ececec;
  border-radius: rem-calc(6);
  color: $text;
  display: inline-block;
  font-size: $small-font-size;
  margin-bottom: $line-height/3;
  padding: $line-height/4 $line-height/3;
  text-decoration: none;

  &:hover {
    background: #e0e0e0;
  }
}

.categories a, .geozone a {
  background: $highlight;
  color: $link;

  &:hover {
    background: $brand;
    color: white;
  }
}

h2.sidebar-title {
  border-top: 2px solid $brand;
  display: inline-block;
  font-size: rem-calc(16);
  margin: -1px 0 rem-calc(12);
  padding-top: $line-height/4;
  text-transform: uppercase;
}

// 05. Auth pages
// --------------

.auth-page {

  .wrapper {
    margin: 0 auto (-$line-height)*14;
  }
}

.auth-image {
  background: $brand image-url("auth_bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;

  @include breakpoint(medium) {
    min-height: $line-height*42;
  }

  h1 {
    margin-top: $line-height;

    img {
      height: rem-calc(80);
      width: rem-calc(80);
    }

    a {
      color: white;
      display: block;
      line-height: rem-calc(80); // Same as logo image height
      text-align: center;

      @include breakpoint(medium) {
        display: inline-block;
        text-align: left;
      }
    }
  }
}

.auth-form {

  @include breakpoint(medium) {
    padding-top: $line-height*4;
  }

  p, a, .checkbox {
    font-size: $small-font-size;
  }
}

.auth-divider {
  border-bottom: 1px solid $border;
  height: rem-calc(14);
  margin: $line-height 0;
  text-align: center;

  span {
    background: white;
    font-weight: bold;
    padding: 0 $line-height/2;
  }
}

// 06. Forms
// ---------

form.locale-form {
  display: inline-block;
  position: relative;

  label {
    color: white;
    font-size: $small-font-size;
    font-weight: normal;
  }

  select {
    background-image: image-url("language_select.png");
    background-origin: border-box;
    background-position: right;
    background-size: 24px 24px;

    option {
      background: white;
      color: $text;
      border: 0;
      outline: none;
    }

    &.locale-switcher {
      background-color: transparent;
      border: 0;
      color: white;
      font-size: $small-font-size;
      margin-bottom: 0;
      outline: none;
      padding-left: rem-calc(3);
      padding-right: $line-height;
      width: auto;

      &:focus {
        outline: 3px solid #ffbf47;
      }
    }
  }
}

form {

  label {
    font-size: $base-font-size;
    font-weight: bold;
    line-height: $line-height;
  }

  fieldset legend {
    font-weight: bold;
  }

  input[type="radio"] {
    height: $line-height !important;
    vertical-align: top;

    + label {
      font-weight: normal;
    }

    &:checked + label {
      font-weight: bold;
    }
  }

  input[type]:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]) {
    background: #F8F8F8;
    height: $line-height*2;
    margin-bottom: rem-calc(16);

    &.error {
      margin-bottom: rem-calc(1);
    }
  }

  input[type="checkbox"] + label,
  input[type="radio"] + label {
    margin-right: 0;
  }

  input[type=file] {
    margin: $line-height/2 0 $line-height/2 $line-height/4;
  }

  .note, .note-marked {
    display: block;
    font-size: rem-calc(13);
    margin-bottom: $line-height/2;
  }

  .note-marked {
    background: yellow;
    display: inline-block;

    em {
      background: white;
      display: block;
    }
  }

  .ckeditor {
    min-height: $line-height*13;
  }

  .checkbox, .radio {
    display: inline-block;
    font-weight: normal;
    line-height: $line-height;
    vertical-align: middle;
  }
}

// 07. Callout
// -----------

.callout-slide {
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  animation-name: slide;
  -webkit-animation-name: slide;
}

@-webkit-keyframes slide {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slide {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.notice-container {
  min-width: $line-height*12;
  position: absolute;
  right: 24px;
  top: 24px;

  .notice {
    height: $line-height*4;

    .notice-text {
      width: 95%;
    }
  }
}

.callout {
  font-size: $small-font-size;

  a {
    font-weight: bold;
    text-decoration: underline;
  }

  &.success, &.notice {
    background-color: $success-bg;
    border-color: $success-border;
    color: $color-success;
  }

  &.primary {
    background-color: $info-bg;
    border-color: $info-border;
    color: $color-info;
  }

  &.warning {
    background-color: $warning-bg;
    border-color: $warning-border;
    color: $color-warning;
  }

  &.alert, &.error {
    background-color: $alert-bg;
    border-color: $alert-border;
    color: $color-alert;
  }

  .close {
    text-decoration: none !important;
  }
}

span.error, small.error {
  background: $alert-bg;
  color: $color-alert;
}

span.no-error, small.no-error {
  background: $success-bg;
  color: $color-success;
}

.error small.error {
  background: $alert-bg;
  color: $color-alert;
  display: inline-block;
  margin: 0 $line-height/4;
}

label.error, label.error a {
  color: $color-alert;
}

// 08. User account
// ----------------

.account {

  select {
    height: $line-height*2;
    margin-right: $line-height/2;
  }

  .verify-account {
    padding-right: $line-height/2;
  }

  .final-votes-info {
    background: $warning-bg;
    border: 1px solid $warning-border;
    color: $color-warning;
    margin-top: $line-height;
    padding: $line-height/2;

    ul li {
      margin: $line-height/2 0;
    }

    .icon-box {
      color: #D4A26D;
      font-size: rem-calc(120);
      line-height: rem-calc(120);
      vertical-align: top;
    }
  }
}

img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
  border-radius: rem-calc(1000);
  position: relative;
}

.author-deleted, .user-deleted {
  color: rgba(0,0,0,.4);
  display: inline-block;
  font-size: rem-calc(32);
  line-height: rem-calc(32);
  height: rem-calc(32);
  vertical-align: top;
}

.user-permissions {

  p {
    span {
      color: $text-medium;
      font-size: rem-calc(12);
    }
  }

  ul {
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;

    li {
      font-size: $small-font-size;
      margin-bottom: $line-height/2;

      span {
        color: $text-medium;
        font-size: rem-calc(12);
      }

      .icon-check {
        color: $check;
      }

      .icon-x {
        color: $delete;
      }
    }
  }
}

.notifications {
  position: relative;

  &:hover {
    text-decoration: none;
  }

  [class^="icon-"] {
    font-size: rem-calc(19);
    vertical-align: middle;
  }

  .icon-circle {
    color: #ecf00b;
    font-size: rem-calc(10);
    position: absolute;
    right: 8px;
    top: 6px;
  }
}

.notifications-list:before {
  background: $border;
  content: '';
  height: 100%;
  left: 22px;
  position: absolute;
  top: 60px;
  width: 2px;
}

.notification {
  display: block;
  padding: $line-height/2 0 $line-height/2 $line-height*1.5;
  position: relative;

  &:hover {

    a {
      text-decoration: none;
    }

    p:not(.time) {
      color: $link;
    }

    &:before {
      content: "\43";
    }
  }

  &:before {
    background: white;
    color: $brand;
    content: "\4d";
    font-family: "icons" !important;
    left: 0;
    position: absolute;
  }

  p {
    color: $text;
    margin-bottom: 0;
  }

  .time {
    font-size: $small-font-size;
    color: $text-medium;
  }
}

// 09. Search
// ----------

.search-results h2 {
  margin-bottom: 0;
}

.advanced-search {
  float: left;
  margin: $line-height 0;
  position: inherit;

  @include breakpoint(medium) {
    float: right;
    margin-bottom: 0;
    margin-top: rem-calc(28);
    position: absolute;
    right: 0;
    z-index: 2;
  }
}

.advanced-search-form {
  margin-top: $line-height;

  select {
    height: $line-height*2;
  }

  @include breakpoint(medium) {
    & > .column {
      padding: 0;
    }
  }
}

// 10. Officials levels
// --------------------

[class^="level-"] {
  color: white;
}

.is-author {
  background: #008CCF;
}

.is-association {
  background: #C0392B;
}

.level-1 {
  background: #1ABC9C;
}

.level-2, .level-3, .level-4 {
  background: #43AC6A;
}

.level-5 {
  background: #F08A24;
}

// 11. Tables
// ----------

table {
  border: $border;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;

  th {
    background: #f8f9fb;
  }

  tr {

    td {
      line-height: $line-height;
      padding: $line-height/2 $line-height/4;
    }

    &:nth-child(odd) {
      background: white;
    }

    &:nth-child(even) {
      background: #fafcfb;
    }
  }

  .button {
    margin: 0;
  }
}

// 12. Social
// ----------

.button.button-twitter,
.button.button-facebook,
.button.button-google {
  height: $line-height*2;
  line-height: $line-height*2;
  padding: 0;
  position: relative;
}

.button.button-twitter {
  background: #45B0E3;

  &:before {
    content: "f";
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 0;
    line-height: $line-height*2;
    padding: 0 rem-calc(20);
    position: absolute;
    top: 0;
  }
}

.ssb-twitter {
  background: #45B0E3;
  background-image: none !important;
  color: white;
  height: $line-height*2 !important;
  position: relative;
  width: $line-height*2 !important;

  &:before {
    content: "f";
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 50%;
    line-height: $line-height*2;
    margin-left: rem-calc(-11);
    position: absolute;
    top: 0;
  }

  &:hover, &:focus {
    background: white;
    color: #40A2D1;
  }
}

.button.button-facebook {
  background: #3B5998;

  &:before {
    content: "A";
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 0;
    line-height: $line-height*2;
    padding: 0 rem-calc(20);
    position: absolute;
    top: 0;
  }
}

.ssb-facebook {
  background: #3B5998;
  background-image: none !important;
  color: white;
  height: rem-calc(48) !important;
  position: relative;
  width: rem-calc(48) !important;

  &:before {
    content: "A";
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 50%;
    line-height: $line-height*2;
    margin-left: rem-calc(-11);
    position: absolute;
    top: 0;
  }

  &:hover, &:focus {
    background: white;
    color: #354F88;
  }
}

.button.button-google {
  background: #DE4C34;

  &:before {
    content: "B";
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 0;
    line-height: $line-height*2;
    padding: 0 rem-calc(20);
    position: absolute;
    top: 0;
  }
}

.ssb-google_plus {
  background: #DE4C34;
  background-image: none !important;
  color: white;
  height: $line-height*2 !important;
  position: relative;
  width: $line-height*2 !important;

  &:before {
    content: "B";
    font-family: "icons" !important;
    font-size: rem-calc(24);
    left: 50%;
    line-height: $line-height*2;
    margin-left: rem-calc(-11);
    position: absolute;
    top: 0;
  }

  &:hover, &:focus {
    background: white;
    color: #CE3E26;
  }
}

.social {

  a {
    font-size: rem-calc(24);
    margin: 0 $line-height/2;
    text-decoration: none;

    &:hover {
      color: $brand;
    }
  }
}

.share-supported {
  text-align: center;

  .social-share-button {
    display: inline-block;
  }

  .ssb-twitter {
    background: #45B0E3;
    color: white;
    height: $line-height;
    position: relative;
    width: $line-height*2;

    &:before {
      content: "f";
      font-family: "icons" !important;
      font-size: rem-calc(24);
      left: 50%;
      line-height: $line-height*2;
      margin-left: rem-calc(-11);
      position: absolute;
      top: 0;
    }

    &:hover, &:focus {
      background: white;
      color: #40A2D1;
    }
  }

  .ssb-facebook {
    background: #3B5998;
    color: white;
    height: rem-calc(24);
    position: relative;
    width: rem-calc(48);

    &:before {
      content: "A";
      font-family: "icons" !important;
      font-size: rem-calc(24);
      left: 50%;
      line-height: $line-height*2;
      margin-left: rem-calc(-11);
      position: absolute;
      top: 0;
    }

    &:hover, &:focus {
      background: white;
      color: #354F88;
    }
  }

  .ssb-google_plus {
    background: #DE4C34;
    color: white;
    height: rem-calc(24);
    position: relative;
    width: rem-calc(48);

    &:before {
      content: "B";
      font-family: "icons" !important;
      font-size: rem-calc(24);
      left: 50%;
      line-height: $line-height*2;
      margin-left: rem-calc(-11);
      position: absolute;
      top: 0;
    }

    &:hover, &:focus {
      background: white;
      color: #CE3E26;
    }
  }
}

// 13. Pages
// ---------

.more-information {

  ul {

    li {
      border-bottom: 1px solid $border;
      font-weight: bold;
      margin-left: rem-calc(-12);
      position: relative;

      span {
        color: $text;
        display: inline-block;
        font-weight: normal;
      }

      a {
        display: block;
        padding: $line-height/2;

        &:hover {
          background: $highlight;

          span {
            text-decoration: none;
          }
        }
      }

      &:after {
        content: none;
        color: $text-medium;
        font-family: "icons" !important;
        position: absolute;
        right: 0;
        top: 24px;

        @include breakpoint(medium) {
          content: 'c';
        }
      }
    }
  }
}

// 14. Verification
// ----------------

.verification {

  @include breakpoint(medium) {
    .left + .left {
      margin-left: $line-height/2;
    }
  }

  .date-of-birth {

    select {
      float: left;
      width: 30%;

      @include breakpoint(medium) {
        width: 25%;
      }
    }
  }

  .progress {
    height: $line-height*3;

    @include breakpoint(medium) {
      height: $line-height*2;
    }

    &.success .meter {
      float: none;
    }
  }

  .verification-step {
    background: #f6f6f6;
    font-weight: bold;
    line-height: rem-calc(20);
    padding-top: $line-height/4;
    text-transform: uppercase;
    vertical-align: top;

    @include breakpoint(medium) {
      line-height: $line-height*2;
      padding: 0;
    }

    .number {
      display: block;

      @include breakpoint(medium) {
        background-color: white;
        border-radius: rem-calc(30);
        color: #43AC6A;
        display: inline-block;
        height: rem-calc(30);
        line-height: rem-calc(30);
        vertical-align: middle;
        width: rem-calc(30);
      }
    }

    &.active {
      background: #43AC6A;
      color: white;
    }

    &.completed {
      background: #43AC6A;
      color: rgba(255,255,255,.5);

      .number {
        opacity: .5;
      }
    }
  }

  .send-letter {
    background: none;
    color: $link;

    &:hover {
      color: $link-hover;
    }
  }

  .button + form {
    display: inline-block;
    margin-left: $line-height/2;
  }

  .verification-list {
    font-size: rem-calc(13);
    list-style-type: none;
    margin-left: 0;

    span {
      display: inline-block;
      min-width: $line-height*12;
    }
  }
}

.verify-account {
  padding-right: $line-height/2;

  .already-verified {
    color: $check;
    line-height: $line-height*2;

    .icon-check {
      font-size: rem-calc(24);
      line-height: rem-calc(45);
      vertical-align: middle;
    }
  }
}

.verify {
  margin-bottom: $line-height*2;
  margin-top: $line-height;

  h1 {
    color: $check;

    .icon-check {
      line-height: rem-calc(30);
      vertical-align: middle;
    }
  }

  .letter-divider {
    border-top: 1px solid #DDDDDD;
    clear: both;
    height: 0;
    margin: rem-calc(24) 0;
    position: relative;

    .icon-letter {
      background: white;
      color: $color-info;
      font-size: rem-calc(24);
      margin-left: -27px;
      padding: 0 $line-height/2;
      position: absolute;
      top: -12px;
    }
  }
}

// 15. Comments
// ------------

.comments {
  background: $white;
  background-repeat: repeat-x;
  padding-bottom: $line-height*4;

  h2 {
    margin: 0;
    font-weight: bold;

    span {
      font-size: rem-calc(18);
      font-weight: normal;
      opacity: .8;
    }
  }

  .comment {
    margin: $line-height/4 0;
    position: relative;

    p {
      margin-bottom: 0;
    }

    .comment-votes {
      color: $text-medium;
      font-size: $small-font-size;
      line-height: $line-height;

      a {
        color: $text-light;
        display: inline-block;
        vertical-align: top;

        &:hover {
          color: $text-medium;
          text-decoration: none;

          .icon-like {
            color: $like;
          }

          .icon-unlike {
            color: $unlike;
          }
        }
      }

      [class^="icon-"] {
        font-size: $base-font-size;
        vertical-align: sub;
      }
    }

    .comment-body {

      img {
        margin-right: $line-height/2;
      }

      .reply {
        background: white;
        border: 1px solid $border;
        border-left: 0;
        border-right: 0;
        font-size: $small-font-size;
        margin: $line-height/4 0;
        padding: $line-height/4;
        position: relative;

        a.relative, [class^="icon-arrow"] {
          padding-left: $line-height/2;
        }

        [class^="icon-arrow"] {
          font-size: $base-font-size;
          left: -20px;
          position: absolute;
          top: -1px;
        }

        .divider {
          color: $text-light;
        }

        form {
          margin-top: $line-height/2;
        }
      }

      .comment-user {
        margin-top: $line-height/4;
        padding: $line-height/4 0;
        overflow: hidden;

        &.level-1, &.level-2, &.level-3, &.level-4, &.level-5,
        &.is-author, &.is-admin, &.is-moderator {
          background: rgba(70,219,145,.3);
          padding: $line-height/4 $line-height/2;
        }

        &.level-1 {
          background: none;
        }

        &.level-5 {
          background: rgba(255,241,204,1);
        }

        &.is-author, &.is-admin, &.is-moderator {
          background: rgba(45,144,248,.15);
        }
      }
    }

    .comment-children {
      border-left: 1px dashed $border;
      display: inline-block;
      margin-left: rem-calc(16);
      padding-left: rem-calc(8);
      width: 100%;
    }

    .comment-info {
      color: $text-medium;
      display: inline-block;
      font-size: $small-font-size;
      line-height: rem-calc(32); // Same as avatar height

      span.user-name {
        color: $text;
        font-weight: bold;
      }
    }
  }
}

.faded {
  opacity: 0.4;
}

.wide-order-selector {
  float: none;
  margin-top: 0;

  @include breakpoint(medium) {
    float: right;
    margin-top: rem-calc(-24);
  }

  label {
    padding-right: $line-height/2;
    float: none;

    @include breakpoint(medium) {
      float: right;
    }
  }
}

.comment-form {
  display: inline-block;
  width: 100%;
}

// 16. Flags
// ---------

.flag-content {

  .button {
    background: none;
    margin-bottom: 0;
    padding: 0;
  }
}

.flag-disable, .flag-active {
  line-height: 0;
  vertical-align: sub;
}

.flag-disable {
  color: $text-medium;
}

.flag-active {
  color: $delete;
}

.dropdown-pane a {
  color: $text-medium;
}

// 17. Activity
// ------------

.activity {
  margin-bottom: $line-height*2;

  table {
    border: 0;

    td {
      position: relative;

      &:first-child {
        padding-left: $line-height*1.5;
        width: 75%;
      }

      &:before {
        color: $brand;
        font-family: "icons" !important;
        font-size: rem-calc(24);
        left: 4px;
        position: absolute;
      }
    }

    &.activity-comments td:first-child:before {
      content: "e";
      top: 18px;
    }

    &.activity-debates td:first-child:before {
      content: "i";
      top: 14px;
    }

    &.activity-proposals {

      td:first-child:before {
        content: "h";
        top: 18px;
      }

      .retired {
        text-decoration: line-through;
      }
    }

    &.activity-investment-projects td:first-child:before, &.activity-ballot td:first-child:before {
      content: "\53";
      top: 10px;
    }
  }
}

// 18. Banners
// -----------

.banner-style-one {
  background-color: $brand;
}

.banner-style-two {
  background-color: $budget;
}

.banner-style-three {
  background-color: #33DADF;
}

@include breakpoint(large) {

  .banner-img-one {
    background-image: image-url('banners/banner1.png');
  }

  .banner-img-two {
    background-image: image-url('banners/banner2.png');
  }

  .banner-img-three {
    background-image: image-url('banners/banner3.png');
  }
}

.banner-img-one, .banner-img-two, .banner-img-three {
  background-position: bottom right;
  background-repeat: no-repeat;
}

.banner-style-one, .banner-style-two, .banner-style-three {
  margin: 0;
  margin-bottom: $line-height;

  h2, h3, a {
    color: #eaeaf2;
  }

  h2 {
    padding: $line-height/2;
    padding-bottom: 0;
  }

  h3 {
    padding: $line-height/2;
    padding-top: 0;
  }

  a:hover h2, a:hover h3 {
    color: #eaeaf2 !important;
    text-decoration: none;
  }

  @include breakpoint(large) {

    h3 {
      width: 80%;
    }
  }
}