@font-face
  font-family: 'Nexa Free'
  src: asset-url('maily_herald/webui/Nexa_Free_Bold-webfont.eot')
  src: asset-url('maily_herald/webui/Nexa_Free_Bold-webfont.eot?#iefix') format('embedded-opentype')
  src: asset-url('maily_herald/webui/Nexa_Free_Bold-webfont.woff') format('woff')
  src: asset-url('maily_herald/webui/Nexa_Free_Bold-webfont.ttf') format('truetype')
  font-weight: bold
  font-style: normal

@font-face
  font-family: 'Open Sans'
  src: asset-url('maily_herald/webui/opensans-regular-webfont.eot')
  src: asset-url('maily_herald/webui/opensans-regular-webfont.eot?#iefix') format('embedded-opentype')
  src: asset-url('maily_herald/webui/opensans-regular-webfont.woff') format('woff')
  src: asset-url('maily_herald/webui/opensans-regular-webfont.ttf') format('truetype')
  font-weight: normal
  font-style: normal

@font-face
  font-family: 'Open Sans'
  src: asset-url('maily_herald/webui/opensans-italic-webfont.eot')
  src: asset-url('maily_herald/webui/opensans-italic-webfont.eot?#iefix') format('embedded-opentype')
  src: asset-url('maily_herald/webui/opensans-italic-webfont.woff') format('woff')
  src: asset-url('maily_herald/webui/opensans-italic-webfont.ttf') format('truetype')
  src: asset-url('maily_herald/webui/opensans-italic-webfont.svg#nexa_boldregular') format('svg')
  font-weight: normal
  font-style: italic

@font-face
  font-family: 'Open Sans'
  src: asset-url('maily_herald/webui/opensans-bold-webfont.eot')
  src: asset-url('maily_herald/webui/opensans-bold-webfont.eot?#iefix') format('embedded-opentype')
  src: asset-url('maily_herald/webui/opensans-bold-webfont.woff') format('woff')
  src: asset-url('maily_herald/webui/opensans-bold-webfont.ttf') format('truetype')
  src: asset-url('maily_herald/webui/opensans-bold-webfont.svg#nexa_boldregular') format('svg')
  font-weight: normal
  font-style: italic

@font-face
  font-family: 'FontAwesome'
  src: asset-url('maily_herald/webui/fontawesome-webfont.eot?v=4.2.0')
  src: asset-url('maily_herald/webui/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), asset-url('maily_herald/webui/fontawesome-webfont.woff?v=4.2.0') format('woff'), asset-url('maily_herald/webui/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), asset-url('maily_herald/webui/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg')
  font-weight: normal
  font-style: normal

// Variable
$font_open: 'Open Sans', sans-serif

$font_nexa: 'Nexa Free', sans-serif

// General
body 
  font-family: $font_open
  //font-size: 14px
  //line-height: 1.5
  color: #4b4847
  background-color: #e7e2db

// Headlines 
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 
  text-transform: uppercase
  margin: 0 0 20px
  font-family: $font_nexa
  font-weight: bold
  &.border 
    border-bottom: 2px solid #cbc6bf
    padding-bottom: 5px
  small 

  &.red
    color: #a51421
  a.link 
    position: relative
    display: inline-block
    padding: 0 0 0 10px
    margin: 0 0 0 10px
    &:before
      content: '·'
      color: #969291
      font-family: $font_nexa
      position: absolute
      left: -3px
      top: 0
    &.link-sm 
      font-size: 70%
    &.link-help 
      color: #bbb
      &:hover
        color: #000
h1, .h1
  a.link 
    &.link-sm 
      font-size: 60%

span.translation_missing
  color: #f00

.hero
  .logo
    height: 50px
    margin: 0 auto
  .breadcrumb
    margin: 0
    li
      line-height: 50px

h1, .h2
  font-size: 21px
h2, .h2
  font-size: 17px
h3, .h3
  font-size: 14px
h4, .h4
  font-size: 12px  


// Links 
a
  color: #e4554f
  &:hover, &:focus
    color: #ff7067
    text-decoration: none
  &:active 
    color: #a51421

  &.alternative
    color: #634a4d
    &:hover
      color: #957a7c
    &:active 
      color: #4a3335
.btn-link
  color: #e4554f
  &:hover, &:focus
    color: #ff7067
    text-decoration: none
  &:active 
    color: #a51421

a.disabled
  color: #c8c8c8 !important
  i.fa
    animation: 2s linear 0s normal none infinite fa-spin
  i.fa:before
    content: "" !important
a.error
  color: #f00 !important
  i.fa:before
    content: "" !important

em 
  font-style: italic

strong
  font-weight: 700

hr
  border-top: 2px solid #cbc6bf

p 
  margin: 0 0 20px

