/* Mobile responsive overrides for the MaximumSettings Support Center (osTicket). */

@media (max-width: 900px) {
  /* Global container + spacing */
  #container {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  #header {
    height: auto !important;
    padding: 12px !important;
  }

  #header p {
    width: auto !important;
    padding-top: 0 !important;
  }

  #header .pull-right {
    float: none !important;
    text-align: left !important;
  }

  #logo {
    float: none !important;
    display: block;
    margin: 0 0 8px 0;
  }

  #header #logo img {
    max-width: 100% !important;
    height: auto !important;
  }

  #content {
    margin: 0 12px !important;
    padding: 12px 0 !important;
    min-height: 0 !important;
  }

  /* Top navigation should wrap instead of overflowing */
  #nav {
    margin: 0 12px !important;
    height: auto !important;
    white-space: normal !important;
  }

  #nav li {
    display: inline-block !important;
    margin-top: 4px;
  }

  #nav li a {
    margin-left: 0 !important;
  }

  .rtl #nav li a {
    margin-right: 0 !important;
  }

  /* Landing page two-column layout */
  #landing_page .sidebar {
    float: none !important;
    width: auto !important;
    margin: 0 0 20px 0 !important;
  }

  #landing_page .main-content {
    width: auto !important;
  }

  .sidebar {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Landing page buttons */
  .front-page-button a.button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  /* Forms: remove fixed table widths and make inputs fluid */
  #ticketForm > table,
  #clientLogin > table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  #ticketForm > table td,
  #clientLogin > table td {
    width: auto !important;
  }

  #ticketForm input:not([type]),
  #ticketForm input[type=text],
  #ticketForm input[type=email],
  #ticketForm input[type=password],
  #ticketForm input[type=tel],
  #ticketForm input[type=number],
  #ticketForm input[type=url],
  #ticketForm input[type=search],
  #ticketForm input[type=file],
  #ticketForm select,
  #ticketForm textarea,
  #clientLogin input:not([type]),
  #clientLogin input[type=text],
  #clientLogin input[type=email],
  #clientLogin input[type=password],
  #clientLogin input[type=tel],
  #clientLogin input[type=number],
  #clientLogin input[type=url],
  #clientLogin input[type=search],
  #clientLogin input[type=file],
  #clientLogin select,
  #clientLogin textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #ticketForm select,
  #clientLogin select {
    float: none !important;
  }

  #ticketForm td textarea,
  #clientLogin td textarea,
  #ticketForm div textarea,
  #clientLogin div textarea {
    width: 100% !important;
  }

  /* KB search row widths */
  #kb-search #topic-id,
  #kb-search #dept-id,
  #kb-search #cid,
  #kb-search #q,
  #kb-search #searchSubmit {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
  }

  /* Stack multi-column blocks */
  .featured-category {
    width: 100% !important;
  }

  .login-box {
    width: auto !important;
    display: block !important;
    box-shadow: none !important;
  }

  .span4,
  .span8 {
    width: 100% !important;
    display: block !important;
    margin: 0 0 12px 0 !important;
  }
}