Software Público Brasileiro

// ------------------------------------
// Organização da folha de estilo:
//
// 0 - Dependências
// 1 - Variaveis
//   1.1 - espacamento
//   1.2 - arredondamento
//   1.3 - tamanhos de fontes
//   1.4 - dicionarios
//   1.5 - cores
//   1.6 - escurecer
// 2 - Mixins
//   2.1 - hover
// 3 - Base
// 4 - Grid
// 5 - Elementos reusaveis
//   5.1 - esconder
//   5.1 - botao padrao
//   5.2 - botao voltar
//   5.3 - icones
// 6 - Blocos de elementos
//   6.1 - compartilhar
//   6.2 - logo
//   6.3 - menu topo
//   6.4 - video
//   6.5 - background do conteudo
//   6.6 - tabs de temas e programas (pagina antiga)
//   6.7 - menu dos temas
//   6.8 - listagem dos programas aleatorios
//   6.9 - blocos dos programas
//   6.10 - header do programa e select box
//   6.11 - imagem destaque do programa, titulo, descricao e botao de acesso
//   6.12 - login form
//   6.13 - votacao
//   6.14 - tabela de resultados
//   6.15 - lista de resultados
//   6.16 - paginador
//   6.17 - calendario dos ministros
//   6.18 - listas
//   6.19 - artigo
//   6.20 - participe
//   6.21 - captcha
// 7 - Modificadores
// 8 - Cores do Temas
// 9 - Alto Contraste
// 10 - Mobile
// ------------------------------------


// ------------------------------------
// 0 - Dependências
// ------------------------------------
@import ../css/_bootstrap.min
@import ../css/bootstrap-alert.min
@import ../css/hover.custom
@import ../css/footable.core.min
@import ../css/font-awesome.min
// @import ../css/open-sans.min // get from google webfonts
// @import ../css/font-asap.min // get from google webfonts

// ------------------------------------
// 1 - Variaveis
// ------------------------------------

//   1.1 - espacamento
$gutter: 20px

//   1.2 - arredondamento
$radius: 3px

//   1.3 - tamanhos de fontes
$font-size-base: 16px
$font-size-big: $font-size-base + 2
$font-size-small: $font-size-base - 2
$font-size-h1: 28px
$font-size-h2: 38px
$font-size-h3: 28px
$font-size-h4: 34px
$theme-size-header: 24px
$proposal-title: 32px

//   1.4 - dicionarios
$categories: (saude: #3449b7, seguranca-publica: #e34748, educacao: #f39720, reducao-da-pobreza: #3ebb8f, cultura: #a63738)
$categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.", seguranca-publica: "A segurança pública é um direito fundamental dos cidadãos. A proteção da vida, a disseminação da cultura da paz e a integração dos órgãos e instituições municipais, estaduais e federais são os maiores compromissos dessa política pública.", educacao: "Uma pátria educadora se faz com oportunidades para todos. Nos últimos anos, o Brasil criou esse caminho de oportunidades. Ampliamos o acesso à educação em todos os níveis de ensino – da creche à pós-graduação – e para todos os brasileiros, independentemente de sua classe social. E ainda há muito a fazer. O Plano Nacional de Educação (PNE) estabelece novas metas para que o governo federal trabalhe em parceria com a sociedade, com os estados e os municípios na construção de um futuro melhor. Queremos agora um salto na qualidade do ensino.", reducao-da-pobreza: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, 36 milhões de pessoas superaram a miséria na última década e o país saiu do Mapa da Fome das Nações Unidas.", cultura: "O que nos singulariza no conjunto das nações é, em última instância, nossa cultura. É por ela que nos identificamos como brasileiros de norte a sul deste país. Uma grande nação precisa ter um desenvolvimento cultural à altura de sua grandeza, contemplando as dimensões simbólica, econômica e cidadã da cultura, que são parte central do projeto de um país democrático e plural. A pluralidade é nossa singularidade.")

//   1.5 - cores
$header-color: #03316f
$link-color: #387bfa

//   1.6 - escurecer
$darken: 15%

//   1.7 - screens
$screen-xs: 480px
$screen-sm: 767px
$screen-md: 992px
$screen-lg: 1200px

// ------------------------------------
// 2 - Mixins
// ------------------------------------

//   2.1 - hover
=hover($color, $amount)
  transition: all 400ms
  &:hover
    background-color: darken($color, $amount)
    text-decoration: none


// ------------------------------------
// 3 - Base
// ------------------------------------

body
  font-family: 'Open Sans', sans-serif
  font-size: $font-size-base
  font-weight: 400
h1
  font-size: $font-size-h1
  font-weight: 500
  margin: $gutter 0
  text-transform: uppercase
  a
    color: $header-color
h2
  font-size: $font-size-h2
  font-weight: 500
  margin-bottom: $gutter * 2
  padding-bottom: $gutter
  small
    display: block
    font-size: 16px
    padding-top: $gutter * 0.25
    text-transform: none