pre
  background: #e7e2db
  font-size: 12px
  border: 1px solid #cbc6bf
  border-radius: 0
  max-height: 400px
  white-space: pre-wrap

.no-margin 
  margin-bottom: 0

// Breadcrumbs
.breadcrumb
  background: none
  padding: 0
  > li 
    + li 
      &:before 
        content: '>'
        font-family: $font_nexa
        color: #969291
    a 
      color: #e4554f
      &:hover 
        color: #ff7067
  > .active 
    color: #1f1d1c

// Pagination 
.pagination-wrapper
  text-align: right
.pagination
  border: 1px solid #e7e2db
  > li
    > a
      border: 1px solid #e7e2db
      color: #634a4d
      &:hover 
        color: #957a7c

    &:first-child
      > a, > span
        border-bottom-left-radius: 2px
        border-top-left-radius: 2px

    &:last-child 
      > a, > span 
        border-top-right-radius: 2px
        border-bottom-right-radius: 2px

  > .active 
    > a, > span
      background: #e7e2db
      color: #4a3335
      border-color: #e7e2db
  span 
    position: relative
    float: left
    margin-left: -1px
    line-height: 1.428571429
    text-decoration: none
    background-color: #fff
    border: 1px solid #e7e2db
    color: #634a4d
    font-weight: 700
    &.first 
      margin-left: 0
    &.current 
      background: #e7e2db
      padding: 10px 15px
      color: #4a3335
    a
      color: #634a4d
      padding: 10px 15px
      display: inline-block
      &:hover 
        color: #957a7c



// Buttons
button i
  margin-right: 5px

.btn
  border-radius: 2px
  position: relative

.btn-webui
  text-transform: uppercase
  color: #fff
  font-weight: bold
  background: #e4554f
  padding: 6px 20px
  box-shadow: 0px 5px 0 #a51421
  &:hover
    background: #ff7067 !important
    color: #fff
  &:active 
    background: #e4554f !important
    box-shadow: 0px -5px 0 #a51421
    color: #fff
    top: 5px
  .glyphicon 
    color: #cbc6bf

.btn-webui-alternative 
  text-transform: uppercase
  color: #fff
  font-weight: bold
  background: #634a4d
  padding: 6px 20px
  box-shadow: 0px 5px 0 #4a3335
  &:hover 
    background: #957a7c
    color: #fff
  &:active 
    background: #634a4d
    box-shadow: 0px -5px 0 #4a3335
    color: #fff
    top: 5px

// Nav
.context-menu
  text-align: right
  margin: 0 0 20px
  form
    display: inline-block

.nav 
  &.nav-main 
    > li 
      float: left
      font-family: $font_nexa
      font-weight: bold
      > a 
        border-radius: 0
        text-transform: uppercase
        color: #634a4d
        font-weight: bold
        padding: 15px 20px
        color: #e4554f
        &:hover 
          background: none
          color: #ff7067
      &.active 
        > a 
          background: #fff
          color: #634a4d

  &.nav-secondary 
    border-radius: 2px
    border: 2px solid #cbc6bf
    display: inline-block
    background: #fff
    > li 
      float: left
      position: relative
      margin: 0 1px 0 0
      &:after 
        content: '·'
        color: #969291
        font-family: $font_nexa
        position: absolute
        right: -2px
        top: 28%
      &:last-child 
        margin: 0
        &:after 
          display: none
      a 
        text-transform: uppercase
        font-weight: bold
        float: left
        padding: 5px 15px
        &:hover 
          background: none
          color: #ff7067
      &.active 
        > a
          background: none
          color: #634a4d

      strong 
        display: block
        padding: 10px 0 10px 15px
        float: left

  &.nav-justified 
    > li 
      float: none

.glyphicon 
  color: #634a4d
  font-size: 12px

// Dropdown
.dropdown 
  background: #fff
  display: inline-block
  > a 
    text-decoration: none
    color: #634a4d
    outline: none
    line-height: 38px
    span 
      display: inline-block
      padding: 0 50px 0 20px
      background: asset-url('maily_herald/webui/sprite-dropdown.png') no-repeat
      background-position: 100% 0
      min-height: 40px
  &.open
    > a 
      span 
        background-position: 100% 100%

.dropdown-menu 
  border-radius: 0
  width: 100%
  border: none
  margin: 20px 0 0
  padding: 20px 0
  box-shadow: none
  //left: 0 !important
  &:before 
    content: ''
    position: absolute
    top: -10px
    left: 50%
    margin-left: -5px
    width: 0
    height: 0
    border-left: 10px solid transparent
    border-right: 10px solid transparent
    border-bottom: 10px solid white
  > li 
    a 
      font-size: 12px
      line-height: 20px
      color: #e4554f
      padding: 0 20px


