$primary-color: #525b68
$secondary-color: darken(#525b68, 10%)
$third-color: #121929
$fouth-color: lighten(#525b68, 5%)
$font-color: #EFEFEF
$font-hover-color: #FFF
$font-headings: #6f6f6f
$bg-color: #f2f2f2
$high-light-color: #f94d1c
$high-light-font: #FFF//darken(#f94d1c, 35%)
$danger-color: #f46b5d
$focus-color: $font-hover-color

html
  font-family: 'Open Sans', sans-serif
  font-size: 12px
  height: 100%
  font-family: 'Open Sans', sans-serif
  font-weight: 100
  background: $primary-color

body
  font-family: 'Open Sans', sans-serif
  font-weight: 100
  background: $primary-color

ul
  li
    list-style: none outside none
  margin: 0
  padding: 0

ol
  margin: 0
  padding: 0

h1, h2, h3, h4, h5, h6
  margin: 10px 0

h1
  line-height: 43px

h2
  line-height: 35px

h3
  line-height: 30px

h4
  line-height: 22px

h3 small, h4 small, h5 small
  font-family: 'Open Sans', sans-serif
  font-weight: 300
  color: #444

h1, h2, h3, h4, h5, h6
  font-family: 'Open Sans', sans-serif
  font-weight: 300
  color: $font-headings

.progress
  .bar
    background: darken(#0f0, 20%)
    min-height: 20px


input[type="file"]
  font-size: 0
  padding: 0
  margin-bottom: 5px

input[type="file"]::-webkit-file-upload-button
  visibility: hidden

input[type="file"]::before
  content: 'Selecionar Arquivo'
  display: inline-block
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3)
  border: 1px solid #999
  border-radius: 3px
  padding: 5px 35px
  outline: none
  white-space: nowrap
  -webkit-user-select: none
  cursor: pointer
  text-shadow: 1px 1px #fff
  font-weight: 700
  font-size: 10pt
  line-height: 10pt
  margin: 3px 5px

input[type="file"]:hover::before
  border-color: black

input[type="file"]:active::before
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9)

input[type="checkbox"]
  width: 30px
  height: 34px
  margin: 0
label.checkbox
  height: 34px
  line-height: 34px
  font-size: 12px !important
  padding-top: 0 !important


.hint, .error
  display: block
  &:first-letter
    text-transform: uppercase

.hint
  color: #505458
.error, li.required
  color: $danger-color

.box-password
  background: $bg-color
  padding: 20px
  margin-bottom: 20px


.alert-success-gallery
  @extend .alert-success

.alert.alert-success, .alert.alert-success-gallery
  display: none
  min-height: 70px
  -webkit-transition: all 0.3s ease-in-out
  -moz-transition: all 0.3s ease-in-out
  transition: all 0.3s ease-in-out




.datepicker.datepicker-dropdown.dropdown-menu
  z-index: 999 !important



#layout-container
  min-height: 100%
  position: relative

#nav
  float: left
  width: 120px
  //min-height: 800px
  background: $primary-color
  color: #465269
  position: absolute

.profile
  overflow: hidden
  position: relative
  //border-bottom: 1px solid $secondary-color
  //background-color: $third-color
  .logo
    margin: 15px 28px
    perspective: 1000px
    color: #b0324a
    text-align: center
    img
      max-width: 71px

ul
  &.navigation
    list-style-type: none
    margin: 0
    padding: 0
    > li
      position: relative
      &.separator
        height: 30px
        line-height: 30px
        text-align: center
        div
          border-radius: 100%
          display: inline-block
          height: 4px
          margin: 0 2px
          width: 4px
      > a
        display: block
        outline: medium none
        overflow: hidden
        padding: 0 5px
        text-align: center
        text-decoration: none
        text-overflow: ellipsis
        transition: color 0.1s linear 0s
        white-space: nowrap
        color: $font-color
        border-bottom: 1px solid $secondary-color
        &:hover, &.active
          background: $high-light-color
          color: $high-light-font
        >
          i
            display: block
            font-size: 20px
            height: 30px
            line-height: 30px
            margin: 10px 0 0
          span
            display: block
            margin-bottom: 10px
            font-size: 12px
  &.navigation-sub
    animation: 0.1s linear 0s normal none 1 submenu
    border: 1px solid $fouth-color
    border-radius: 3px
    display: none
    left: 99%
    list-style-type: none
    margin: 0 0 0 2px
    padding: 0
    position: absolute
    top: 0
    width: 200px
    z-index: 1000
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176)
    &:before
      bottom: 0
      content: ""
      position: absolute
      right: 100%
      top: 0
      width: 10px
  &.navigation > li.sub:hover ul.navigation-sub
    display: block
  &.navigation-sub > li > a
    font-size: 12px
    background: $fouth-color
    color: $font-color
    display: block
    outline: medium none
    padding: 10px 20px
    text-decoration: none
    &:hover, &.active
      background: $primary-color
      color: $font-color
    > i
      display: inline-block
      width: 20px
  &.navigation span.number-alert
    border-radius: 100%
    cursor: default
    height: 20px
    left: 65px
    line-height: 20px
    position: absolute
    top: 0
    width: 20px

.head-title
  font-size: 16px
  height: 75px
  line-height: 70px
  padding: 0 20px
  position: absolute
  width: 100%
  text-overflow: ellipsis
  text-transform: uppercase
  white-space: nowrap
  background-color: $primary-color
  color: $focus-color

.menu-switch
  background: $high-light-color
  color: $high-light-font
  display: none
  cursor: pointer
  height: 41px
  line-height: 41px
  position: absolute
  text-align: center
  width: 41px
  top: 15px
  margin-right: 20px

.rightbar-switch
  background-color: #ff2c44
  color: #FFFFFF
  display: block
  cursor: pointer
  height: 41px
  line-height: 41px
  position: absolute
  text-align: center
  width: 41px
  top: 15px
  margin-right: 20px

#main
  min-height: 100%
  position: relative
  right: 0
  top: 0
  z-index: 20
  background-color: $bg-color
  color: #666666

.margin-container
  overflow: hidden
  position: relative
  z-index: -9999
  width: 100%
  background: $bg-color

.scrollable
  overflow-x: hidden
  overflow-y: auto

.wrapper
  display: inline-block
  margin-top: 75px
  padding: 20px
  width: 100%
  overflow: hidden
  min-height: 1000px

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
  position: static

  .page-search
    margin: 10px 0 20px 0


.user-info
  list-style: none outside none
  margin: 0
  padding: 0
  &:before
    content: " "
    display: table
  &:after
    content: " "
    display: table
    clear: both
  &:before
    content: " "
    display: table
  &:after
    content: " "
    display: table
    clear: both
  > li
    float: left
    margin-right: 24px
    &.profile-info
      //margin-right: 110px

.page-search
  background: $third-color!important
  border: none!important
  margin: 20px 20px 0 -10px
  color: $font-color
  min-height: 32px!important

