// Modals // Design element Dialogs // ————————————————– .modal-content {

border: 0;

// Modal header
// Top section of the modal w/ title and dismiss

.modal-header {
  border-bottom: none;

  & button {
      position: absolute;
      right: 27px;
      top: 24px;
      outline: 0;
      padding: 1rem;
      margin: -1rem -1rem -1rem auto;
  }
  .title{
      color: $black;
      margin-top: 5px;
      margin-bottom: 0;
  }

  .modal-title{
    color: $black;
  }

  i.tim-icons {
    font-size: 16px;
  }
}

// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
  line-height: 1.9;

  p{
    color: $black;
  }
}
// Footer (for actions)
.modal-footer {
  border-top: 0;
  -webkit-justify-content: space-between; /* Safari 6.1+ */
  justify-content: space-between;

  button {
    margin: 0;
    padding-left: 16px;
    padding-right: 16px;
    width: auto;

    &.pull-left {
      padding-left: 5px;
      padding-right: 5px;
      position: relative;
      left: -5px;
    }
  }

}
.modal-body + .modal-footer {
  padding-top: 0;
}

} .modal-backdrop {

background: rgba(0,0,0,0.3);

}

.modal{

.modal-login{
  max-width: 320px;

  .card-login{
      .logo-container{
          width: 65px;
          margin-bottom: 38px;
          margin-top: 27px;
      }
  }
}

  &.modal-mini{
      p{
          text-align: center;
      }

      .modal-dialog{
          max-width: 255px;
          margin: 0 auto;

      }

      &.show .modal-dialog{
          -webkit-transform: translate(0,30%);
          -o-transform: translate(0,30%);
          transform: translate(0,30%);
      }

      .modal-footer{
          button{
              text-transform: uppercase;
              color: $white;

              &:first-child{
                  opacity: .5;
              }
          }
      }
  }

  .modal-profile{
      width: 70px;
      height: 70px;
      background-color: $white;
      border-radius: 50%;
      text-align: center;
      line-height: 5.7;
      box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);

      i{
          color: $primary;
          font-size: 21px;
          margin-top: -10px;
      }

      &[class*="modal-profile-"]{
          i{
              color: $white;
          }
      }

      &.modal-profile-primary{
          background-color: $primary;
      }

      &.modal-profile-danger{
          background-color: $danger;
      }

      &.modal-profile-warning{
          background-color: $warning;
      }
      &.modal-profile-success{
          background-color: $success;
      }

      &.modal-profile-info{
          background-color: $info;
      }
  }

  &.modal-default{
      @include modal-colors($white, $black);
  }

  &.modal-primary{
      @include modal-colors($primary, $white);
  }

  &.modal-danger{
      @include modal-colors($danger, $white);
  }

  &.modal-warning{
      @include modal-colors($warning, $white);
  }

  &.modal-success{
      @include modal-colors($success, $white);
  }

  &.modal-info{
      @include modal-colors($info, $white);
  }

  .modal-header .close{
      color: $danger;
      text-shadow: none;

      &:hover,
      &:focus{
          opacity: 1;
      }
  }

  &.modal-black{
    .modal-content{
      background: linear-gradient(to bottom, $black 0%, $black-states 100%);
      color: rgba($white, 0.8);
      .modal-header{
        .modal-title, .title{
          color: rgba($white, 0.9);
        }
      }
      .modal-body{
        p{
          color: rgba($white, 0.8);
        }
      }
    }
    h1, h2, h3, h4, h5, h6, p{
      color: $white;
    }
  }

}

.modal-search{

.modal-dialog{
  margin: 20px auto;
  max-width: 650px;
  input{
    border: none;
    font-size: 17px;
    font-weight: 100;
  }
  span{
    font-size: 35px;
    color: $search-gray;
  }
}
.modal-content{
  .modal-header{
    padding: 24px;
  }
}

.modal-header .close{
  color: $dark-background;
  top: 30px !important;
}

.modal-footer{
  border-top: 2px solid #f9f9f9;
  margin: 0px 25px 20px;
}

}

@include media-breakpoint-down(xs) {

.modal {
  &.show .modal-dialog {
    transform: translateY(10%);

    &.modal-notice {
      transform: translateY(3%);
    }
  }
}

}