//

 // Modals

 // --------------------------------------------------

 // .modal-open      - body class for killing the scroll

 // .modal           - container to scroll within

 // .modal-dialog    - positioning shell for the actual modal

 // .modal-content   - actual modal w/ bg and corners and shit

 // Kill the scroll on the body

 .modal-open {

   overflow: hidden;

 }

 // Container that the modal scrolls within

 .modal {

   display: none;

   overflow: auto;

   overflow-y: scroll;

   position: fixed;

   top: 0;

   right: 0;

   bottom: 0;

   left: 0;

   z-index: @zindex-modal-background;

   // When fading in the modal, animate it to slide down

   &.fade .modal-dialog {

     .translate(0, -25%);

     .transition-transform(~"0.3s ease-out");

   }

   &.in .modal-dialog { .translate(0, 0)}

 }

 // Shell div to position the modal with bottom padding

 .modal-dialog {

   position: relative;

   width: auto;

   margin: 10px;

   z-index: (@zindex-modal-background + 10);

 }

 // Actual modal

 .modal-content {

   position: relative;

   background-color: @modal-content-bg;

   border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)

   border: 1px solid @modal-content-border-color;

   border-radius: @border-radius-large;

   .box-shadow(0 3px 9px rgba(0,0,0,.5));

   background-clip: padding-box;

   // Remove focus outline from opened modal

   outline: none;

 }

 // Modal background

 .modal-backdrop {

   position: fixed;

   top: 0;

   right: 0;

   bottom: 0;

   left: 0;

   z-index: (@zindex-modal-background - 10);

   background-color: @modal-backdrop-bg;

   // Fade for backdrop

   &.fade { .opacity(0); }

   &.in { .opacity(.5); }

 }

 // Modal header

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

 .modal-header {

   padding: @modal-title-padding;

   border-bottom: 1px solid @modal-header-border-color;

   min-height: (@modal-title-padding + @modal-title-line-height);

 }

 // Close icon

 .modal-header .close {

   margin-top: -2px;

 }

 // Title text within header

 .modal-title {

   margin: 0;

   line-height: @modal-title-line-height;

 }

 // Modal body

 // Where all modal content resides (sibling of .modal-header and .modal-footer)

 .modal-body {

   position: relative;

   padding: @modal-inner-padding;

 }

 // Footer (for actions)

 .modal-footer {

   margin-top: 15px;

   padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;

   text-align: right; // right align buttons

   border-top: 1px solid @modal-footer-border-color;

   .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;

   }

 }

 // Scale up the modal

 @media screen and (min-width: @screen-sm-min) {

   .modal-dialog {

     width: 600px;

     margin: 30px auto;

   }

   .modal-content {

     .box-shadow(0 5px 15px rgba(0,0,0,.5));

   }

 }