.profile-info.dropdown
  > a
    color: $font-color
    font-size: 14px
    text-decoration: none
    transition: all 300ms ease-in-out 0s
    &:hover
      color: $bg-color
    img
      border: 2px solid $high-light-color
      margin-right: 5px
  .dropdown-menu
    background-color: $primary-color
    border-color: darken(#525b68, 10%)
    margin-top: 8px
    padding: 0
    > .caret
      border-bottom-color: $secondary-color
      border-bottom-width: 4px
      border-top-width: 0
      left: 20px
      margin-left: -2px
      position: absolute
      top: -4px
    li
      color: $font-color
      font-size: 12px
      padding: 0
      a
        color: $font-color
        padding: 8px 10px
        transition: all 300ms ease-in-out 0s
        i
          margin-right: 5px
          opacity: 0.7
        &:hover
          background-color: $primary-color
          color: #FFFFFF
          i
            opacity: 1
    > li
      border-bottom: 1px solid $secondary-color
      > a
        display: block
        min-width: 170px
      &:last-child
        border-bottom: 0 none
  &.pull-right
    text-align: right
    > a img
      margin-left: 5px
      margin-right: 0
    .dropdown-menu
      background-color: $primary-color
      border-color: $secondary-color
      margin-top: 15px
      padding: 0
      text-align: left
      > .caret
        left: auto
        right: 20px

.pull-margin
  margin-left: -50px

#top_menu .nav > li, ul.top-menu > li
  float: left

.notify-row
  float: left
  margin-top: 25px
  text-transform: none

.notify-arrow
  border-style: solid
  border-width: 0 9px 9px
  height: 0
  left: 7px
  margin-top: 10px
  opacity: 1
  position: absolute
  top: -18px
  transition: all 0.25s ease 0s
  width: 0
  z-index: 10

.notify-arrow-red
  border-bottom-color: $high-light-color !important
  border-left-color: rgba(0, 0, 0, 0)
  border-right-color: rgba(0, 0, 0, 0)
  border-top-color: #FF6C60 !important

.notify-row
  .badge
    position: absolute
    right: -10px
    top: -10px
    z-index: 100
    background: $high-light-color
    color: $high-light-font
  .notification span.label
    display: inline-block
    height: 18px
    padding: 5px
    width: 20px

ul.top-menu > li > a
  color: $font-color
  font-size: 24px
  margin-right: 24px
  padding: 2px 6px
  line-height: 25px
  &:hover
    background: transparent!important
    color: $font-color !important
    text-decoration: none
  &:focus
    background: transparent!important
    color: $focus-color !important
    text-decoration: none

.dropdown-menu.extended
  border: medium none !important
  border-radius: 4px
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.176) !important
  max-width: 300px !important
  min-width: 160px !important
  padding: 0
  top: 48px
  width: 260px !important
  li
    background-color: $bg-color
    color: #666666
    line-height: 50px
    p
      background-color: $bg-color
      color: #666666
      margin: 0
      padding: 0px 10px
      &.red
        background-color: $high-light-color
        color: #FFFFFF

.external a
  background-color: $primary-color!important
  color: #FFFFFF!important
  &:hover
    background-color: #EBEBEB!important
    color: $primary-color!important

.dropdown-menu
  &.extended li a
    padding: 15px 10px !important
    width: 100%
    border-bottom: 1px solid #EBEBEB !important
    font-size: 12px
    list-style: none outside none
    &:hover
      background-color: #F7F8F9 !important
      color: #2E2E2E
  &.tasks-bar .task-info
    .desc
      font-size: 13px
      font-weight: normal
    .percent
      display: inline-block
      float: right
      font-size: 13px
      font-weight: 600
      margin-top: -4px
      padding-left: 10px
  &.extended .progress
    height: 10px
    margin-bottom: 0 !important
  &.inbox li a
    .photo img
      border-radius: 2px
      float: left
      height: 40px
      margin-right: 4px
      width: 40px
    .subject
      display: block
      .from
        font-size: 12px
        font-weight: 600
      .time
        font-size: 11px
        font-style: italic
        font-weight: bold
        position: absolute
        right: 5px
    .message
      display: block !important
      font-size: 11px

.top-nav
  margin-top: 7px
  ul.top-menu > li .dropdown-menu.logout
    width: 268px !important
  li.dropdown .dropdown-menu
    float: right
    left: auto
    right: 0

.dropdown-menu.extended.logout > li
  float: left
  text-align: center
  width: 33.3%
  &:last-child
    background: none repeat scroll 0 0 #A9D96C
    border-radius: 0 0 3px 3px
    float: left
    text-align: center
    width: 100%
    > a
      border-bottom: medium none !important
      color: #FFFFFF
      text-transform: uppercase
      &:hover
        border-bottom: medium none !important
        color: #FFFFFF
        text-transform: uppercase
        > i
          color: #FFFFFF
  > a
    border-bottom: medium none !important
    color: #A4ABBB

.full-width .dropdown-menu.extended.logout > li > a:hover
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important
  color: #50C8EA !important

.dropdown-menu.extended.logout > li > a
  &:hover
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important
    i
      color: #50C8EA
  i
    font-size: 17px
  > i
    display: block

.top-nav
  .username
    color: #555555
    font-size: 13px
  ul.top-menu > li
    > a
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0)
      border: 1px solid #EEEEEE
      border-radius: 4px
      margin-right: 0
      padding: 6px
      &:hover, &:focus
        background: none repeat scroll 0 0 $bg-color
        border: 1px solid $bg-color
    margin-left: 10px
  .dropdown-menu.extended.logout
    top: 50px
  .nav .caret
    border-bottom-color: #A4AABA
    border-top-color: #A4AABA
  ul.top-menu > li > a:hover .caret
    border-bottom-color: #000000
    border-top-color: #000000

.nav .open > a
  background-color: transparent
  &:hover, &:focus
    background-color: transparent

.page-heading
  margin: 0 0 25px
  padding: 5px 0
  h1
    font-size: 24px
    font-weight: 100
    font-family: 'Open Sans', sans-serif
    margin: 0
    padding: 0

.box-info
  background: none repeat scroll 0 0 #FFFFFF
  color: darken($font-headings, 15%)
  margin-bottom: 20px
  padding: 15px
  position: relative
  transition: all 0.4s ease 0s
  &:hover
    color: darken($font-headings, 15%)
  &:before
    content: " "
    display: table
  &:after
    content: " "
    display: table
    clear: both
  .des-thumbnail
    padding: 20px
  .img-wrap
    height: auto
    overflow: hidden
    width: 100%
    img
      width: 100%
  .icon-box
    display: block
    float: left
    font-size: 30px
    width: 65px
  h2
    border-bottom: 1px solid #DDDDDD
    color: #5B5B5B
    display: block
    font-size: 16px
    font-weight: 400
    margin: 5px -15px 20px
    padding: 0 15px 15px
    &.no-style
      border-bottom: medium none
      font-size: 30px
      margin: 20px 0 10px
      padding: 0
  &.box-messages h2
    border-bottom: medium none
  .statistic-chart
    padding: 0 0 30px
  &.full
    padding: 0
    .box-footer
      padding: 20px 20px 15px
      a
        color: #1B1E24
        text-decoration: none
        &:hover
          color: #1B1E24
          text-decoration: none
  .nav-tabs
    background: none repeat scroll 0 0 #1B1E24
    > li > a
      border-color: -moz-use-text-color
      border-radius: 0
      border-style: none
      border-width: medium
      color: #8B91A0
      font-size: 14px
      line-height: 1.42857
      margin: 0
      transition: all 0.4s ease 0s
      i
        color: #FFFFFF
  .media-list
    margin-top: 30px
    a
      color: #1B1E24
      &:hover
        color: #212121
        text-decoration: none
    .media
      border-bottom: 1px solid #EAEAEA
      padding: 5px 20px
    li.media:last-child
      border-bottom: medium none
    .media
      .media-heading
        a
          color: #1B1E24
          font-size: 14px
          font-weight: 600
          margin-right: 5px
        small
          color: #65BD77
          font-size: 11px
      p
        color: #909090
      .media-object
        width: 50px
  .nav-tabs > li.active > a
    background-color: #FFFFFF
    border-color: -moz-use-text-color
    border-style: none
    border-width: medium
    color: #1B1E24
    cursor: default
    &:hover, &:focus
      background-color: #FFFFFF
      border-color: -moz-use-text-color
      border-style: none
      border-width: medium
      color: #1B1E24
      cursor: default
    i, &:hover i, &:focus i
      color: #212121
  .additional-box
    position: absolute
    right: 15px
    top: 10px
    z-index: 99999
  .additional-btn
    position: absolute
    right: 15px
    top: 17px
    z-index: 99999
  .btn-group
    z-index: 9999
  table .btn-group
    z-index: 1
  .additional-btn
    .dropdown-menu
      z-index: 999999
    a.additional-icon
      color: #909090
      cursor: pointer
      margin-left: 10px
      &:hover
        text-decoration: none
  &.success
    background: none repeat scroll 0 0 #65BD77
    color: #FFFFFF
    h2
      border-bottom-color: #3B934B
      color: #2C7439
    &:hover
      color: #DEFFE5
    .additional-btn a.additional-icon
      color: #3B934B
      &:hover
        color: #2C7439
    .text-box h3
      color: #215F2E
    .progress-bar-success
      background-color: #215F2E
    i.success
      color: #215F2E
  &.danger
    background: none repeat scroll 0 0 #D9534F
    color: #FFFFFF
    h2
      border-bottom-color: #791C1A
      color: #791C1A
    &:hover
      color: #FFFFFF
    .additional-btn a.additional-icon
      color: #791C1A
      &:hover
        color: #791C1A
    .text-box h3
      color: #791C1A
    .progress-bar-danger
      background-color: #791C1A
    i.danger
      color: #791C1A
  &.info
    background: none repeat scroll 0 0 #4393D8
    color: #FFFFFF
    h2
      border-bottom-color: #15558B
      color: #15558B
    &:hover
      color: #DEFFE5
    .additional-btn a.additional-icon
      color: #15558B
      &:hover
        color: #15558B
    .text-box h3
      color: #15558B
    .progress-bar-info
      background-color: #15558B
    i.info
      color: #15558B
  &.warning
    background: none repeat scroll 0 0 #F7CB17
    color: #FFFFFF
    h2
      border-bottom-color: #9D5D03
      color: #9D5D03
    &:hover
      color: #DEFFE5
    .additional-btn a.additional-icon
      color: #9D5D03
      &:hover
        color: #9D5D03
    .text-box h3
      color: #9D5D03
    .progress-bar-warning
      background-color: #9D5D03
    i.warning
      color: #9D5D03
  .additional
    background: none repeat scroll 0 0 #FFFFFF
    color: #909090
    margin: 15px -15px -15px
    padding: 0 15px
    .list-box-info
      margin: 0 -15px
      ul
        list-style: none outside none
        margin: 0
        padding: 0
        li
          background: none repeat scroll 0 0 #FFFFFF
          border-bottom: 1px solid #DDDDDD
          color: #909090
          padding: 15px 20px
          span.label
            float: right
            font-size: 13px
          &:last-child
            border-bottom: 1px solid #FFFFFF
  &.full h2
    margin: 5px 0 20px
    padding: 15px
  table
    margin: 0
    tr
      th, td
        padding-left: 15px
        padding-right: 15px
        display: table-cell
        vertical-align: middle
  .text-box h3
    color: #4C5264
    display: block
    font-size: 20px
    font-weight: 600
    margin: 5px 0
    padding: 0