// Table
.table-listing
  > thead 
    > tr
      > th
        border-bottom: 3px solid #cbc6bf
        padding: 10px 20px 10px 0
  > tbody
    > tr
      > td
        border-bottom: 1px solid #cbc6bf
        padding: 10px 20px 10px 0
      &:last-child 
        > td 
          border-bottom: 3px solid #cbc6bf


// Forms

form, .form-horizontal
  ::-webkit-input-placeholder
    color:    #b0b0b0
  \:-moz-placeholder
    color:    #b0b0b0
    opacity:  1
  ::-moz-placeholder
    color:    #b0b0b0
    opacity:  1
  \:-ms-input-placeholder
    color:    #b0b0b0

  label
    font-weight: normal
  input
    &[type='text'], &[type='email'], &[type='password']
      //line-height: 22px
      //height: 30px
      border: 2px solid #969291
      //padding: 0 10px
      //min-width: 180px
      //outline: none
      //background-color: #fff
      //border-radius: 3px
      &:focus 
        border-color: #ff7067 
    &[type='submit']

  textarea 
    border: 2px solid #969291
    background-color: #fff
    border-radius: 3px
    outline: none
    padding: 5px 10px
    &:focus 
      border-color: #ff7067
  .select-wrap
    position: relative
    display: inline-block
    background: asset-url('maily_herald/webui/sprite-dropdown.png') no-repeat
    background-position: 100% 0
    height: 40px
    min-width: 202px
    overflow: hidden
    border: 2px solid #969291
    border-radius: 3px
    &.select-btn 
      background-position: 100% 95%
  select
    height: 38px
    border: none
    padding: 7px 0 6px 10px
    width: 107%
    outline: none
    border-radius: 0
    overflow: hidden
    outline: none
    -webkit-appearance: none
    -moz-appearance: none
    appearance: none
    background-color: transparent
    background-image: none
  .field_with_errors, .has-error
    input
      &[type='text'], &[type='email'], &[type='password']
        border-color: #a51421
    select, .select-wrap
      border-color: #a51421

.radio, .checkbox 
  padding-left: 0
  display: inline-block
  padding-right: 21px
  .webui-input, .radio-btn, .check-box 
    display: inline-block
    float: left
  > label
    padding-left: 2px

.checkbox 
  color: #4b4847
  font-size: 14px
  cursor: pointer
  input[type='checkbox'] 
    visibility: hidden
  .checkbox-wrap
    display: inline-block
    width: 20px
    height: 20px
    margin: 0 10px 0 0
    vertical-align: middle
    background: asset-url('maily_herald/webui/sprite-form.png') no-repeat 0 0
    cursor: pointer
    outline: none
    &.checkbox-checked
      background-position: -29px 0
  &.field_with_errors, &.has-error
    .check-box
      background-position: -60px 0
      &.checkbox-checked
        background-position: -29px 0  

.radio
  color: #4b4847
  font-size: 14px
  cursor: pointer
  position: relative

  input[type='radio']
    visibility: hidden
  > .radio-btn
    display: inline-block
    width: 20px
    height: 20px
    margin: 0 10px 0 0
    vertical-align: middle
    background: asset-url('maily_herald/webui/sprite-form.png') no-repeat 0 -45px
    cursor: pointer
    outline: none
    &.radio-checked 
      background: asset-url('maily_herald/webui/sprite-form.png') no-repeat -29px -45px
  &.field_with_errors, &.has-error
    > .radio-btn
      background-position: -60px -45px
      &.radio-checked 
        background: asset-url('maily_herald/webui/sprite-form.png') no-repeat -29px -45px

.input-group
  .input-group-btn
    .btn
      border: 2px solid #969291
      padding: 5px 12px
      i
        margin: 0
    &:last-child > .btn, &:last-child > .btn-group
      margin-left: -2px
  .input-group-addon
    border: 2px solid #969291
    border-left: none


