@require "./variables/screen-size.styl"

.subscription-features
  tr
    td
      //height 59px
      vertical-align middle
      text-align center
    th
      max-width: 150px
      font-weight normal
    th.feature-name
      text-align center
      font-weight: bold

.dashed-underline
  border-bottom:1px dashed #000
  text-decoration:none
  cursor: pointer

.buy-gems .form-inline .form-control
  padding:6px

p.resubscribe
  margin-top:20px

.buy-gems a.purchase
  height:25px
  line-height:12px
  font-size:12px
  margin:5px

p.resubscribe a.purchase
  display:block

.buy-gems button.customize-option
  position:relative

.buy-gems .stack-count
  position:absolute
  bottom:-6px
  right:-9px

.buy-gems .gem-count-popover
  display:block;

.buy-gems h3
  margin-top:0px

.buy-gems .well
  margin-top:15px

.noninteractive-button
  padding: 0.5em
  margin-right: 0.5em

// Required by angular-ui-bootstrap
.nav, .pagination, .carousel, .panel-title a
  cursor: pointer

.nav-tabs
  margin-bottom: 15px

img
  max-width: 100%

.hint
  border-bottom:1px dotted #009999
  text-decoration: none
  cursor: help
a.hint
  border-bottom:1px dotted #009999
  text-decoration: none
  cursor: pointer
a.hint:hover
  text-decoration: none;
.vertical-20
  vertical-align: 20%

.popover
  hr
    margin: 10px 0

ul
  list-style-position: inside;

li.spaced
  margin: auto auto .5em 3em

.group-leave-join
  .glyphicon-ban-circle
    color: white;
    margin-right: 5px;

@media (max-width: $xs-max-screen-width)
  .container-fluid
    padding-right: 5px
    padding-left: 5px
    > .row
      margin-left: -5px
      margin-right: -5px
  .tasks-lists .row .col-md-3
    padding-right: 0
    padding-left: 0

.flex-column
  display: flex
  flex-direction: column

.row-margin
  margin: auto auto 1em auto

.reduce-top-margin
  margin-top: -10px

.slight-right-margin
  margin-right: 1em