.progress.progress-xs
  border-radius: 0
  box-shadow: none
  height: 5px
  margin-bottom: 15px
  margin-top: 20px

i
  &.success
    color: #5CB85C
  &.danger
    color: #DE3431
  &.info
    color: #428BCA
  &.warning
    color: #FFCE00

#sortable-todo
  margin: 0
  padding: 0

.todo-title
  margin-right: 70px

.to-do-list li
  background: #525b68
  cursor: move
  list-style: none outside none
  margin-bottom: 3px
  padding: 13px
  position: relative
  p
    margin-bottom: 0

.todo-actionlist
  position: absolute
  right: 15px
  top: 13px
  a
    display: inline-block
    float: left
    height: 24px
    width: 24px

.todo-list-active
  background: #ffebe5!important

.todo-actionlist a
  i
    color: #CCCCCC
    display: inline-block
    height: 24px
    line-height: 24px
    text-align: center
    width: 24px
  &:hover i
    color: #666666

.todo-done i
  font-size: 14px

.todo-remove i
  cursor: pointer

.line-through
  text-decoration: line-through

.todo-action-bar
  margin-top: 20px

.drag-marker
  display: block
  float: left
  height: 17px
  position: relative
  top: 2px
  width: 7px
  i
    background: none repeat scroll 0 0 #CCCCCC
    box-shadow: 5px 0 0 0 #cccccc, 0 5px 0 0 #cccccc, 5px 5px 0 0 #cccccc, 0 10px 0 0 #cccccc, 5px 10px 0 0 #cccccc, 0 15px 0 0 #cccccc, 5px 15px 0 0 #cccccc
    display: block
    height: 2px
    width: 2px

.to-do-list li .todo-check input[type="checkbox"]
  visibility: hidden

.todo-check
  margin-left: 10px
  margin-right: 10px
  position: relative
  width: 20px
  label
    border: 1px solid #CCCCCC
    border-radius: 2px
    cursor: pointer
    height: 20px
    left: 0
    position: absolute
    top: 0
    width: 20px
    &:after
      -moz-border-bottom-colors: none
      -moz-border-left-colors: none
      -moz-border-right-colors: none
      -moz-border-top-colors: none
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0)
      border-color: -moz-use-text-color -moz-use-text-color #CFCFCF #CFCFCF
      border-image: none
      border-style: none none solid solid
      border-width: medium medium 3px 3px
      content: ""
      height: 8px
      left: 3px
      opacity: 0
      position: absolute
      top: 3px
      transform: rotate(-45deg)
      width: 13px

.todo-checklabel:hover:after
  opacity: 0.3

.todo-check input[type="checkbox"]:checked + label:after
  opacity: 1

.btn-todo-select button, .btn-add-task button
  width: 100%

.todo-search-wrap
  padding: 0

.todo-search
  border-radius: 3px !important

.box-info h4
  margin-top: 0px

.text-ellipsis
  display: block
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
  width: 100%

.list-group .list-group-item:first-child
  border-top-left-radius: 0
  border-top-right-radius: 0

.list-group-item:last-child
  border-bottom-left-radius: 0px
  border-bottom-right-radius: 0px

.list-group
  //margin-bottom: 0px
  padding-left: 0

.list-group-item
  border: none

.bg-danger
  background-color: #FB6B5B
  color: #FFFFFF

.bg-success
  background-color: #8EC165
  color: #EBF4E4

.bg-light
  background-color: #F1F1F1
  color: #717171

.centered-container
  margin: auto
  width: 180px

.no-bg
  background: none!important
  padding-top: 0px!important

.paper
  background: -moz-linear-gradient(center top, #dfe8ec 0%, white 8%) repeat scroll 0 0 / 100% 30px rgba(0, 0, 0, 0)
  font-size: 14px
  line-height: 30px
  outline: medium none
  padding: 30px 55px 27px
  position: relative
  &:after
    border-left: 1px solid #F8D3D3
    bottom: 0
    content: ""
    left: 39px
    position: absolute
    top: 0
    width: 0

.widget-notes
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.04)
  .content
    padding: 0

.btn
  border-color: #CCCCCC
  border-radius: 0
  font-size: 13px
  margin-bottom: 5px !important
  margin-left: 3px
  outline: medium none
  padding: 7px 11px

.btn-default
  background-color: #fff
  border-color: #ccc
  color: #5E5E5E
  &:focus
    background-color: #fff
    border-color: #ccc
    color: #5E5E5E
  i
    color: #444444
  &:active
    background: none repeat scroll 0 0 #F5F5F5
    box-shadow: none

.btn-round
  border-radius: 30px

.btn-primary
  background-color: darken($primary-color, 15%)
  border-color: rgba(0, 0, 0, 0)
  color: #FFFFFF
  +respond-to(screen-xs)
    margin-top: 5px !important
  &:focus
    background-color: darken($primary-color, 15%)
    border-color: rgba(0, 0, 0, 0)
    color: #FFFFFF
  &:hover, &:active, &.active
    background-color: darken($primary-color, 25%)
    border-color: rgba(0, 0, 0, 0)


.open .dropdown-toggle.btn-primary
  background-color: darken($primary-color, 25%)
  border-color: rgba(0, 0, 0, 0)

.btn-primary:active
  background: none repeat scroll 0 0 darken($primary-color, 15%)
  box-shadow: none

.btn-success
  background-color: #2CC36B
  border-color: rgba(0, 0, 0, 0)
  &:focus
    background-color: #2CC36B
    border-color: rgba(0, 0, 0, 0)
  &:hover, &:active, &.active
    background-color: #36CD75
    border-color: rgba(0, 0, 0, 0)

.open .dropdown-toggle.btn-success
  background-color: #36CD75
  border-color: rgba(0, 0, 0, 0)

.btn-success:active
  background: none repeat scroll 0 0 #22B961
  box-shadow: none

.btn-info
  background-color: #4AA3DF
  border-color: rgba(0, 0, 0, 0)
  &:focus
    background-color: #4AA3DF
    border-color: rgba(0, 0, 0, 0)
  &:hover, &:active, &.active
    background-color: #54ADE9
    border-color: rgba(0, 0, 0, 0)

