/*!
 * jquery-confirm v2.5.1 (http://craftpip.github.io/jquery-confirm/)
 * Author: boniface pereira
 * Website: www.craftpip.com
 * Contact: hey@craftpip.com
 *
 * Copyright 2013-2016 jquery-confirm
 * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE)
 */

@keyframes jconfirm-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


body.jconfirm-noscroll {
  overflow: hidden !important;
}

.jconfirm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999;
  font-family: inherit;
  overflow: hidden;

  .jconfirm-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: all .4s;

    &.seen {
      opacity: 1;
    }
  }
  .jconfirm-scrollpane {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    perspective: 500px;
    perspective-origin: center;
  }
  .jconfirm-box {
    background: white;
    border-radius: 4px;
    position: relative;
    outline: none;
    padding: 15px 15px 0;

    div.closeIcon {
      height: 20px;
      width: 20px;
      position: absolute;
      top: 5px;
      right: 5px;
      cursor: pointer;
      opacity: .6;
      text-align: center;
      transition: opacity .1s ease-in;
      display: none;
      font-size: 27px;
      line-height: 14px;
      .fa{
        font-size: 16px;
      }
      .glyphicon{
        font-size: 16px;
      }
      .zmdi{
        font-size: 16px;
      }

      &:hover {
        opacity: 1;
      }
    }
    div.title-c {
      display: block;
      font-size: 22px;
      line-height: 20px;

      .icon-c {
        font-size: inherit;
        padding-bottom: 15px;
        display: inline-block;
        margin-right: 8px;
        vertical-align: middle;
        i {
          vertical-align: middle;
        }
        &:empty {
          display: none;
        }
      }
      .title {
        font-size: inherit;
        font-family: inherit;
        display: inline-block;
        vertical-align: middle;
        padding-bottom: 15px;
        &:empty {
          display: none;
        }
      }
    }
    div.content-pane {
      margin-bottom: 15px;
      height: auto;
      transition: height .4s ease-in;
      display: inline-block;
      width: 100%;
      position: relative;

      .content {
        position: absolute;
        top: 0;
        left: 0;
        transition: all .2s ease-in;
        right: 0;

        img{
          width: 100%;
          height: auto;
        }
        &:empty {
          display: none;
        }
        &:empty.loading {
          height: 40px;
          position: relative;
          opacity: 0.6;
          display: block;

          &:before {
            content: '';
            height: 20px;
            width: 20px;
            border: solid 2px transparent;
            position: absolute;
            left: 50%;
            margin-left: -10px;
            border-radius: 50%;
            animation: jconfirm-rotate 1s infinite linear;
            border-bottom-color: #aaa;
            top: 50%;
            margin-top: -10px;
          }
          &:after {
            content: '';
            position: absolute;
            left: 50%;
            margin-left: -15px;
          }
        }
      }
    }
    .buttons {
      padding-bottom: 15px;
      button + button {
        margin-left: 5px;
      }
    }
  }

  .jquery-clear {
    clear: both;
  }

  &.rtl {
    direction: rtl;
    div.closeIcon {
      left: 12px;
      right: auto;
    }
  }

  &.jconfirm-white {
    .jconfirm-bg {
      background-color: rgba(0, 0, 0, .2);
    }
    .jconfirm-box {
      box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
      border-radius: 5px;

      .buttons {
        float: right;

        button {
          border: none;
          background-image: none;
          text-transform: uppercase;
          font-size: 14px;
          font-weight: bold;
          text-shadow: none;
          transition: background .1s;
          color: white;
        }
        button.btn-default {
          box-shadow: none;
          color: #333;

          &:hover {
            background: #ddd;
          }
        }
      }
    }
  }

  &.jconfirm-black {
    .jconfirm-bg {
      background-color: rgba(0, 0, 0, .5);
    }
    .jconfirm-box {
      box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
      background: #444;
      border-radius: 5px;
      color: white;

      .buttons {
        float: right;

        button {
          border: none;
          background-image: none;
          text-transform: uppercase;
          font-size: 14px;
          font-weight: bold;
          text-shadow: none;
          transition: background .1s;
          color: white;
        }
        button.btn-default {
          box-shadow: none;
          color: #fff;
          background: none;

          &:hover {
            background: #666;
          }
        }
      }

    }

  }

  .jconfirm-box.hilight {
    animation: hilight 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hilight {
  10%, 90% {
    transform: translate3d(-2px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(4px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-8px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(8px, 0, 0);
  }
}

/*Transition rules*/
.jconfirm {
  perspective: 400px;

  .jconfirm-box {
    opacity: 1;
    transition-property: transform, opacity, box-shadow;

    &.anim-top, &.anim-left, &.anim-right, &.anim-bottom, &.anim-opacity, &.anim-zoom, &.anim-scale, &.anim-none, &.anim-rotate, &.anim-rotatex, &.anim-rotatey, &.anim-scaley, &.anim-scalex {
      opacity: 0;
    }
    &.anim-rotate {
      transform: rotate(90deg);
    }
    &.anim-rotatex {
      transform: rotateX(90deg);
      transform-origin: center;
    }
    &.anim-rotatexr {
      transform: rotateX(-90deg);
      transform-origin: center;
    }
    &.anim-rotatey {
      transform: rotatey(90deg);
      transform-origin: center;
    }
    &.anim-rotateyr {
      transform: rotatey(-90deg);
      transform-origin: center;
    }
    &.anim-scaley {
      transform: scaley(1.5);
      transform-origin: center;
    }
    &.anim-scalex {
      transform: scalex(1.5);
      transform-origin: center;
    }
    &.anim-top {
      transform: translate(0px, -100px);
    }
    &.anim-left {
      transform: translate(-100px, 0px);
    }
    &.anim-right {
      transform: translate(100px, 0px);
    }
    &.anim-bottom {
      transform: translate(0px, 100px);
    }
    &.anim-opacity {

    }
    &.anim-zoom {
      transform: scale(1.2);
    }
    &.anim-scale {
      transform: scale(0.5);
    }
    &.anim-none {
      display: none;
    }
  }
}

.jconfirm.jconfirm-supervan {
  .jconfirm-bg {
    background-color: rgba(54, 70, 93, .95);
  }
  .jconfirm-box {
    background-color: transparent;

    div.closeIcon {
      color: white;
    }

    div.title-c {
      text-align: center;
      color: white;
      font-size: 28px;
      font-weight: normal;
      > * {
        padding-bottom: 25px;
      }
    }
    div.content-pane{
      margin-bottom: 25px;
    }
    div.content {
      text-align: center;
      color: white;

      &:empty {
        &:before {

        }
        &:after {

        }
      }
    }
    .buttons {
      text-align: center;

      button {
        font-size: 16px;
        border-radius: 2px;
        background: darken(#36465D, 3%);
        text-shadow: none;
        border: none;
        color: white;
        padding: 10px;
        min-width: 100px;
      }
      button + button {

      }
    }
    &.hilight {

    }
  }
}

.jconfirm.jconfirm-material {
  .jconfirm-bg {
    background-color: rgba(0,0,0,.67);
  }
  .jconfirm-box {
    background-color: white;
    box-shadow: 0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12);
    padding: 30px 25px 10px 25px;

    div.closeIcon {
      color: rgba(0,0,0,.87);
    }

    div.title-c {
      color: rgba(0,0,0,.87);
      font-size: 22px;
      font-weight: bold;
    }
    div.content {
      text-align: left;
      color: rgba(0,0,0,.87);

      &:empty {
        &:before {

        }
        &:after {

        }
      }
    }
    .buttons {
      text-align: right;

      button {
        text-transform: uppercase;
        font-weight: 500;
      }
      button + button {

      }
    }
    &.hilight {

    }
  }
}
.jconfirm.jconfirm-bootstrap {
  .jconfirm-bg {
    background-color: rgba(0,0,0,.21);
  }

  .jconfirm-box {
    background-color: white;
    box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.2);
    border: solid 1px rgba(0, 0, 0, 0.4);
    padding: 15px 0 0;

    div.closeIcon {
      color: rgba(0, 0, 0, 0.87);
    }

    div.title-c {
      color: rgba(0, 0, 0, 0.87);
      font-size: 22px;
      font-weight: bold;
      padding-left: 15px;
      padding-right: 15px;
    }
    div.content-pane{

    }
    div.content {
      text-align: left;
      color: rgba(0, 0, 0, 0.87);
      padding: 0px 15px;

      &:empty {
        &:before {

        }
        &:after {

        }
      }
    }
    .buttons {
      text-align: right;
      padding: 0px 0 0px;
      margin: -5px 0 0px;
      border-top: solid 1px #ddd;
      overflow:hidden;
      border-radius:  0 0 4px 4px;

      button {
        font-weight: 500;
        border-radius: 0px;
        margin: 0;
        border-left: solid 1px #ddd;
      }
      button + button {

      }
    }
    &.hilight {

    }
  }
}