// Modal
.modal
  background: rgba(#634a4d, .6)
.modal-dialog
  width: 800px

.modal-content
  border-radius: 0
  top: 30px
  .modal-header
    background: #fff
    border-bottom: 2px solid #cbc6bf
    h3
      margin: 0
    .close  
      color: #e4554f
      font-family: $font_nexa
      font-size: 30px
      opacity: 1
      &:hover
        opacity: .5
  .modal-footer
    border-top: none
#modal-confirmation
  .modal-dialog
    width: 400px

// Tooltip
.tooltip
  position: absolute
  z-index: 1030
  display: block
  font-size: 12px
  line-height: 1.4
  opacity: 0
  filter: alpha(opacity = 0)
  visibility: visible
  &.in
    opacity: 1
    filter: alpha(opacity = 1)
  &.top
    padding: 5px 0 8px
    margin-top: -4px
  &.right
    padding: 0 5px 0 8px
    margin-left: 4px
  &.bottom
    padding: 8px 0 5px
    margin-top: 4px
  &.left
    padding: 0 8px 0 5px
    margin-left: -4px

.tooltip-inner
  font-family: $font_open
  font-weight: normal
  text-transform: none
  max-width: 400px
  min-width: 200px
  padding: 15px 15px
  color: #4b4847
  text-align: left
  text-decoration: none
  background-color: #fff
  border-radius: 0
  border: 2px solid #634a4d
  white-space: normal

.tooltip-arrow
  position: absolute
  width: 20px 
  height: 10px
  border: none !important

.tooltip
  &.top .tooltip-arrow
    bottom: 0
    left: 50%
    margin-left: -10px
    background: asset-url('maily_herald/webui/arrow-top.png') no-repeat
  &.top-left .tooltip-arrow
    width: 10px
    height: 20px
    bottom: 0
    left: 10px
    background: asset-url('maily_herald/webui/arrow-left.png') no-repeat
  &.top-right .tooltip-arrow
    width: 10px
    height: 20px
    right: 10px
    bottom: 0
    background: asset-url('maily_herald/webui/arrow-right.png') no-repeat
  &.right .tooltip-arrow
    width: 10px
    height: 20px
    top: 50%
    left: 0
    margin-top: -10px
    background: asset-url('maily_herald/webui/arrow-right.png') no-repeat
  &.left .tooltip-arrow
    width: 10px
    height: 20px
    top: 50%
    right: 0
    margin-top: -10px
    background: asset-url('maily_herald/webui/arrow-left.png') no-repeat
  &.bottom .tooltip-arrow
    top: 0
    left: 50%
    background: asset-url('maily_herald/webui/arrow-bottom.png') no-repeat
    margin-left: -10px
  &.bottom-left .tooltip-arrow
    width: 10px
    height: 20px
    top: 0
    left: 10px
    background: asset-url('maily_herald/webui/arrow-left.png') no-repeat
  &.bottom-right .tooltip-arrow
    width: 10px
    height: 20px
    top: 0
    right: 10px
    background: asset-url('maily_herald/webui/arrow-right.png') no-repeat

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 
  .tooltip.right .tooltip-inner, .popover-content
    font-family: $font_open
    text-transform: none
    text-align: left
    font-weight: normal
    font-size: 14px
.popover-content
  p
    margin-bottom: 10px
  .btn.btn-webui
    padding: 3px 10px
  


// Box
.box 
  border: 2px solid #cbc6bf
  padding: 15px
  background: #fff
  margin: 0 0 20px
  &.darken 
    background: #e7e2db
  &.noborder 
    border: none
  
// dl-horizontal
.dl-horizontal 
  &:last-child 
    margin-bottom: 0
  dt
    color: #969291
    font-weight: 400
    margin: 0 0 5px
    &:last-of-type
      margin: 0

// Custom
.hero
  padding: 20px 0
  h1 
    margin: 0
    line-height: 38px

.content-container 
  padding: 40px
  background: #fff
  margin: 0 0 20px
  .breadcrumb 
    line-height: 45px

.smart-listing 
  margin-bottom: 30px
  .pagination 
    margin: 0 0 5px
  .pagination-per-page 
    text-align: right !important
  tr
    td.actions
      &:after
        content: '·'
        padding: 0 7px
        //color: #b1b1b1
        color: #e4554f
        //margin-left: -10px
        margin-left: -22px
      .text-muted
        color: #aaa
    &:hover
      td.actions
        &:after
          display: none
      td
        background-color: #f3f3f3 !important
      td.actions
        .action-group
          visibility: visible
          &:before
            visibility: visible
    td.actions
      white-space: nowrap
      text-align: right
      a.show
        display: inline !important
      .action-group
        display: inline-block
        visibility: hidden
        &:before
          content: '·'
          color: #e4554f
          font-family: $font_nexa
          padding: 0 5px
          visibility: hidden
        &:first-child:before
          display: none

// Search
.filter-search 
  position: relative
  display: inline-block
  input[type='text']
    padding-right: 36px
    max-width: 200px
  input[type='submit'], button
    position: absolute
    top: 0 
    right: 0
    bottom: 0
    background: none
    color: #4b4847
    outline: none !important
    &.disabled
      color: #969291
    &:active 
      box-shadow: none

.footer 
  margin: 0 0 20px
  font-size: 13px
  padding: 0 40px
  color: #777
  strong
    color: #4b4847
    font-weight: normal
  a
    color: #4b4847
    &:hover
      color: #000
  span
    display: inline-block
    &:after 
      content: '·'
      color: #969291
      font-family: $font_nexa
      padding: 0 5px
    &:last-child 
      margin: 0
      &:after 
        display: none


.mailing-mailer
  white-space: nowrap
  i
    margin-right: -5px

.datepicker-dropdown
  width: auto

.statusbox
  text-align: center

.dashboard-periods
  a
    color: #777
    &.active, &:hover
      color: #4b4847