.open .dropdown-toggle.btn-info
  background-color: #54ADE9
  border-color: rgba(0, 0, 0, 0)

.btn-info:active
  background: none repeat scroll 0 0 #4099D5
  box-shadow: none

.btn-warning
  background-color: #F16E3F
  border-color: rgba(0, 0, 0, 0)
  &:focus
    background-color: #F16E3F
    border-color: rgba(0, 0, 0, 0)
  &:hover, &:active, &.active
    background-color: #FB7849
    border-color: rgba(0, 0, 0, 0)

.open .dropdown-toggle.btn-warning
  background-color: #FB7849
  border-color: rgba(0, 0, 0, 0)

.btn-warning:active
  background: none repeat scroll 0 0 #E76435
  box-shadow: none

.btn-danger
  background-color: #EA6153
  border-color: rgba(0, 0, 0, 0)
  color: #fff
  &:focus
    background-color: #EA6153
    border-color: rgba(0, 0, 0, 0)
    color: #fff
  i
    background-color: #EA6153
    border-color: rgba(0, 0, 0, 0)
    color: #fff
    &:focus
      background-color: #EA6153
      border-color: rgba(0, 0, 0, 0)
      color: #fff
  &:hover, &:active, &.active
    background-color: $danger-color
    border-color: rgba(0, 0, 0, 0)

.open .dropdown-toggle.btn-danger
  background-color: $danger-color
  border-color: rgba(0, 0, 0, 0)

.btn-danger:active
  background: none repeat scroll 0 0 #E05749
  box-shadow: none

.btn-prusia
  background-color: #3D566D
  border-color: rgba(0, 0, 0, 0)
  color: #FFFFFF
  &:focus
    background-color: #3D566D
    border-color: rgba(0, 0, 0, 0)
    color: #FFFFFF
  &:hover, &:active, &.active
    background-color: #476077
    border-color: rgba(0, 0, 0, 0)
    color: #FFFFFF

.open .dropdown-toggle.btn-prusia
  background-color: #476077
  border-color: rgba(0, 0, 0, 0)
  color: #FFFFFF

.btn-prusia:active
  background: none repeat scroll 0 0 #334C63
  box-shadow: none

.btn-dark
  background-color: #23262B
  border-color: rgba(0, 0, 0, 0)
  color: #FFFFFF
  &:focus
    background-color: #23262B
    border-color: rgba(0, 0, 0, 0)
    color: #FFFFFF
  &:hover, &:active, &.active
    background-color: #2D3035
    border-color: rgba(0, 0, 0, 0)
    color: #FFFFFF

.open .dropdown-toggle.btn-dark
  background-color: #2D3035
  border-color: rgba(0, 0, 0, 0)
  color: #FFFFFF

.btn-dark:active
  background: none repeat scroll 0 0 #191C21
  box-shadow: none

.btn-rad
  border-radius: 2px

.btn-group.horizontal > .btn
  border-color: rgba(0, 0, 0, 0.08)

.btn i
  display: inline-block
  font-size: 14px
  margin-right: 2px
  min-width: 10px

.btn-row
  margin-bottom: 10px

.btn-facebook i
  color: #3B5998

.btn-twitter i
  color: #00ACED

.btn-google-plus i
  color: #DD4B39

.btn-dribbble i
  color: #EA4C89

.btn-linkedin i
  color: #0E76A8

.btn-youtube i
  color: #C4302B

.btn-pinterest i
  color: #C8232C

.btn-tumblr i
  color: #34526F

.btn-flickr i
  color: #FF0084

.btn-facebook.bg
  background: none repeat scroll 0 0 #3B5998
  border: 0 none
  color: #FFFFFF

.btn-twitter.bg
  background: none repeat scroll 0 0 #00ACED
  border: 0 none
  color: #FFFFFF

.btn-google-plus.bg
  background: none repeat scroll 0 0 #DD4B39
  border: 0 none
  color: #FFFFFF

.btn-dribbble.bg
  background: none repeat scroll 0 0 #EA4C89
  border: 0 none
  color: #FFFFFF

.btn-linkedin.bg
  background: none repeat scroll 0 0 #0E76A8
  border: 0 none
  color: #FFFFFF

.btn-youtube.bg
  background: none repeat scroll 0 0 #C4302B
  border: 0 none
  color: #FFFFFF

.btn-pinterest.bg
  background: none repeat scroll 0 0 #C8232C
  border: 0 none
  color: #FFFFFF

.btn-tumblr.bg
  background: none repeat scroll 0 0 #34526F
  border: 0 none
  color: #FFFFFF

.btn-flickr.bg
  background: none repeat scroll 0 0 #0063DC
  border: 0 none
  color: #FFFFFF

.btn-github.bg
  background: none repeat scroll 0 0 #333333
  border: 0 none
  color: #FFFFFF

.btn-facebook.bg
  &:active, &.active
    background: none repeat scroll 0 0 #274584

.btn-twitter.bg
  &:active, &.active
    background: none repeat scroll 0 0 #0098D9

.btn-google-plus.bg
  &:active, &.active
    background: none repeat scroll 0 0 #C93725

.btn-dribbble.bg
  &:active, &.active
    background: none repeat scroll 0 0 #D63875

.btn-linkedin.bg
  &:active, &.active
    background: none repeat scroll 0 0 #006294

.btn-youtube.bg
  &:active, &.active
    background: none repeat scroll 0 0 #B01C17

.btn-pinterest.bg
  &:active, &.active
    background: none repeat scroll 0 0 #B40F18

.btn-tumblr.bg
  &:active, &.active
    background: none repeat scroll 0 0 #203E5B

.btn-flickr.bg
  &:active, &.active
    background: none repeat scroll 0 0 #004FC8

.btn-github.bg
  &:active, &.active
    background: none repeat scroll 0 0 #1F1F1F

.btn
  &.bg i
    color: #FFFFFF
  &:active, &.active
    box-shadow: none
  &:focus
    outline: medium none

.btn-group.btn-blurbg
  background: url("../images/blur_bg.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0)
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15)
  margin-bottom: 20px
  padding: 40px

.btn.btn-transparent
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2)
  border-color: white rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.5)
  border-style: solid
  border-width: 1px
  color: #FFFFFF
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35)
  &:hover
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.32)

.panel
  background-color: #FFFFFF
  border-radius: 0px!important
  box-shadow: none!important

.nav-tabs
  border-bottom: 0px
  > li.active > a
    border: none
    &:hover, &:focus
      border: none

//tab start
.tab-content
  background: none repeat scroll 0 0 #FFFFFF
  border: 0px
  border-radius: 0px
  margin-bottom: 40px
  padding: 20px
  h3
    margin-top: 0
    padding: 0
  #picture .fileinput .thumbnail
    border: 0px
    h2
      position: relative
      top: 30%
  h3
    margin-top: 0

h2, h1:first-child
  margin-top: 0

.tab-bottom
  .nav-tabs
    margin-bottom: 40px
  .tab-content
    margin-bottom: 0
  .nav-tabs > li.active > a
    &:after, &:hover:after, &:focus:after
      bottom: 0
      top: auto
    border-bottom: 2px solid #f13e3e
    border-top: 0 none
    margin-top: -1px
    &:hover, &:focus
      border-bottom: 2px solid #f13e3e
      border-top: 0 none
      margin-top: -1px
  .tab-content
    border-radius: 3px 3px 3px 0

.tab-left
  .nav-tabs
    float: left
    > li
      float: none
      margin-bottom: 0
      margin-right: 0
      > a
        border-radius: 0
        min-width: 38px
        padding: 12px 10px
        text-align: left
      .fa
        font-size: 14px
      &.active > a
        &:after, &:hover:after, &:focus:after
          bottom: 0
          height: 100%
          top: auto
          width: 2px
        border-color: -moz-use-text-color -moz-use-text-color #EFEFEF #f13e3e
        border-style: none none solid solid
        border-width: 0 0 1px 2px
        box-shadow: -1px 3px 4px -3px rgba(0, 0, 0, 0.08)
        margin-right: -1px
        padding: 13px 10px 12px 9px
        &:hover, &:focus
          border-color: -moz-use-text-color -moz-use-text-color #EFEFEF #f13e3e
          border-style: none none solid solid
          border-width: 0 0 1px 2px
          box-shadow: -1px 3px 4px -3px rgba(0, 0, 0, 0.08)
          margin-right: -1px
          padding: 13px 10px 12px 9px
  .tab-content
    border-radius: 0 3px 3px
    overflow: auto

