// Core variables and mixins
@import "_variables.less";
// Custom for this template
@import "bootstrap_addons/_mixins.less";
//
// Modals
// --------------------------------------------------

// Background
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindexModalBackdrop;
  background-color: @black;
  // Fade for backdrop
  &.fade { opacity: 0; }
}

.modal-backdrop,
.modal-backdrop.fade.in {
  .opacity(80);
}

// Base modal
// > Joomla JUI
// .modal REMOVED
// < Joomla JUI

.modal-header {
  padding: 9px 15px;
  border-bottom: 1px solid #EEE;
  // Close icon
  .close { margin-top: 2px; }
  // Heading
  h3 {
    margin: 0;
    line-height: 30px;
  }
}

// Body (where all modal content resides)
.modal-body {
  width: 98%;
  position: relative;
  overflow-y: auto;
  //max-height: 400px;
  padding: 1%;
}

// Remove border and scrollbar from iframe modal
.modal-body iframe {
  width: 100%;
  max-height: none;
  border: 0 !important;
}

// Remove bottom margin if need be
.modal-form {
  margin-bottom: 0;
}

// Footer (for actions)
.modal-footer {
  padding: 14px 15px 15px;
  margin-bottom: 0;
  text-align: right; // right align buttons
  background-color: #F5F5F5;
  border-top: 1px solid #DDD;
  .border-radius(0 0 6px 6px);
  .box-shadow(inset 0 1px 0 @white);
  .clearfix(); // clear it in case folks use .pull-* classes on buttons
  // Properly space out buttons
  .btn + .btn {
    margin-left: 5px;
    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
  }
  // but override that for button groups
  .btn-group .btn + .btn {
    margin-left: -1px;
  }
  // and override it for block buttons as well
  .btn-block + .btn-block {
    margin-left: 0;
  }
}

/*======================= MODAL WINDOW =======================*/
div.modal.fade.loginPopup {
  font-size: 0;
  height: 100%;
  left: 0;
  margin: 0;
  .opacity(0);
  overflow: auto;
  position: fixed;
  text-align: center;
  top: 0;
  .transition(all 0.2s ease);
  width: 100%;
  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
  }
  div.modal_wrapper {
    background: @bodyBackground;
    display: inline-block;
    font-size: @baseFontSize;
    position: relative;
    vertical-align: middle;
    width: 260px;
    .moduletable {
      margin-bottom: 0;
    }
  }
  &.in {
    .opacity(100);
  }
  .modal-body {
    overflow: visible;
    //max-height: 420px;
  }

}

div.modal.fade {
  top: -200%;
}

button.modalClose {
  margin: 14px;
  padding: 0;
}

.login-greeting {
  margin: 0 0 9px 0;
}

.input-modal {
  width: 146px;
}

div.modal.fade {
  z-index: 0;
}

div.modal.fade.in {
  z-index: 1030;
}

.modal-hide {
  background: #000;
  height: 100%;
  left: 0;
  .opacity(80);
  position: fixed;
  top: 0;
  width: 100%;
}

.modal-header {
  padding: 0;
  border: none;
}

.modal-body {
  padding: 0;
  width: 100%;
}

#modal {
  .moduletable {
    padding: 15px;
    &:last-child {
      padding-bottom: 9px;
    }
    & + .moduletable {
      padding-top: 0;
    }
  }
}
