@import url('http://fonts.googleapis.com/css?family=Roboto')
.settings-wrapper
  display flex
  flex-direction column
  height 100%
  background-color #ffffff
  padding 0 30px
  border-top 3px solid transparent
  border-image -webkit-linear-gradient(left, #01b4c0, #0176ff)
  border-image-slice 1

  .settings
    overflow auto

  .setting
    padding 0px 0px 25px
    background-color #ffffff

  .drift-outbound-version
    margin-top auto

  .title
    h3
      font-size 24px

  .setting-footer
    display flex
    color #7695a5
    margin 20px 0

    .logout
      font-family var(--main-font-family), 'Roboto', Helvetica, sans-serif
      font-size 14px
      font-weight 400
      background-color #ffffff
      margin-right 20px

      &:hover
        text-decoration underline
        cursor pointer

.drift-outbound-p-tag.settings
.drift-outbound-header-text.settings
  text-align left
  padding 4px 0px

.drift-outbound-header-text
  &.settings
    font-weight 600
    font-size 14px

.drift-outbound-p-tag
  &.settings
    line-height 19px

.settings-header
  display flex
  justify-content space-between
  margin 30px 0 20px

  .powered-by-drift
    path
      fill #000000

.onoffswitch
  float right
  margin -5px 0 3px -2px
  position relative
  width 64px
  user-select none

  *
    box-sizing content-box !important

.onoffswitch-checkbox
  display none

  &:checked
    +.onoffswitch-label
      .onoffswitch-inner
        margin-left 0

      .onoffswitch-switch
        right 0

.onoffswitch-label
  display block
  overflow hidden
  cursor pointer
  border 2px solid #ffffff
  border-radius 20px

.onoffswitch-inner
  display block
  width 200%
  margin-left -100%
  transition margin 0.3s ease-in 0s

  &:before
    content 'ON'
    padding-left 10px
    background-color #27c971
    color #ffffff

  &:after
    content 'OFF'
    padding-right 10px
    background-color #b5d2e1
    color #ffffff
    text-align right

.onoffswitch-inner:before
.onoffswitch-inner:after
  display block
  float left
  width 50%
  height 26px
  line-height 26px
  font-size 12px
  color white
  font-weight bold
  box-sizing border-box
  font-family var(--main-font-family), 'Roboto', Helvetica, sans-serif

.onoffswitch-switch
  display block
  width 16px
  height 16px
  margin 5px
  background #ffffff
  position absolute
  top 7px
  bottom 0
  right 34px
  border 2px solid #ffffff
  border-radius 20px
  transition all 0.3s ease-in 0s

.save-header
  display flex

  .drift-outbound-header-text
    margin 0

.saved-icon
  margin 5px
  opacity 0
  transition opacity 300ms ease

.bcc-email-address
  span
    margin-top 10px
    margin-bottom 3px
    width 100%

.settings-domains
  input[type='text']
    width 100%

.settings-close
  cursor pointer

.settings-notifs-manage-link
  float right
  color #0176ff
  cursor pointer

.drift-sequences-setting
  button
    margin-right 10px