.tab-right
  .nav-tabs
    float: right
  .tab-content
    border-radius: 3px 0 3px 3px
    overflow: auto
  .nav-tabs > li
    float: none
    margin-bottom: 2px
    margin-right: 0
    > a
      min-width: 38px
      padding: 12px 10px
      text-align: left
    .fa
      font-size: 14px
    &.active > a
      &:after, &:hover:after, &:focus:after
        bottom: 0
        height: 100%
        left: auto
        right: 0
        top: auto
        width: 2px
      border-color: -moz-use-text-color #f13e3e #EFEFEF -moz-use-text-color
      border-style: none solid solid none
      border-width: 0 2px 1px 0
      box-shadow: 1px 3px 4px -3px rgba(0, 0, 0, 0.08)
      margin-left: -1px
      padding: 13px 10px 12px 12px
      &:hover, &:focus
        border-color: -moz-use-text-color #f13e3e #EFEFEF -moz-use-text-color
        border-style: none solid solid none
        border-width: 0 2px 1px 0
        box-shadow: 1px 3px 4px -3px rgba(0, 0, 0, 0.08)
        margin-left: -1px
        padding: 13px 10px 12px 12px

//tab end

.accordion
  margin-bottom: 40px
  .panel-heading
    background: none repeat scroll 0 0 #FFFFFF
    padding: 0
    a
      color: #e74949
      display: block
      font-size: 15px
      padding: 17px 16px
      &:hover
        text-decoration: none!important
      .fa
        margin-right: 10px
        transform: rotate(90deg)
        transition: transform 200ms ease-in-out 0s
      &.collapsed
        color: #555555
        .fa
          transform: rotate(0deg)
    + .panel-collapse .panel-body
      border-top: 0 none
      padding: 3px 20px 20px 34px
  .panel
    border-color: -moz-use-text-color #EFEFEF
    border-radius: 2px
    border-style: none solid
    border-width: 0 1px
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.04)
    margin-bottom: 5px
    &:first-child
      border-top: 0 none
  &.panel-group .panel + .panel
    margin-top: 0
  &.accordion-color
    .panel-heading a
      background-color: $primary-color
      color: #FFFFFF
      &.collapsed
        background-color: #FFFFFF
        color: #555555
    .panel-collapse .panel-body
      background-color: $primary-color
      color: #FFFFFF
  &.accordion-semi
    .panel-heading
      a
        background-color: #e74949
        border-bottom: 1px solid #f13e3e
        color: #FFFFFF
        transition: background-color 200ms ease-in-out 0s
      &.success a
        background-color: #2CC36B
        border-bottom: 1px solid #049B43
      &.warning a
        background-color: #F16E3F
        border-bottom: 1px solid #C94617
      &.danger a
        background-color: #EA6153
        border-bottom: 1px solid #C2392B
      a.collapsed
        background-color: #FFFFFF
        border-bottom: 0 none
        color: #555555
    .panel-collapse .panel-body
      padding: 15px 20px 20px 34px

//accordions end

//console start

.console-pad
  background: none repeat scroll 0 0 #FFFFFF
  color: #000000
  line-height: 1
  overflow: hidden
  position: relative

.console-pad-scroll
  -moz-box-sizing: content-box
  min-height: 256px
  margin-bottom: -30px
  margin-right: -30px
  outline: medium none
  padding-bottom: 9px
  padding-right: 30px
  position: relative

.console-pad-sizer
  position: relative
  padding: 5px 0 0 32px
  color: #7082a2

.console-pad-vscrollbar
  overflow-x: hidden
  overflow-y: scroll
  right: 0
  top: 0

.console-pad-hscrollbar
  bottom: 0
  left: 0
  overflow-x: scroll
  overflow-y: hidden

.console-pad-gutters
  left: 0
  padding-bottom: 30px
  position: absolute
  top: 0
  z-index: 3

.console-pad-gutter
  -moz-box-sizing: content-box
  display: inline-block
  min-height: 256px
  margin-bottom: -32px
  padding-bottom: 30px
  white-space: normal
  background: $primary-color

.console-pad-linewidget
  overflow: auto
  position: relative
  z-index: 2

.console-pad-wrap .console-pad-scroll
  overflow-x: hidden

.console-pad-measure
  height: 0
  overflow: hidden
  position: absolute
  visibility: hidden
  width: 100%

#console
  border-top: 1px solid #35435d

.content
  background: $primary-color

.console
  background: #29364c
  padding: 2px 10px
  h4
    color: #6c778b

//console end

//slider start

#eq span
  float: left
  height: 120px
  margin: 15px

.ui-widget-content
  background: none repeat scroll 0 0 #F0F2F7 !important
  border: medium none !important

.ui-slider-horizontal
  height: 6px !important
  .ui-slider-handle
    top: -0.4em !important

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
  background: none repeat scroll 0 0 #FFFFFF !important
  border: 2px solid #e74949 !important

.ui-slider-vertical
  width: 6px !important
  .ui-slider-handle
    left: -0.4em !important

.ui-slider .ui-slider-handle
  cursor: default
  height: 1.6em
  position: absolute
  width: 1.6em
  z-index: 2

.slider-info
  padding-top: 10px

.bound-s
  margin-bottom: 15px
  width: 90px

table.sliders tr td
  border: medium none
  padding: 30px 0

//slider end

.fontawesome-icon-list
  h2
    font-size: 20px
    font-weight: 300
    margin-top: 0
  .col-sm-4, .col-md-3, .col-xs-6
    margin-bottom: 10px
  .page-header
    border-bottom: 1px solid #C9CDD7
  a
    color: #5b5f66
    &:hover
      color: #4a4f58
  i
    font-size: 16px
    padding-right: 10px

.form-horizontal .control-label
  font-size: 14px
  font-weight: 300
  text-align: left

.ms-container .ms-optgroup-label
  color: #999999
  cursor: pointer
  margin: 0
  padding: 5px 0 0 5px
  font-size: 14px

.add-on
  float: right
  margin-top: -35px
  .btn
    padding: 8px

.daterangepicker
  .ranges
    .range_inputs > div:nth-child(2)
      margin-bottom: 10px
      padding-left: 0
    label
      padding-bottom: 0
      padding-top: 8px
  td.active
    background: none repeat scroll 0 0 #41CAC0
    &:hover
      background: none repeat scroll 0 0 #41CAC0

.datepicker td
  &.active
    &:hover, &:active, &:hover:active
      background: none repeat scroll 0 0 #41CAC0
    &.active, &.disabled, &[disabled]
      background: none repeat scroll 0 0 #41CAC0
      &:hover
        background: none repeat scroll 0 0 #41CAC0
  span.active
    &:hover, &:active, &.active, &.disabled, &[disabled]
      background: none repeat scroll 0 0 #41CAC0

.daterangepicker
  .calendar
    th, td
      font-family: 'Open Sans', sans-serif
      font-weight: 300
      text-align: center
      white-space: nowrap
  td.active
    text-shadow: none
    &:hover
      text-shadow: none

.datepicker
  td
    &.active
      text-shadow: none
      &:hover
        text-shadow: none
    span.active
      text-shadow: none
  th.switch
    width: 125px
  td span
    height: 40px
    line-height: 40px

.bootstrap-timepicker table td input
  border: 1px solid #CCCCCC
  border-radius: 3px

.cke_top, .cke_bottom
  background: -moz-linear-gradient(center top, whitesmoke, whitesmoke) repeat scroll 0 0 whitesmoke !important
  box-shadow: none
  padding: 6px 8px 2px

.help-block
  font-size: 12px

.cke_chrome
  box-shadow: none !important

.cke_toolgroup
  background: #FFFFFF!important
  border-color: #A6A6A6 #A6A6A6 #979797
  border-style: solid
  border-radius: 0px!important
  border-width: 1px
  box-shadow: none!important
  float: left
  margin: 0 6px 5px 0

