/* Final correction for CRUD management pages.
   This file must be loaded last. */

@media (min-width: 768px) {
  body.page-manage .content.container-fluid,
  body.page-feed .content.container-fluid,
  body.page-fish .content.container-fluid,
  body.page-medicine .content.container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding: 28px 24px 48px !important;
  }

  body.page-manage .content > .row,
  body.page-feed .content > .row,
  body.page-fish .content > .row,
  body.page-medicine .content > .row {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.page-manage #poodHeader,
  body.page-feed #feedHeader,
  body.page-fish #fishHeader,
  body.page-medicine #medicineHeader {
    display: block !important;
    width: min(92vw, 920px) !important;
    max-width: 920px !important;
    margin: 0 auto 22px !important;
    text-align: center !important;
  }

  body.page-manage #allThing,
  body.page-feed #allThing,
  body.page-fish #allThing,
  body.page-medicine #allThing {
    display: block !important;
    float: none !important;
    clear: both !important;
    position: static !important;
    width: min(92vw, 920px) !important;
    min-width: 680px !important;
    max-width: 920px !important;
    margin: 0 auto 32px !important;
    padding: 0 22px 24px !important;
  }

  body.page-manage #graphicTab,
  body.page-feed #graphicTab,
  body.page-fish #graphicTab,
  body.page-medicine #graphicTab {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-manage #graphicTab > li,
  body.page-feed #graphicTab > li,
  body.page-fish #graphicTab > li,
  body.page-medicine #graphicTab > li {
    display: block !important;
    float: none !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.page-manage #graphicTab > li > a,
  body.page-feed #graphicTab > li > a,
  body.page-fish #graphicTab > li > a,
  body.page-medicine #graphicTab > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 2px 0 0 !important;
    padding: 10px 16px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  body.page-manage #tabContent,
  body.page-feed #tabContent,
  body.page-fish #tabContent,
  body.page-medicine #tabContent {
    display: block !important;
    width: 100% !important;
    min-height: 430px !important;
  }

  body.page-manage #tabContent .tab-pane,
  body.page-feed #tabContent .tab-pane,
  body.page-fish #tabContent .tab-pane,
  body.page-medicine #tabContent .tab-pane {
    width: 100% !important;
  }

  body.page-manage #tabContent .col-xs-12,
  body.page-feed #tabContent .col-xs-12,
  body.page-fish #tabContent .col-xs-12,
  body.page-medicine #tabContent .col-xs-12 {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 0 0 !important;
  }

  body.page-manage select[size],
  body.page-feed select[size],
  body.page-fish select[size],
  body.page-medicine select[size] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 390px !important;
    max-height: 55vh !important;
  }

  body.page-manage .form-group,
  body.page-feed .form-group,
  body.page-fish .form-group,
  body.page-medicine .form-group {
    display: flow-root !important;
    width: 100% !important;
  }

  body.page-manage #footerContainer,
  body.page-feed #footerContainer,
  body.page-fish #footerContainer,
  body.page-medicine #footerContainer {
    clear: both !important;
    width: 100% !important;
    margin-top: 28px !important;
  }
}

@media (max-width: 767px) {
  body.page-manage #allThing,
  body.page-feed #allThing,
  body.page-fish #allThing,
  body.page-medicine #allThing {
    float: none !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 auto 20px !important;
    padding: 0 4px 18px !important;
  }

  body.page-manage #graphicTab,
  body.page-feed #graphicTab,
  body.page-fish #graphicTab,
  body.page-medicine #graphicTab {
    display: flex !important;
    flex-flow: row nowrap !important;
    width: 100% !important;
    overflow-x: auto !important;
  }

  body.page-manage #graphicTab > li,
  body.page-feed #graphicTab > li,
  body.page-fish #graphicTab > li,
  body.page-medicine #graphicTab > li {
    float: none !important;
    flex: 1 0 auto !important;
    min-width: 110px !important;
  }

  body.page-manage #graphicTab > li > a,
  body.page-feed #graphicTab > li > a,
  body.page-fish #graphicTab > li > a,
  body.page-medicine #graphicTab > li > a {
    white-space: nowrap !important;
  }

  body.page-manage select[size],
  body.page-feed select[size],
  body.page-fish select[size],
  body.page-medicine select[size] {
    min-height: 280px !important;
  }
}