@media (max-width: $screen-sm-min)
  .admin-results .modal.fade.in
    position: fixed

// ////////////////// //
//   Modal Backdrop   //
// ////////////////// //
.backdrop
  @include transparent(black, 0.5)
  width: 100%
  height: 100%
  position: fixed
  top: 0
  left: 0
  z-index: 5

.modal
  @include transparent($gray-base, 0.9)
  padding: 0 $padding-base-horizontal!important

// ////////////////// //
//    Modal dialog    //
// ////////////////// //
.modal-dialog
  width: 100%
  padding: 20px 0
  margin: auto
  &.min, &.modal-sm
    max-width: 572px
  &.modal-dialog-xs
    max-width: 280px
  .close,
  .prev
    position: absolute
    top: 0
    z-index: 1
  .close
    right: 0
  .prev
    left: 0
  .progress
    border-radius: 0
    box-shadow: 0 0 0
    .progress-bar
      border-radius: 0 8px 8px 0
      box-shadow: 0 0 0
  @media (min-width: $screen-sm-min)
    max-width: 830px

// ////////////////// //
//     Modal Body     //
// ////////////////// //
.modal-body
  padding: 0
  .submit
    @extend .text-center
    position: relative
    z-index: 0
    margin: 30px 0 40px 0
  .typeahead
    li
      padding: 0
  .add-cover
    max-width: 240px
    text-align: center
    margin: auto
    .btn
      width: 100%
  .preview-cover
    width: 100%
    height: 200px
    line-height: 200px
    text-align: center
    border-radius: $border-radius-base
    border: 1px solid $gray
    background-size: cover
    overflow: hidden
    position: relative
    .empty-message
      display: inline-block
      p
        line-height: normal
    .loader
      transform: translate(-50%, -50%)
      line-height: normal
      position: absolute
      top: 50%
      left: 50%

  @media (min-width: $screen-sm-min)
    .add-cover
      margin: 0
    form .check_boxes .boolean
      width: 33%
      display: inline-block
      vertical-align: top

.modal-dialog.min
  .modal-body
    form
      max-width: 100%
      padding: 0
      margin: 0
      &.min
        padding: 8px 20px 15px 20px
      .submit,
      .forgot
        text-align: center

  @media(min-width: $screen-sm-min)
    .modal-body
      form
        .submit,
        .forgot
          text-align: right
          margin: 0
        .forgot
          margin-top: 10px

// ////////////////// //
//    Modal Header    //
// ////////////////// //
.modal-header
  text-align: center
  border: 0
  padding: 0 20px
  img
    height: 45px
    margin: auto
  h4
    @extend .m-t-none
    @extend .m-b-none

// ////////////////////// //
//    Modal Breadcrumb    //
// ////////////////////// //
.modal-breadcrumb
  text-align: center
  padding: 5px 0

// ///////////////// //
//    Modal Footer   //
// ///////////////// //
.modal-footer
  text-align: center
  border-top: 1px solid $gray
  padding: 20px 0
  &.modal-navigation p
    @extend .text-sm
  .media-left
    float: left
  .media-right
    float: right
  .modal-footer-btn-group
    margin: 0 -10px -10px 0
    .btn
      @extend .m-r-sm
      @extend .m-l-sm
      @extend .m-b-sm

  .footer-agreement
    @extend .media-block-xs
    .checkbox
      margin-top: 0
      span
        display: inline-block
        text-align: left
  .submit
    display: inline-block
    vertical-align: top
  .help-popover
    max-width: 272px
    text-align: left
    position: relative
    background-color: $gray-base
    border-radius: 5px
    float: right
    margin: 0 0 10px 0
    &:after
      content: ' '
      width: 0
      height: 0
      position: absolute
      bottom: -10px
      right: 20px
      border-left: 10px solid transparent
      border-top: 10px solid $gray-base
      border-right: 10px solid transparent
      margin: -10px 0 0 0

  @media (min-width: $screen-sm-min)
    &.modal-navigation
      text-align: right
      p
        text-align: left
        margin-bottom: 0
    .media-left,
    .media-right
      float: none
    .media-body
      text-align: left
    .footer-agreement
      .checkbox
        margin-top: 10px
    .help-popover
      margin: 0 10px 0 0
      &:after
        top: 50%
        bottom: auto
        right: -20px
        border-left: 10px solid $gray-base
        border-top: 10px solid transparent
        border-bottom: 10px solid transparent

  @media (min-width: $screen-md-min)
    &.modal-navigation p
      margin-bottom: 0

// //////////////////// //
//    Modal Agreement   //
// //////////////////// //
.modal-agreement
  max-height: 400px
  overflow: auto
  padding: 0 20px
  h4
    text-align: center
    margin: 30px 0
  h5,
  p
    @extend .m-b-md

  @media (min-width: $screen-sm-min)
    max-height: 525px
    padding: 0 40px
    h4
      margin: 35px 0
    .checkbox
      margin: 5px 0
    .agreement-btn
      text-align: right
      margin: 0

// /////////////////// //
//    Modal Section    //
// /////////////////// //
.modal-section
  padding: 0 20px
  margin: 0 auto
  p
    .icn,
    .go-icon
      padding: 0 10px 0 0
  .container
    max-width: 588px
    margin: auto
  .header-section
    padding: 0 0 20px 0
  .header-description
    padding-top: 20px
  .well
    text-align: center
    border: 0
    border-radius: 0
    background: transparent
    box-shadow: 0 0 0
    padding: 0
    margin: 0
    .icn,
    .go-icon
      font-size: 72px
  .profile-picture
    .media-photo
      @include avatar(100px, 0, 0)
      .image-default
        width: 100%
        height: 100%
        position: absolute
        top: 0
        opacity: 1
      img
        position: absolute
        top: 0
        left: 0
      button
        width: 100px
        height: 100px
        border-radius: 50%
        margin: 0
        .icn,
        .go-icon
          font-size: 50px
          margin: 0
        &.btn-add
          border: 1px solid $gray-base
        &.load
          @include animation(loading 2s ease)
          @include animation-iteration-count(infinite)
          position: absolute
          top: 50%
          left: 50%
          margin: -30px 0 0 -30px
    & > p
      margin: 10px 0 0 0
    .btn
      margin: 20px 0 0 0
  // new business card
  &.secondary
    background: $gray-light
    border-top: 1px solid $gray
  // Notifications center
  &.modal-notifications-center
    .checkbox
      margin: 0 0 10px 0
  @media (min-width: $screen-sm-min)
    padding: 0 40px
    &.modal-notifications-center
      .checkbox
        text-align: center
        label
          padding: 0 0 0 20px