.cke_combo_button
  background: #FFFFFF!important
  border-color: #A6A6A6 #A6A6A6 #979797
  border-image: none
  border-radius: 0px!important
  border-style: solid
  border-width: 1px
  box-shadow: none!important
  display: inline-block
  float: left
  margin: 0 6px 5px 0

.page-error-404
  color: #303641
  text-align: center
  .error-symbol
    font-size: 120px
  .error-text
    font-size: 16px
    padding-bottom: 25px
    h2
      font-size: 45px
    p
      font-size: 22px
    + hr
      margin-bottom: 50px
  .input-group
    margin: 0 auto
    width: 250px

.timeline
  border-collapse: collapse
  border-spacing: 0
  display: table
  position: relative
  table-layout: fixed
  width: 100%
  .time-show
    margin-bottom: 30px
    margin-right: -75px
    margin-top: 30px
    position: relative
    &.first!

.time-show .btn
  width: 150px

.timeline
  .time-show a
    color: #FFFFFF
  &:before
    background-color: #D8D9DF
    bottom: 0
    content: ""
    left: 50%
    position: absolute
    top: 30px
    width: 1px
    z-index: 0

h3.timeline-title
  color: #C8CCD7
  font-size: 20px
  font-weight: 400
  margin: 0 0 5px
  text-transform: uppercase

.t-info
  color: #C8CCD7

.timeline-item
  &:before, &.alt:after
    content: ""
    display: block
    width: 50%
  display: table-row

.timeline-desk
  display: table-cell
  vertical-align: top
  width: 50%
  h1
    font-size: 16px
    font-weight: 300
    margin: 0 0 5px
  .panel
    background: none repeat scroll 0 0 #FFFFFF
    display: block
    margin-left: 45px
    position: relative
    text-align: left

.timeline-item
  .timeline-desk .arrow
    border-bottom: 8px solid rgba(0, 0, 0, 0)
    border-top: 8px solid rgba(0, 0, 0, 0)
    display: block
    height: 0
    left: -7px
    position: absolute
    top: 13px
    width: 0
    border-right: 8px solid #FFFFFF !important
  &.alt .timeline-desk .arrow-alt
    border-bottom: 8px solid rgba(0, 0, 0, 0)
    border-top: 8px solid rgba(0, 0, 0, 0)
    display: block
    height: 0
    left: auto
    position: absolute
    right: -7px
    top: 13px
    width: 0
    border-left: 8px solid #FFFFFF !important

.timeline .timeline-icon
  left: -60px
  position: absolute
  top: 5px
  background: none repeat scroll 0 0 #C7CBD6

.timeline-desk
  span a
    text-transform: uppercase
  h1.red, span a.red
    color: #EF6F66
  h1.green, span a.green
    color: #39B6AE
  h1.blue, span a.blue
    color: #56C9F5
  h1.purple, span a.purple
    color: #8074C6
  h1.light-green, span a.light-green
    color: #A8D76F
  h1.yellow, span a.yellow
    color: #FED65A

.timeline .timeline-icon
  &.red
    background: none repeat scroll 0 0 #f87c74
  &.green
    background: none repeat scroll 0 0 #48c5bd
  &.blue
    background: none repeat scroll 0 0 #67d4fe
  &.purple
    background: none repeat scroll 0 0 #8074C6
  &.light-green
    background: none repeat scroll 0 0 #b0e077
  &.yellow
    background: none repeat scroll 0 0 #ffdc6f
  border-radius: 50%
  color: #FFFFFF
  display: block
  height: 30px
  text-align: center
  width: 30px
  i
    margin-top: 9px

.timeline-item.alt .timeline-icon
  left: auto
  right: -60px

.timeline
  .time-icon:before
    font-size: 16px
    margin-top: 5px
  .timeline-date
    display: none
    left: -245px
    position: absolute
    text-align: right
    top: 12px
    width: 150px

.timeline-item.alt .timeline-date
  display: none
  left: auto
  right: -245px
  text-align: left

.timeline-desk h5 span
  color: #999999
  display: block
  font-size: 12px
  margin-bottom: 4px

.timeline-item
  &.alt:before
    display: none
  &:before, &.alt:after
    content: ""
    display: block
    width: 50%

.timeline-desk
  p
    color: #999999
    font-size: 14px
    margin-bottom: 0
  a
    color: #1FB5AD
  .panel
    margin-bottom: 5px
  .album
    margin-top: 20px

.timeline-item.alt .timeline-desk .album
  float: right
  margin-top: 20px

.timeline-desk .album a
  float: left
  margin-right: 5px

.timeline-item.alt .timeline-desk .album a
  float: right
  margin-left: 5px

.timeline-desk .notification
  background: none repeat scroll 0 0 #FFFFFF
  margin-top: 20px
  padding: 8px

.timeline-item.alt .panel
  margin-left: 0
  margin-right: 45px

.mbot30
  margin-bottom: 30px

.timeline-item.alt
  h1, p
    text-align: right

.profile-nav
  .user-heading
    //background:#ffaab6
    color: #797a7d
    padding: 30px
    text-align: center
    &.round a
      border: 10px solid rgba(255, 255, 255, 0.3)
      border-radius: 50%
      display: inline-block
    a img
      border-radius: 50%
      height: 112px
      width: 112px
    h1
      font-size: 22px
      font-weight: 300
      margin-bottom: 5px
    p
      font-size: 15px
  ul
    margin-top: 1px
    > li
      border-bottom: 1px solid #EBEAE6
      line-height: 30px
      margin-top: 0
      &:last-child
        border-bottom: medium none
      > a
        border-left: 5px solid #FFFFFF
        border-radius: 0
        color: #89817F
        &:hover, &:focus
          background: #F8F7F5 !important
          border-left: 5px solid $primary-color
          color: #89817F !important
    li.active a
      background: #F8F7F5 !important
      border-left: 5px solid $primary-color
      color: #89817F !important
    > li
      &:last-child > a:last-child
        border-radius: 0px
      > a > i
        color: #BCB3AA
        font-size: 16px
        padding-right: 10px

.r-activity
  font-size: 12px
  margin: 6px 0 0

.p-text-area
  border: medium none
  box-shadow: none
  color: #C3C3C3
  font-size: 16px
  font-weight: 300
  &:focus
    border: medium none
    box-shadow: none
    color: #C3C3C3
    font-size: 16px
    font-weight: 300

.profile-info .panel-footer
  background-color: #F8F7F5
  border-top: 1px solid #E7EBEE
  ul li a
    color: #7A7A7A

.bio-graph-heading
  background: $primary-color
  color: #FFFFFF
  font-size: 16px
  font-style: italic
  font-weight: 300
  padding: 40px 110px
  text-align: center

.bio-graph-info
  color: #89817E
  h1
    font-size: 22px
    font-weight: 300
    margin: 0 0 20px

.bio-row
  float: left
  margin-bottom: 10px
  padding: 0 15px
  width: 50%
  p span
    display: inline-block
    width: 100px

.bio-chart, .bio-desk
  float: left

.bio-chart
  width: 40%

.bio-desk
  width: 60%
  h4
    font-size: 15px
    font-weight: 400
    &.terques
      color: #4CC5CD
    &.red
      color: #E26B7F
    &.green
      color: #97BE4B
    &.purple
      color: #CAA3DA

.file-pos
  margin: 6px 0 10px

.profile-activity h5
  color: #C3C3C3
  font-weight: 300
  margin-top: 0