h3
  font-size: $font-size-h3
  font-weight: 500
h4
  font-size: $font-size-h4
  font-weight: 500
p,ul,select
  color: #000
blockquote
  border-bottom: 5px solid
  border-left: 0
  border-right: 0
  border-top: 5px solid
  font-size: $font-size-h1
  margin: $gutter 0
  padding: $gutter 0
a
  color: $link-color
  &:hover,&:focus
    color: $link-color
tr
  &:last-child
    td
      &:first-child
        border-bottom-left-radius: 3px
        border-bottom: 0
        border-left: 0
      &:last-child
        border-bottom-right-radius: 3px
        border-bottom: 0
        border-right: 0
th
  border-bottom: 3px solid
  border-left: 1px solid
  border-right: 1px solid
  padding: 15px 20px
  &:first-child
    border-top-left-radius: $radius
    border-left: 0
    border-top: 0
  &:last-child
    border-top-right-radius: $radius
    border-right: 0
    border-top: 0
td
  background-color: #eeeff1
  border: 1px solid #fff
  padding: 10px
  text-align: center
  &:first-child
    border-left: 0
  &:last-child
    border-right: 0
input
  width: 100%
textarea
  border: 1px solid
  padding-bottom: $gutter * 0.25
  padding-left: $gutter * 0.5
  padding-right: $gutter * 0.5
  padding-top: $gutter * 0.25
  width: 100%
  height: 100px


// ------------------------------------
// 4 - Grid
// ------------------------------------

.container, .row
  margin-bottom: $gutter


// ------------------------------------
// 5 - Elementos reusaveis
// ------------------------------------

//   5.1 - esconder
.hide
  display: none

