@import bootstrap
@import dashboard
@import simplemde.min

$grey-dark: #555
$grey-med: #999

// external dependencies
@import font-awesome
@import datatables.min
@import selectize
@import selectize.default

.icon-space-r
  margin-right: 0.5em

.icon-space-l
  margin-left: 0.5em

.icon-space-r-half
  margin-right: 0.25em

.icon-space-l-half
  margin-left: 0.25em

// .manage
//   padding-left: 20px
//   padding-right: 20px
//   padding-top: 50px

//   .container-half, .container-full
//     max-width: none
//     @media (max-width: 600px)
//       padding-left: 0
//       padding-right: 0
//   .container-half
//     display: inline-block
//     width: 49.6% // weird issue with percentaces
//     vertical-align: top
//     @media (max-width: 600px)
//       width: 100%
//   .container-full
//     display: inline-block
//     width: 100%
//     vertical-align: top
//     margin: 0

// #manageNav
//   z-index: 1
//   width: 100%
//   background: $black
//   color: $white
//   padding: 16px 20px 6px
//   p, a
//     margin: 0 5px 10px
//   p
//     color: $primary
//     display: inline-block
//     margin-top: 0
//     &:first-child
//       margin-right: 10px
//   a
//     color: $white
//     display: inline-block
//     &:hover
//       color: darken($grey-light, 5%)

.land
  fill: #dadada

.border
  fill: none
  stroke: #eee
  stroke-linejoin: round
  stroke-linecap: round
  stroke-width: 2px

.county
  fill: $primary
  fill-opacity: .5
  stroke: #eee
  stroke-width: .5px

.county :hover
  stroke: #000

#map
  text-align: center

.dashboard-container-title
  border-bottom: 3px solid #e5e5e5
  padding: 9px 12px
  margin-top: 12px
  margin-bottom: 8px

.graph-overlay
  text-align: center
  vertical-align: top
  position: absolute
  z-index: 1
  background: rgba(#ffffff,0.86)
  margin-left: 33px
  padding: 0 6%
  height: 136px
  h3
    color: $black
    font-weight: 500
    margin: 1.2em 0 0
  p
    font-size: 14px
    margin: 0.5em 0 1.2em
  &.double-metrics
    h3
      margin-top: 0.45em
      font-size: 21px
    p
      font-size: 13px
      margin-top: 0.3em

.chart-details
  list-style: none
  margin: 0 0 10px
  padding: 0
  li
    margin: 0
    padding: 2px
    display: inline-block
    width: 49%
    font-size: 15px

.email-preview
  width: 100%
  border: 2px solid $grey-med
  min-height: 800px

.email-preview-in-simplemde
  margin: -10px
  border: none
  width: calc(100% + 20px)
  height: calc(100% + 20px)

.editor-toolbar.fullscreen
  z-index: 1031 // in front of the navbar

/*
 * Mobile nav
 */

.navbar-mobile-toggle
  display: none
  overflow: visible
  transition: all 150ms ease-out
  @media (max-width: 768px)
    display: inherit

.navbar-mobile-toggle--active
  color: black !important
  background: #eee

.sidebar-mobile
  display: block !important
  bottom: auto


.sidebar-mobile .sidebar-sticky
  height: auto

/*
 * Datatable changes
 */
@media (max-width: 768px)
  div.dataTables_wrapper div.dataTables_filter input
    font-size: 16px