.login-form-signin
  background: none repeat scroll 0 0 #FFFFFF
  margin: 100px auto 100px
  max-width: 330px
  h2.login-form-signin-heading
    background: none repeat scroll 0 0 $high-light-color
    color: #FFFFFF
    font-family: 'Open Sans', sans-serif
    font-size: 18px
    font-weight: 300
    margin: 0
    padding: 20px 15px
    text-align: center
    text-transform: uppercase
  .checkbox
    margin-bottom: 14px
    color: #B6B6B6
    font-family: 'Open Sans', sans-serif
    font-weight: 300
  .form-control
    -moz-box-sizing: border-box
    font-size: 16px
    height: auto
    padding: 10px
    position: relative
    margin-top: 15px !important
    &:focus
      z-index: 2
  textarea
    font-size: 14px !important
    border: 1px solid #eaeaea
    resize: vertical
    margin-bottom: 15px !important
    font-family: 'Open Sans', sans-serif
    color: #555
    height: 150px !important
  input
    &[type="text"], &[type="password"], &[type="email"], &[type="tel"]
      border: 1px solid #EAEAEA
      box-shadow: none
      font-size: 14px
      margin-bottom: 15px !important
      font-family: 'Open Sans', sans-serif
    &[type="file"]
      padding: 0
      font-size: 0
  .btn
    margin-left: 0
  p
    color: #B6B6B6
    font-size: 16px
    font-weight: 300
    text-align: center
  a
    color: $high-light-color
    &:hover
      color: #B6B6B6






.login-wrap
  padding: 20px

.login-logo
  background: $primary-color
  text-align: center
  padding: 10px 0

  img
    max-width: 71px

.console-pad
  line-height: 22px
  width: 100%
  height: 269px

.console-numbers
  list-style: none
  margin-left: -36px
  li
    line-height: 21px

.console-bg
  background: #29364c!important
  border: none!important
  color: $focus-color!important

.mail-nav
  margin: 15px -15px 0
  li a
    border-radius: 0
    border-right: 3px solid rgba(0, 0, 0, 0)
    border-top: 1px solid #F2F3F6
    padding: 15px
  > li
    > a
      &:hover, &:focus
        background: none repeat scroll 0 0 #FAFAFA
        border-right: 3px solid $primary-color
        color: $primary-color
    &.active > a
      background: none repeat scroll 0 0 #FAFAFA
      border-right: 3px solid $primary-color
      color: $primary-color
      &:hover, &:focus
        background: none repeat scroll 0 0 #FAFAFA
        border-right: 3px solid $primary-color
        color: $primary-color
    + li
      margin-left: 0
      margin-top: 0
  i
    font-size: 16px
    margin-right: 10px

.inbox-notification
  margin-top: -2px

.user-head
  .inbox-avatar
    float: left
    width: 65px
    img
      border-radius: 4px
  .user-name
    display: inline-block
    margin: 0 0 0 10px
    h5
      font-size: 14px
      font-weight: 300
      margin-bottom: 0
      margin-top: 15px
      a
        color: #FFFFFF
    span a
      color: #87E2E7
      font-size: 12px

a.mail-dropdown
  background: #ff455e
  border-radius: 2px
  color: #fff
  font-size: 10px
  margin-top: 20px
  padding: 3px 5px

.inbox-body
  padding: 20px

.btn-compose
  background: #ff455e
  color: #FFFFFF
  padding: 12px 0
  text-align: center
  width: 100%
  border: none
  &:hover, &:focus
    background: $primary-color
    color: #FFFFFF

ul.inbox-nav
  display: inline-block
  margin: 0
  padding: 0
  width: 100%

.inbox-divider
  border-bottom: 1px solid #D5D8DF

.inbox-action
  margin-top: 50px

.src-position
  margin-top: -7px

.mail-src-position
  margin-top: -3px

ul
  &.labels-info
    border-bottom: 1px solid $bg-color
    margin-bottom: 10px
  &.inbox-nav li
    display: inline-block
    line-height: 45px
    width: 100%
    a
      color: #6A6A6A
      display: inline-block
      line-height: 45px
      padding: 0 20px
      width: 100%
      &:hover
        background: none repeat scroll 0 0 #D5D7DE
        color: #6A6A6A
    &.active a
      background: none repeat scroll 0 0 #D5D7DE
      color: #6A6A6A
    a
      &:focus
        background: none repeat scroll 0 0 #D5D7DE
        color: #6A6A6A
      i
        color: #6A6A6A
        font-size: 16px
        padding-right: 10px
      span.label
        margin-top: 13px
  &.labels-info li
    h4
      color: #5C5C5E
      font-size: 15px
      padding-top: 5px
      text-transform: uppercase
    margin: 0
    a
      border-radius: 0
      color: #6A6A6A
      padding-left: 0
      padding-right: 0
      &:hover, &:focus
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0)
        color: #6A6A6A
      i
        padding-right: 10px

.nav.nav-pills.nav-stacked.labels-info p
  color: #9D9F9E
  font-size: 11px
  margin-bottom: 0
  padding: 0 22px

.inbox-head
  background: none repeat scroll 0 0 #41CAC0
  border-radius: 0 4px 0 0
  color: #FFFFFF
  min-height: 80px
  padding: 20px
  h3
    display: inline-block
    font-weight: 300
    margin: 0
    padding-top: 6px
  .sr-input
    border: medium none
    border-radius: 4px 0 0 4px
    box-shadow: none
    color: #8A8A8A
    float: left
    height: 40px
    padding: 0 10px
  .sr-btn
    background: none repeat scroll 0 0 #00A6B2
    border: medium none
    border-radius: 0 4px 4px 0
    color: #FFFFFF
    height: 40px
    padding: 0 20px

.wht-bg
  background: none repeat scroll 0 0 #FFFFFF
  h4
    color: #A2A2A2
    font-size: 24px
    font-weight: 300

.table-inbox-wrap
  margin: 0 -15px

.mail-checkbox
  margin-right: 10px

.table-inbox
  margin: 0
  tr
    td
      padding: 12px !important
      &:first-child
        width: 5%
        .icheckbox_minimal
          margin-left: 15px
      &:hover
        cursor: pointer
      .fa-star
        &.inbox-started, &:hover
          color: #F78A09
        color: #D5D5D5
    &.unread
      td
        background: none repeat scroll 0 0 #525b68
        font-weight: 600
      a
        color: #32323A
    a
      color: #767676

ul.inbox-pagination
  float: right
  li
    float: left
    list-style: none

.pagination li a
  color: #32323A

.mail-option
  display: inline-block
  margin-bottom: 10px
  width: 100%
  .chk-all
    float: left
    margin-right: 5px
  .btn-group
    margin-right: 5px
  .chk-all, .btn-group a.btn
    background: none repeat scroll 0 0 #FCFCFC
    border: 1px solid #E7E7E7
    color: #AFAFAF
    display: inline-block
    padding: 5px 10px

.inbox-pagination a.np-btn
  background: none repeat scroll 0 0 #FCFCFC
  border: 1px solid #E7E7E7
  color: #AFAFAF
  display: inline-block
  padding: 5px 15px

.mail-option
  .chk-all input[type="checkbox"]
    margin-top: 0
  .btn-group a.all
    border: medium none
    padding: 0

.inbox-pagination
  a.np-btn
    margin-left: 5px
  li span
    display: inline-block
    margin-right: 5px
    margin-top: 7px

.fileinput-button
  background: none repeat scroll 0 0 #EEEEEE
  border: 1px solid #E6E6E6

.inbox-body .modal .modal-body
  input, textarea
    border: 1px solid #E6E6E6
    box-shadow: none

.btn-send
  background: none repeat scroll 0 0 #00A8B3
  color: #FFFFFF
  &:hover
    background: none repeat scroll 0 0 #00A8B3
    color: #FFFFFF
    background: none repeat scroll 0 0 #009DA7

.modal-header h4.modal-title
  font-family: 'Open Sans', sans-serif
  font-weight: 300

.modal-body label
  font-family: 'Open Sans', sans-serif
  font-weight: 400

.compose-mail
  display: inline-block
  margin-top: 20px
  position: relative
  width: 100%
  .compose-options
    color: #979797
    cursor: pointer
    display: inline-block
    font-size: 14px
    position: absolute
    right: 10px
    top: 7px
  input
    border: medium none
    float: left
    padding: 0
    width: 80%
    &:focus
      border: medium none
      float: left
      padding: 0
      width: 80%
  .form-group
    border: 1px solid #F2F3F6
    display: inline-block
    margin-bottom: 0
    width: 100%
    label
      float: left
      line-height: 34px
      margin-bottom: 0
      padding-left: 5px
      width: 8%


.compose-editor
  input
    margin-top: 15px
  display: inline-block
  margin-bottom: 15px
  width: 100%