//   5.1 - botao padrao
.button
  background-color: #387bf9
  border-bottom: 3px solid darken(#387bf9, $darken)
  border-left: 0
  border-right: 0
  border-top: 0
  border-radius: $radius * 2
  color: #fff
  cursor: pointer
  display: block
  font-size: $font-size-small
  font-weight: 700
  padding-bottom: $gutter * 0.75
  padding-left: 0
  padding-right: 0
  padding-top: $gutter * 0.75
  text-align: center
  +hover(#387bf9,$darken)
  &:hover, &:focus
    color: #fff
  &-inline
    display: inline-block
    padding-bottom: $gutter * 0.25 !important
    padding-top: $gutter * 0.25 !important
  &-block
    width: 100%
  &-cancela
    @extend .button
  &-send
    span
      background-image: url(images/airplane.png)
      background-position: left center
      background-repeat: no-repeat
      color: #fff
      padding-left: $gutter * 1.5
    a
      display: block
      padding: 15px 0 18px 0
      margin: -15px 0 -18px 0
  &-participe
    .fa
      margin-right: $gutter * 0.5
  &-confirm
    margin-bottom: $gutter

//   5.2 - botao voltar
.btn
  background-color: transparent
  border: 0
  color: #fff
  font-size: $font-size-small
  font-weight: 700
  padding-bottom: 0
  padding-left: $gutter * 0.5
  padding-right: $gutter * 0.5
  padding-top: 0
  vertical-align: middle

#display-contrast
  color: $link-color
  font-weight: normal
  .contraste &
    color: white
//   5.3 - icones
.icon
  background-repeat: no-repeat
  background-position: 50% !important
  background-size: auto !important
  border: 0 !important
  border-radius: 100%
  color: #fff !important
  display: inline-block
  font-size: 20px
  height: 36px
  min-width: 0 !important
  text-align: center
  transform: all 200ms
  width: 36px
  &-facebook
    background-color: #537abb
    padding: 8px 0
    +hover(#537abb,$darken)
  &-twitter
    background-color: #78caee
    padding: 8px 0
    +hover(#78caee,$darken)
  &-gplus
    background-color: #d54000
    padding: 9px 0
    +hover(#d54000,$darken)
  &-whatsapp
    background-color: #56ba62
    padding: 7px 0
    +hover(#56ba62,$darken)
  &-email
    background-color: #edb24c
    padding: 7px 0
    +hover(#edb24c,$darken)
  &.disabled
    background-color: #fff
    color: #000
    +hover(#fff,$darken)
  &-theme
    background-size: 35px !important
    height: 48px
    width: 48px
    vertical-align: middle
    margin-right: $gutter * 0.5
  &-vote
    display: inline-block
    font-size: 35px
    height: 64px
    margin: 0 6%
    padding: 3px 0
    width: 64px
    &.dislike
      background-color: #db4127
      border-bottom: 3px solid darken(#db4127, $darken) !important
      +hover(#db4127, $darken)
    &.like
      background-color: #32dbb5
      border-bottom: 3px solid darken(#32dbb5, $darken) !important
      +hover(#32dbb5, $darken)
  &-user-created
    height: 71px
    width: 71px
    background: url(images/icons/icon-user-created.png) no-repeat 50% 50%
    border-radius: 0
  &-login-success,
  &-proposal-sent
    height: 71px
    width: 71px
    background-repeat: no-repeat
    background-position: 50% 50%
    border-radius: 0
  &-login-success
    .saude &
      background-image: url(images/icons/icon-login-success-blue.png)
    .seguranca-publica &
      background-image: url(images/icons/icon-login-success-red.png)
    .educacao &
      background-image: url(images/icons/icon-login-success-yellow.png)
    .reducao-da-pobreza &
      background-image: url(images/icons/icon-login-success-green.png)
  &-proposal-sent
    .saude &
      background-image: url(images/icons/icon-proposal-sent-blue.png)
    .seguranca-publica &
      background-image: url(images/icons/icon-proposal-sent-red.png)
    .educacao &
      background-image: url(images/icons/icon-proposal-sent-yellow.png)
    .reducao-da-pobreza &
      background-image: url(images/icons/icon-proposal-sent-green.png)


// ------------------------------------
// 6 - Blocos de elementos
// ------------------------------------

//   6.1 - compartilhar
.social
  position: relative
  z-index: 1
  &.top
    float: right
    margin-top: $gutter * 2
  &.right
    padding-top: 10px
    > span
      color: #000
      display: inline-block
      font-size: 12px
      font-weight: 300
      padding-right: 10px
      text-align: right
      vertical-align: middle
    ul
      display: inline-block
      vertical-align: middle
  span
    display: block
    margin-bottom: 10px
  ul
    list-style: none
    padding-left: 0
  li
    display: inline-block
    padding: 0 2px !important
    vertical-align: top

//   6.2 - logo
h1
  float: left
  .logo
    background-image: url(images/logo.png)
    background-repeat: no-repeat
    background-position: center center
    background-size: contain
    height: 55px
    margin-right: $gutter * 2
    width: 322px
    display: inline-block
    text-indent: -99999px

//   6.3 - menu topo
.top-menu
  float: left
  margin: $gutter ($gutter * 0.75)
  @media (max-width: $screen-xs)
    margin: auto
  a
    color: $header-color
    display: block
    float: left
    margin: ($gutter) ($gutter * 0.5) 0
    text-transform: uppercase
    @media (max-width: $screen-xs)
      margin: 0 ($gutter)

//   6.3 - video
#content
  margin-bottom: $gutter * 1.5
  .embed-responsive
    border: 1px solid #333

  &.video-smaller
    @media (min-width: $screen-md)
      width: 60%
      margin-left: auto
      margin-right: auto

//   6.4 - background do conteudo
.content
  padding-top: $gutter * 1.5
  &.background
    background-color: #f1f1f1

//   6.5 - tabs de temas e programas (pagina antiga)
.tab
  margin-top: $gutter
  ul
    font-size: 0
    list-style: none
    margin-bottom: 0
    padding-left: 0
  li
    display: inline-block
    font-size: $font-size-base
    width: 50%
  a
    background-color: #efefef
    border-bottom: 1px solid #000
    color: #000
    display: block
    font-weight: 700
    padding-bottom: $gutter
    padding-left: $gutter * 0.25
    padding-right: $gutter * 0.25
    padding-top: $gutter
    text-align: center
    text-transform: uppercase
  .active
    background-color: #fff
    border-bottom: 1px solid #fff
    border-left: 1px solid #000
    border-right: 1px solid #000
    border-top: 1px solid #000

//   6.6 - menu dos temas
#proposal
  &-categories
    ul
      list-style: none
      padding-left: 0
.themes
  li
    border-bottom: 1px solid #f1f1f1
    display: block
    font-size: $font-size-base
    position: relative
  a
    background-color: #fff
    color: #484848
    display: block
    font-family: asap, sans
    font-size: $font-size-small
    font-weight: 700
    padding-bottom: $gutter * 0.5
    padding-left: $gutter
    padding-right: $gutter
    padding-top: $gutter * 0.5
    text-transform: uppercase
    +hover(#fff,$darken)
    &:hover,&:focus
      text-decoration: none
  .fa
    color: #898989
    font-size: 45px
    position: absolute
    top: 50%
    margin-top: -22px
    right: 8px
  &-name
    display: inline-block
    width: 50%
    vertical-align: middle
  // .arrow-box
  //   position: relative
  //   top: $gutter
  //   &:after
  //     bottom: 100%
  //     left: 50%
  //     border: solid transparent
  //     content: ""
  //     position: absolute
  //     border-bottom-color: #000
  //     border-width: 8px
  //     margin-left: -8px

//   6.7 - listagem dos programas aleatorios
.ver-todos
  float: right
  .fa
    font-size: $theme-size-header
    margin-right: $gutter * 0.5
    vertical-align: bottom
.proposal
  &-container
    border-radius: $radius
    margin-bottom: $gutter
  &-list
    list-style: none
    padding-left: 0
    .proposal-item
      margin-bottom: $gutter
  &-group
    ul
      list-style: none
      padding-left: 0
  &-title
    margin-top: $gutter * 2

//   6.8 - blocos dos programas
.box
  background-color: #fff
  border-radius: $radius
  color: #000
  display: block
  margin-top: $gutter * 1.5
  height: 100%
  overflow: hidden
  transition: all 400ms
  +hover(#fff,$darken)
  &:hover
    text-decoration: none
  p
    padding-bottom: $gutter * 0.75
  &-propostas
    height: auto
    border: 1px solid
    margin-bottom: $gutter * 1.5
    margin-top: 0
    height: 570px
    overflow: auto
    padding: $gutter
    position: relative
    &.talk-proposal
      height: auto
    &:hover
      background-color: #fff
    p
      border-bottom: 0
      padding-bottom: inherit
  &-apoie
    p
      @extend .box-subtitle
      border-bottom: 0
      padding-bottom: inherit
  &-header
    color: #000
    font-size: $font-size-big
    font-weight: 700
    p
      font-size: $font-size-small
      font-weight: 500
      margin-top: $gutter * 0.5
      // height: $gutter * 2
      // @media (min-width: $screen-md)
      //   height: $gutter * 3
  &-body
    padding: $gutter
    // img
    //   margin-left: $gutter * (-1)
    //   margin-right: $gutter * (-1)
    //   margin-top: $gutter * (-1)
    //   margin-bottom: $gutter
    //   height: 170px
  &__image
    background-size: cover
    height: 170px
    margin: -20px -20px 10px
    background-position: center center
  // &__footer
  //   position: absolute
  //   left: 0
  //   width: 100%
  //   bottom: $gutter
  //   padding: 0 10%
  &-category
    font-size: $font-size-small
    font-weight: 700
    list-style: none
    text-transform: uppercase
    div
      color: #fff
      padding-bottom: $gutter * 0.25
      padding-left: $gutter
      padding-right: $gutter * 0.5
      padding-top: $gutter * 0.25
  &-title
    font-size: $font-size-h2
    font-weight: 400
    margin-bottom: $gutter
  &-subtitle
    color: $link-color
    font-size: $theme-size-header
    font-weight: 700
    line-height: 1.2
    margin-bottom: $gutter
  &-info
    margin-bottom: $gutter
  &-footer
    margin-bottom: $gutter * 0.25
    margin-left: auto
    margin-right: auto
    margin-top: $gutter
  &-bottom
    @extend .box-footer
    bottom: 10px
    color: #000
    display: inline-block
    font-size: $font-size-small
    font-weight: 700
    margin-bottom: $gutter * 0.75
    margin-top: 0
    text-align: center
    &:hover, &:focus
      color: #000
  &-center
    text-align: center

//   6.9 - header do programa e select box
.select
  background-color: #000
  margin-bottom: $gutter * 0.5
  padding: $gutter * 0.25
  .proposal
    &-link
      color: #fff
      display: inline-block
      font-size: $theme-size-header
      font-weight: 700
      padding-bottom: 0
      padding-left: $gutter * 2.25
      padding-right: 0
      padding-top: 0
      vertical-align: middle
    &-selection
      background-color: #fff
      border: 0
      border-radius: 3px
      float: right
      margin: 4px
      width: 50%
      vertical-align: middle

//   6.10 - imagem destaque do programa, titulo, descricao e botao de acesso
.proposal-header
  position: relative
  .title
    background-color: #000
    bottom: 170px
    color: #fff
    font-size: $proposal-title
    font-weight: 700
    margin-bottom: $gutter * 1.25
    margin-left: 0
    margin-right: 0
    margin-top: $gutter * 1.25
    padding: $gutter
    position: absolute
    right: 0
    text-align: center
    text-transform: uppercase
    width: 50%
    vertical-align: middle
  .show_body
    margin-bottom: $gutter
    margin-top: $gutter
    a
      background-color: lighten(#000, 40%)
      border-bottom: 5px solid #000
      border-left: 0
      border-right: 0
      border-top: 0
      border-radius: $radius * 2
      color: #fff
      display: block
      font-size: $font-size-h2
      font-weight: 700
      padding-bottom: $gutter * 0.5
      padding-left: 0
      padding-right: 0
      padding-top: $gutter * 0.5
      text-align: center
      +hover(#000,$darken)
  img
    width: 100%
  p
    @extend .title
    bottom: 140px
    font-size: $font-size-small
    margin-bottom: $gutter * 0.5
    padding-top: $gutter * 0.25
    text-transform: none

//   6.11 - login form
.participar
  position: relative
  text-align: right
  .btn
    color: $link-color
    font-weight: normal
    .contraste &
      color: #fff
  .participe
    font-size: 14px
    padding: 2px 10px
  .icon-login
    display: inline-block
    position: relative
    top: -2px
    right: 5px
    width: 20px
    height: 20px
    padding: 12px
    vertical-align: middle
    border: 1px solid #ccc !important
    background: url(images/icons/icon-user.png) no-repeat 20px 50%
    .contraste &
      background-image: url(images/icons/icon-user-contrast.png)
  .login
    margin-left: 20px
  .logout
    margin-left: 20px
#login-panel
  position: absolute
  top: 0
  right: 0
  padding: 20px
  z-index: 9999
  background-color: #fff
  border: 1px solid #ccc
  .loading
    display: none
  .contraste &
    background-color: #262626

.login,
.signup
  text-align: left
  .message
    background: #fcc
    border: 1px solid #b00
    border-radius: $radius
    color: #b00
    font-weight: 700
    padding-bottom: $gutter * 0.25
    padding-left: $gutter * 0.5
    padding-right: $gutter * 0.5
    padding-top: $gutter * 0.25
    margin-bottom: $gutter
  .message.message-warning
    background: #fcf8e3 !important
    border: 1px solid #FFD681 !important
    color: #8a6d3b !important
  input
    border: 1px solid
    display: block
    margin-bottom: $gutter
    padding-bottom: $gutter * 0.25
    padding-left: $gutter * 0.5
    padding-right: $gutter * 0.5
    padding-top: $gutter * 0.25
    width: 100%
    &.button
      @extend .button
      margin-bottom: $gutter * 0.25
  .checkbox
    padding: 10px 0
    input
      width: auto
      display: inline-block
  .label
    vertical-align: middle
  .icon
    vertical-align: middle
  .oauth
    margin-top: $gutter * 0.5
    text-align: right
    .icon
      padding: 3px 0
  .forgot-password
    display: block
    font-size: $font-size-small
    text-align: center
  i
    font-style: normal
    font-weight: 700
    padding-left: $gutter * 0.25
    padding-right: $gutter * 0.25
  .row
    input
      margin-bottom: 0
.maxlength
  margin: ($gutter * 0.5) 0 ($gutter * 2)
  text-align: right


//   6.12 - votacao
.vote-actions
  .like
    display: inline-block

//   6.13 - tabela de resultados
table
  .abstract-text
    width: 80%
  .value
    text-align: center
    width: 10%
  .header
    font-weight: bold
    line-height: 22px
    text-align: center
  .position
    width: 20%
    a
      border: 1px solid #fff
      border-radius: 100%
      color: #fff
      display: inline-block
      font-size: 16px
      height: 30px
      margin-left: 5px
      padding: 2px 0
      text-align: center
      width: 30px
      vertical-align: middle
      transition: all 400ms
  .votes-for
    display: table-cell
    .fa
      background-color: #32dbb5
      border: 2px solid #ffffff
      border-radius: 100%
      color: #fff
      font-size: 16px
      height: 30px
      padding: 5px 0
      text-align: center
      transition: all 200ms ease 0s
      width: 30px
  .votes-against
    display: table-cell
    .fa
      background-color: #DB4127
      border: 2px solid #ffffff
      border-radius: 100%
      color: #fff
      font-size: 16px
      height: 30px
      padding: 5px 0
      text-align: center
      transition: all 200ms ease 0s
      width: 30px
  .truncate
    display: table
    table-layout: fixed
    width: 90%
  .truncated
    overflow-x: hidden
    text-overflow: ellipsis
    white-space: nowrap
th
  color: #fff
  &.abstract-text
    text-align: left
td
  &.abstract-text
    text-align: left
    p
      margin: 0

//   6.14 - lista de resultados
.results-content
  .total
    float: left
  .vote-result
    float: right
    background: none
    border: none

    @each $category, $color in $categories
      .#{$category} &
        color: $color

    .contraste &
      color: #fff

  .updated-at
    @extend .vote-result
    margin-top: $gutter
  table
    clear: both
    tr:nth-child(odd)
      background: #e5e5e5
    td
      padding: $gutter * 0.25
    .header
      font-weight: 700
      text-align: center
    .abstract-text
      width: 80%
      cursor: pointer
      p
        margin: inherit
    .value
      text-align: center
      width: 10%
    .truncate
      position: relative
      display: table
      table-layout: fixed
      width: 100%
      @media (max-width: 567px)
        width: 90%
    .truncated
      overflow-x: hidden
      text-overflow: ellipsis
      white-space: nowrap
      &:after
        display: block
        content: "[...]"
        // content: "\e000"
        position: absolute
        top: 0
        right: 2px
        padding: 1px 3px
        color: #888
        background-color: #e0e0e0

    &.phone
      .footable-toggle
        float: right
        padding: 5px 0 !important
        width: 10%
        text-align: center
        background-color: #e0e0e0
      .footable-row-detail-row
        display: inline-block
        &:not(:last-child)
          // margin-right: 10px
          // padding-right: 10px
          border-right: 1px solid #ccc
      .footable-row-detail-inner
        margin: 0 auto
      .footable-row-detail-cell
        background-color: #e0e0e0
      .footable-row-detail-name
        display: block
        text-transform: uppercase
      .footable-row-detail-value
        display: block

      // fix height
      .footable-row-detail-row:nth-child(1)
        .footable-row-detail-value:before
          height: 30px

      // check icon
      .footable-row-detail-row:nth-child(2)
        .footable-row-detail-name
          display: none
        .footable-row-detail-value:before
          content: '\f00c'
          font: normal normal normal 14px/1 'FontAwesome'
          display: block
          background-color: #32dbb5
          border: 2px solid #ffffff
          border-radius: 100%
          color: #fff
          font-size: 16px
          height: 30px
          padding: 5px 0
          text-align: center
          transition: all 200ms ease 0s
          width: 30px
          margin: 0 20px

      // check icon
      .footable-row-detail-row:nth-child(3)
        .footable-row-detail-name
          display: none
        .footable-row-detail-value:before
          content: '\f00d'
          font: normal normal normal 14px/1 'FontAwesome'
          display: block
          background-color: #DB4127
          border: 2px solid #ffffff
          border-radius: 100%
          color: #fff
          font-size: 16px
          height: 30px
          padding: 5px 0
          text-align: center
          transition: all 200ms ease 0s
          width: 30px
          margin: 0 20px

//   6.15 - paginador
.paging
  padding: $gutter * 0.25
  ul
    display: table
    list-style: none
    margin: auto
    padding: 0
  li
    float: left
  span
    @extend .page-link
  .page-link
    padding: 0 7px
    font-size: $font-size-small
    font-weight: 400
    text-align: center
    background-color: #000
    color: #fff
    display: inline-block
    line-height: 24px
  .current
    background-color: lighten(#000, $darken)
  .next
    border-radius: 0 $radius $radius 0
  .prev
    border-radius:  $radius 0 0 $radius

//   6.16 - calendario dos ministros
.slick
  &-slider
    list-style: none
    margin-bottom: 0
    margin-left: auto
    margin-right: auto
    margin-top: $gutter * 2
    padding: 0
    position: relative
    width: 80%
    li
      background-color: #eeeff1
      margin-bottom: $gutter * 0.25
      padding: $gutter * 0.5
    span
      display: block
    .date, .time
      display: inline-block
      margin-top: $gutter
      width: 45%
  &-list
    overflow: hidden
  &-slide
    float: left
  &-def
    background-color: transparent
    border: 0
    color: #000
    font-size: 0
    position: absolute
    top: 43%
    width: 20px
    &:before
      font-family: "FontAwesome"
      font-size: 20px
  &-prev
    @extend .slick-def
    left: -25px
    &:before
      content: "\f053"
  &-next
    @extend .slick-def
    right: -25px
    &:before
      content: "\f054"
  &-disabled
    opacity: 0.25

.presenter-warning
  background-color: #D9D9DD
  font-weight: bold

// .calendar
.calendar__disabled
  opacity: 0.6

.calendar__presenter
  font-weight: bold
  font-size: 20px

.calendar__column
  height: 90px
  padding-top: 20px
  background-color: #eeeff1

  &:not(:last-child)
    border-right: 2px solid #fff
  &:first-child
    padding-left: 40px

  @media (max-width: $screen-sm)
    &:first-child
      border-bottom: 2px solid #fff
      border-right: none

  .contraste &
    background-color: #333
    color: #fff !important

    &:not(:last-child)
      border-right: 2px solid #262626

    @media (max-width: $screen-sm)
      &:first-child
        border-bottom: 2px solid #262626
        border-right: none

    // @media (max-width: $screen-sm)

.calendar__date,
.calendar__time
  font-size: 20px
  font-weight: bold
  padding-top: 10px
  text-align: center

  .fa
    font-size: 32px
    vertical-align: middle

//   6.17 - listas
.list-container-border
  border: 3px solid
  border-radius: $radius
.list
  &-unstyled
    li
      border-top: 1px solid darken(#eeeff1,$darken)
      font-size: $font-size-big
      font-weight: 700
      padding: $gutter
      &:first-child
        border-top: 0
  &-styled
    margin-left: $gutter
    padding-left: 0
.no-border
  li
    border: 0
    padding-bottom: $gutter * 0.25
    padding-left: 0
    padding-right: 0
    padding-top: $gutter * 0.25

//   6.18 - artigo
.article-container
  max-width: 1170px
  margin-left: auto
  margin-right: auto
  .abstract
    font-style: italic
    color: rgb(114, 114, 114)
    margin-bottom: 30px
    margin-top: 10px
  .title
    font-size: 22px

// 6.19 - sucesso
.success-panel
  position: absolute
  z-index: 100
  text-align: center

// 6.20 - participe
.talk__participate
  .button
    position: relative
    z-index: 5
.talk__counter
  position: relative
  display: inline-block
  // line-height: 3
  margin-left: -15px
  padding: 15px 15px 15px 30px
  background-color: #eeeff1
  z-index: 1
  border-radius: 10px

  .contraste &
    background-color: #333
    color: #fff !important

  @each $category, $color in $categories
    .#{$category} &
      color: $color

  @media (max-width: $screen-sm)
    width: 100%
    margin-left: 0

.talk__value
  font-weight: bold

// 6.21 - captcha
#serpro_captcha
  margin: 15px 0 10px 0
  &:before,
  &:after
    clear: both
    content: " "
    display: table
  #divContainerUI_captcha_serpro_gov_br
    border: none
    box-shadow: none
    width: 250px
  #img_captcha_serpro_gov_br
    float: left
  #divButtons_captcha_serpro_gov_br
    float: left
    width: 100px
    img
      float: left
      margin: 0 0 0 10px

// 6.22 - random proposal
.random-proposal > .success-panel
  position: relative
  margin-bottom: 10px


// 6.23 - freeze messages
// .freeze--home-message
.freeze--theme-message
  font-weight: bold
  margin: 10px 0
.freeze--top-proposals
  margin: 10px 0

// ------------------------------------
// 7 - Modificadores
// ------------------------------------
h2
  &.name
    color: #6c6c6c
    font-size: $font-size-big
    font-weight: 700
    margin-bottom: $gutter * 0.25
    margin-left: 0
    margin-right: 0
    margin-top: 0
    padding: 0
    text-transform: none
  &.menu
    background-color: #484848
    border: 0
    border-top-left-radius: $radius
    border-top-right-radius: $radius
    color: #fff
    font-size: $font-size-base - 1
    font-weight: 300
    margin: 0
    padding-bottom: $gutter
    padding-left: $gutter
    padding-right: $gutter
    padding-top: $gutter

h3.titulo-destaque
  font-size: $font-size-h3 + 10
.bloco-destaque
  padding: $gutter * 1.75
  border-radius: $radius
  h4
    margin-bottom: $gutter * 3

@each $category, $description in $categories-descriptions
  section.#{$category}
    .description
      margin-top: $gutter
      &:before
        content: "#{$description}"
        color: #6c6c6c
        font-family: asap, sans
        padding-top: $gutter


// ------------------------------------
// 8 - Cores do Temas
// ------------------------------------

@each $category, $color in $categories
  .#{$category}
    color: $color
    a
      color: $color
    strong
      color: $color
    textarea
      border-color: $color
    .button,.show_body a
      background-color: $color
      border-color: darken($color, $darken)
      color: #fff
      +hover($color,$darken)
    .select
      background-color: $color
    .proposal
      &-header
        .title,p
          background-color: darken($color, $darken)
    .box
      &-propostas
        border-color: $color
      &-title,&-bottom
        color: $color
      &-category
        li
          background-color: $color
    table
      .position
        a
          background-color: $color
          +hover($color,$darken)
    th
      background-color: $color
      border-bottom-color: darken($color,$darken)
      border-left-color: lighten($color,$darken)
      border-right-color: lighten($color,$darken)
    .slick
      &-prev,&-next
        color: $color
      &-slider
        .date,.time
          color: $color
    .login,
    .signup
      input
        border-color: $color
        &.button
          +hover($color,$darken)
      i
        color: $color

    .list
      &-unstyled li
        color: $color
    .bloco-destaque
      background-color: $color
      // background-image: url(http://www.participa.br/articles/public/0009/6039/mais-medicos-foto4.png)
      background-repeat: no-repeat
      background-position: 100% 100%
      color: #fff
      p
        color: #fff
    .select
      .proposal-link
        background-image: url(images/icons/#{$category}.png)
        background-position: 5px 50%
        background-repeat: no-repeat
        background-size: 32px
    .category-title
      background-color: $color
      border-color: darken($color, $darken)

    .freeze--theme-message p,
    .freeze--program-message p
      color: $color

  .icon
    &-#{$category}
      background-color: $color
      background-image: url(images/icons/#{$category}.png)
  .#{$category}
    ul.list-color
      li:before
        color: $color

// hack
ul.list-color
  list-style: none
  padding: 0
  margin: 0

  li
    padding-left: 1em
    text-indent: -.7em
    &:before
      content: "• "
      font-weight: bold
      font-size: 20px
      position: relative
      top: 2px

.saude
  .bloco-destaque
    background-image: url(http://www.participa.br/articles/public/0009/6039/mais-medicos-foto4.png)

.cultura
  .bloco-destaque-cultura
    background-color: map-get($categories, "cultura")
    p
      color: #fff
    .col-md-4
      padding-right: 0
      text-align: right
      right: -15px

      @media (max-width: $screen-lg)
        right: 23px
      @media (max-width: $screen-md)
        right: 0
        padding-bottom: 20px
        text-align: center
      @media (max-width: $screen-xs)
        img
          width: 100%

  .col-cultura
    padding: 35px
    @media (min-width: $screen-md)
      padding-bottom: 28px

.category-title
  background-position: 5px 50%
  background-repeat: no-repeat
  background-size: 40px


// ------------------------------------
// 9 - Alto Contraste
// ------------------------------------

.contraste
  background-color: #000
  color: #fff
  .background
    background-color: #000
  // .container
  h2,h3,h4,a,p,strong,li,label,.label,.login i,.total,.updated-at span
    color: #fff
  a
    text-decoration: underline
  small
    color: darken(#fff, 40%)
  blockquote
    border-color: #fff
  .button,.show_body a,.login input.button,.box-category li
    background-color: #fff
    border-color: darken(#fff, 40%)
    color: #000
    text-decoration: none
    +hover(#fff, 40%)
    span
      color: #000
  .icon
    color: #000 !important
    text-decoration: none
    background-color: #fff
    +hover(#fff,40%)
    &-vote
      border-color: darken(#fff, 40%) !important
    @each $category,$color in $categories
      &-#{$category}
        background-image: url(images/icons/#{$category}-contrast.png)
  .tab
    a
      background-color: darken(#fff, 85%)
      border-bottom-color: #fff
    .active
      background-color: #000
      border-color: #fff
      border-bottom-color: #000
  #proposal-categories,#proposal-group
    border-color: #fff
  .proposal
    &-category
      a
        background-color: darken(#fff, 85%) !important
      .arrow-box:after
        border-bottom-color: darken(#fff, 85%) !important
    &-container
      background-color: #000
      +hover(#fff,100%)
    &-header
      .title, p
        background-color: darken(#fff, 85%)
  .box
    background-color: darken(#fff, 85%)
    text-decoration: none
    &-header
      background-color: darken(#fff, 85%)
    &-propostas
      border-color: #fff
    &-title,&-subtitle,&-info,&-bottom,.social span,&-header
      color: #fff
    .icon span
      color: #000 !important
  .select
    background-color: darken(#fff, 85%)
  section
    background-color: darken(#fff, 85%)
    &:hover
      background-color: darken(#fff, 85%)
    .box
      background-color: #000
  table
    .position a
      background-color: #000
  .votes-for .fa,.votes-against .fa
    background-color: #000
  th,td
    background-color: #000
    border-color: #fff
    color: #fff
  .slick
    &-prev,&-next
      color: #fff
    &-slider
      li
        background-color: #000
      .date,.time
        color: #fff
  .bloco-destaque
    background: darken(#fff, 85%)
  @each $category,$color in $categories
    .category-#{$category}
      background-color: darken(#fff, 85%)

  #login-panel
    input
      color: #000

// ------------------------------------
// 10 - mobile
// ------------------------------------
@media (max-width: $screen-xs)
  #content
    // margin-top: $gutter * 1.5 * (-1)
    margin-bottom: 0
    .embed-responsive
      margin-left: $gutter * (-1)
      margin-right: $gutter * (-1)
      iframe
        left: 0 !important

  // .themes
  //   margin-bottom: $gutter * 1.5
  //   margin-left: $gutter * 1.5 * (-1)
  //   margin-right: $gutter * 1.5 * (-1)
  //   margin-top: $gutter * 1.5 * (-1)
  //   font-size: 0
  //   &-name
  //     display: block
  //     width: 100%
  //   &:after
  //     content: ""
  //     display: block
  //     clear: both
  //   li
  //     display: block
  //     width: 25%
  //     float: left
  //     // font-size: $font-size-base
  //     // vertical-align: top
  //     &:first-child
  //       a
  //         border-left: 0
  //     a
  //       border-left: 1px solid #f1f1f1
  //       display: block
  //       padding: 0
  //       text-align: center
  //       height: 145px
  //       .icon
  //         margin-bottom: $gutter * 0.5
  //         margin-left: 0
  //         margin-right: 0
  //         margin-top: $gutter
  .box
    &-header
      p
        height: auto
    &-propostas
      height: auto
  .proposal
    &-header
      .title
        margin: 0
        padding-bottom: 0
        position: inherit
        width: 100%
      p
        padding-bottom: $gutter
  .proposal-list
    .proposal-item,
    .box__title,
    .box__abstract p
      height: auto !important
  .select
    .proposal
      &-selection
        float: none
        margin: 0
        width: 100%
  table
    .position
      a
        margin-left: 0
        margin-top: 5px

// content
.vcenter
  display: inline-block
  vertical-align: middle
  float: none
  margin-right: -2px
  margin-left: -2px

// HACK IDG
#barra-brasil .brasil-flag
  height: 100% !important