//
// Responsive
// --------------------------------------------------

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min)
  //== Fixed actions
  //
  //## See form.sass
  .form-fixed-actions
    .form-actions
      .btn
        margin-bottom: 0
        margin-right: 5px

  //== Nested many
  //
  //## See neste_many.sass
  .nested-many-field.nested-many-field-inset .nested-many-inset-add-button.open > .dropdown-menu > li
    width: 50%

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min)
  body
    padding: $navbar-height 0 0 $left-menu-width-open

  //== Top navbar
  //
  //## See navigation.sass
  .navbar-fixed-top
    padding-left: $left-menu-width-open

  .navbar-toggle
    display: none

  //== Loader
  //
  //## See page_loading.sass
  .loading-overlay
    width: calc(100% - #{$left-menu-width-open})
    left: $left-menu-width-open

  .loading-spinner
    margin-left: ($left-menu-width-open / 2) - ($spinner-size / 2)

  //== Nested many
  //
  //## See neste_many.sass
  .nested-many-field.nested-many-field-inset .nested-many-inset-add-button.open > .dropdown-menu > li
    width: 33.333333%

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min)
  //== Nested many
  //
  //## See neste_many.sass
  .nested-many-field.nested-many-field-inset .nested-many-inset-add-button.open > .dropdown-menu > li > a
    background-position: center center
    padding: 75px 5px
    height: 100%

//== Max width
//
//##
@media (max-width: $screen-xs-max)
  body
    padding-top: 0

  //== Top navbar
  //
  //## See navigation.sass
  .navbar-fixed-top
    position: relative

  .navbar-toggle
    margin-top: 3px
    margin-bottom: 3px


  .navbar-default .nav > li > a
    padding: 10px
    width: 40px
    i
      font-size: 14px

  .navbar-nav
    margin: 0
    > li
      float: left

  .breadcrumb
    padding: 10px

  .form-fixed-actions
    margin-bottom: 250px
    .form-actions
      padding-right: 15px
      padding-left: 15px
      left: 50px
      .btn
        width: 100%

@media (max-width: $screen-sm-max)
  //== page list panel
  //
  //## See panel.sass
  .page-list-heading
    [class^='col-xs-'], [class^='col-sm-'], [class^='col-md-'], [class^='col-lg-'],
    .flextable-item
      margin-bottom: 10px

    //** disable lasted margin-bottom on flextable-item & col-* to get the proper padding
    .flextable
      margin-bottom: -10px