.compose-btn
  float: left
  margin-top: 6px

.mail-header h4
  font-weight: 300

.mail-sender, .attachment-mail
  border-bottom: 1px solid #EFF2F7
  border-top: 1px solid #EFF2F7
  display: inline-block
  margin: 20px 0
  padding: 10px 0
  width: 100%

.mail-sender
  img
    border-radius: 3px
    width: 30px
  .date
    line-height: 30px
    margin-bottom: 0
    text-align: right

.view-mail a
  color: #35BCB5

.attachment-mail
  a
    &:hover
      color: #35BCB5
    color: #32323A
  ul li
    float: left
    margin-right: 15px
    margin-top: 15px
    width: 200px
    a
      &.atch-thumb img
        height: 180px
        margin-bottom: 10px
        width: 200px
      &.name span
        color: #767676
        float: right

.user-head
  background: $primary-color
  color: #FFFFFF
  min-height: 80px
  padding: 10px
  margin: -16px -16px 17px
  .inbox-avatar
    float: left
    width: 65px
    img
      border-radius: 4px
  .user-name
    display: inline-block
    margin: 0 0 0 10px

.title-box
  width: 100%
  color: #0563b8
  h3
    font-size: 20px
    color: #0563b8
    text-align: center
    margin: 0px 0px 20px
  .blue-bg
    background: #38a4d6
    color: #fff
    margin: 10px -15px
    text-align: center
    font-size: 18px
    padding: 10px
  .red-bg
    background: #e03c52
    color: #fff
    margin: 10px -15px
    text-align: center
    font-size: 18px
    padding: 10px
  .green-bg
    background: #00a7aa
    color: #fff
    margin: 10px -15px
    text-align: center
    font-size: 18px
    padding: 10px
  .maroon-bg
    background: #975cc1
    color: #fff
    margin: 10px -15px
    text-align: center
    font-size: 18px
    padding: 10px
  h1
    color: #fff
    font-weight: bold
    margin: 0
    padding: 0
  i
    font-size: 40px
    color: #747d8d

.skin-section .list
  float: left
  padding-right: 60px
  li
    padding-bottom: 15px
    position: relative
    list-style: none

.skin-minimal .skin-section .list li
  padding-left: 38px

.skin-square .skin-section .list li
  padding-left: 42px

.skin-flat .skin-section .list li, .skin-line .skin-section label
  padding-left: 40px

.alert
  margin-bottom: 14px

.alert-icon
  border-radius: 100%
  display: inline-block
  height: 40px
  width: 40px
  i
    color: #FFFFFF
    display: block
    font-size: 20px
    height: 40px
    line-height: 40px
    text-align: center
    width: 40px

.notification-info
  margin-left: 56px
  margin-top: -28px

.notification-meta
  margin-bottom: 3px

.notification-info p
  color: #999999
  font-size: 12px
  margin: 0

.alert-info .alert-icon
  background-color: #99CCE3

.alert-danger .alert-icon
  background-color: #FCB1AE

.alert-success .alert-icon, .alert-success-gallery .alert-icon
  background-color: #98D7AD

.alert-warning .alert-icon
  background-color: #FFE699

.notification-sender
  color: #414147

.notification-time
  color: #999999
  font-style: italic

.alert-info .notification-info a
  color: #45A2C9

.alert-danger .notification-info a
  color: #FB6F6B

.alert-success .notification-info a, .alert-success-gallery .notification-info a
  color: #42B663

.alert-warning .notification-info a
  color: #E6CB76

.alert-info.bucket-notification
  background-color: #EEF7FD

.alert-danger.bucket-notification
  background-color: #FEF3F2

.alert-success.bucket-notification, .alert-success-gallery.bucket-notification
  background-color: #EEF8F8

.alert-warning.bucket-notification
  background-color: #FFF7E1

.m-bot20
  margin-bottom: 20px

// Chat style

.atm-spmenu
  background: $primary-color
  position: fixed
  > .header
    padding: 0px 20px 10px
    min-height: 64px
    background: $primary-color
    position: relative
    h3
      color: #fff
      font-weight: 300
      font-size: 1.9em
      margin: 0
  .sub-header
    background: #253148
    color: #FFFFFF
    padding: 8px 20px
    .icon
      display: inline-block
      margin-right: 5px
    p
      display: inline-block
      margin: 0
      font-size: 13px
      font-weight: 400
  a
    display: block
    color: #fff
    font-size: 1.1em
    font-weight: 300
    &:hover
      background: #22242B
    &:active
      background: #2A2C34
      border-right: 2px solid #ff4760

.atm-spmenu-vertical
  width: 240px
  height: 100%
  top: 0
  z-index: 1000
  a
    border-bottom: 1px solid rgba(255, 255, 255, 0.04)
    padding: 1em

.atm-spmenu-horizontal
  width: 100%
  height: 150px
  left: 0
  z-index: 1000
  overflow: hidden
  h3
    height: 100%
    width: 20%
    float: left
  a
    float: left
    width: 20%
    padding: 0.8em
    border-left: 1px solid #258ecd

.atm-spmenu-left
  left: -240px

.atm-spmenu-right
  right: -240px

.atm-spmenu-left.atm-spmenu-open
  left: 0px

.atm-spmenu-right.atm-spmenu-open
  right: 0px

.atm-spmenu-top
  top: -150px

.atm-spmenu-bottom
  bottom: -150px

.atm-spmenu-top.atm-spmenu-open
  top: 0px

.atm-spmenu-bottom.atm-spmenu-open
  bottom: 0px

.atm-spmenu-push
  overflow-x: hidden
  position: relative
  left: 0

.atm-spmenu-push-toright
  left: 240px

.atm-spmenu-push-toleft
  left: -240px

//Chat box

#chat-box
  display: none
  position: absolute
  padding-top: 64px
  height: 100%
  background: transparent
  bottom: 0
  left: 0
  width: 100%
  > .header
    background: #253148
    border-bottom: 4px solid #2c3a53
    padding: 15px
    >
      span
        color: #fff
        font-size: 14px
      .close
        margin: 0
        padding: 2px 3px 0 0
        &:hover
          background: none
          border: none

.chat-box > .header > .close:active
  background: none
  border: none

#chat-box
  .messages
    background: $primary-color
    height: 80%
    .conversation
      list-style: none
      padding: 5px 0 0
      li p
        background: #ff4760
        color: #fff
        padding: 5px 10px
        margin-bottom: 15px
        display: inline-block
        position: relative
      .odd p
        background: #fff
        color: #666
        padding: 5px 10px
        display: inline-block
      li
        p:after
          border-color: rgba(0, 0, 0, 0) white
          border-style: solid
          border-width: 9px 10px 9px 0
          content: ""
          display: block
          left: -7px
          position: absolute
          top: 7px
          width: 0
          z-index: 1
        &.text-right p:after
          border-color: rgba(0, 0, 0, 0) #ff4760
          border-width: 9px 0 9px 10px
          left: auto
          right: -7px !important
  > .chat-input
    position: absolute
    bottom: 0
    z-index: 3
    background: #27344a
    padding: 13px 18px
    > .input-group
      margin-bottom: 0
      > input
        overflow: hidden
        word-wrap: break-word
        resize: horizontal
        background: #33425d
        border: none
        color: #999

// Transitions

.atm-spmenu, .atm-spmenu-push
  -webkit-transition: all 0.3s ease
  -moz-transition: all 0.3s ease
  transition: all 0.3s ease

//Side Chat

.side-chat
  .content
    padding: 0 20px
  .header h3
    font-size: 22px
  .content .title
    color: $font-color
    margin: 15px 0 8px 0
    border-bottom: 1px solid #37445b
  .contacts li
    display: block
    a
      color: $font-color
      font-size: 13px
      padding: 4px 5px
      border: 0
      &:focus
        background: transparent
      &:hover
        color: #fff
        background: none
      .fa
        font-size: 11px
        margin-right: 3px
    &.online a .fa
      color: #19b698
    &.busy a .fa
      color: #ea6153
    &.outside a .fa
      color: #f16e3f

.chat-search
  background: #141d2d !important
  border: medium none !important
  color: $font-color
  margin: 20px 20px 0 -10px
  min-height: 32px !important