/* Nav Signin / out button */
.navbar .accountKey {
  position: absolute;
  right: 0;
  top: 0;
}
.navbar .accountKey li:first-child {
  display: none;
}
@media only screen and (min-width: 1200px) {
  .navbar .accountKey {
    position: static;
  }
  .navbar .accountKey li:first-child {
    display: inherit;
  }
}
/* Tablets Landscape */
@media only screen and (max-width: 1025px) and (min-width: 769px) {
  #ATG-Side-Panel {
    top: 105px !important;
  }
  .subnav {
    white-space: nowrap;
    overflow: auto;
    width: 210%;
    height: 49px;
  }
}
/* Tablets Portrait */
@media only screen and (max-width: 860px) and (min-width: 500px) {
  /* Nav TopNav */
  .topnav {
    position: relative;
    left: -82px;
    margin-top: 10px !important;
  }
  .subnav {
    white-space: nowrap;
    overflow: auto;
    width: 210%;
    height: 49px;
  }
  /* Nav Invoicing */
  .invoicing-action-btns ul:nth-child(1) {
    position: relative;
    top: 4px;
    left: -189px;
  }
  .invoicing-action-btns ul:nth-child(2) {
    position: relative;
    right: -143px;
    top: -46px;
  }
  .invoicing-action-btns ul:nth-child(3) {
    position: relative;
    bottom: 40px;
    right: 200px;
  }
  .navbar-form.invoicing-textbox {
    position: relative;
    top: 62px;
    left: -19px;
  }
  /* Side panel */
  #ATG-Side-Panel {
    top: 160px !important;
  }
  #ATG-Side-Panel-Flyout.open {
    top: 0px;
    left: 0px !important;
    width: 100% !important;
    height: 100%;
    z-index: 100000;
  }
  #ATG-Side-Panel-Flyout.open .announcements {
    width: 730px !important;
  }
  .announcements .verticle-scroll {
    height: 525px !important;
  }
  /* Location Information */
  #Location-Info-Modal .modal-dialog {
    width: 100% !important;
  }
  /* Customer Details */
  #customer-edit-form fieldset {
    min-width: 100px;
  }
  /* Customer Prospects */
  #Prospect-Customers .view-buttons {
    position: absolute;
    top: 130px;
    right: -355px;
  }
  #Prospect-Customers .prospect-filters {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }
  #Prospect-Customers .prospect-filters button {
    margin-top: 10px;
  }
  /* Content */
  .container-fluid.content-main {
    padding: 55px 12px 8px 65px;
  }
  /* Dialogue */
  .modal.fade.in {
    z-index: 100000;
  }
}
@media screen and (max-width: 500px) {
  .action-bar .navbar-nav > li:not(.hidden-xs) {
    display: inline-block !important;
  }
  .action-bar > * {
    min-width: unset !important;
  }
  table table,
  table thead,
  table tbody,
  table th,
  table td,
  table tr {
    display: block;
    /* !important;*/
    width: 100%;
  }
  table tr {
    border-bottom: 3px solid #CCC;
  }
  table th {
    border-bottom: 1px dotted #CCC;
  }
  table td {
    /* Behave  like a "row" */
    border: none;
  }
  table td[title] {
    position: relative;
    padding-left: 50% !important;
    min-height: 17px;
  }
  table td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    content: attr(title);
  }
  .loadboard tbody {
    overflow-x: hidden;
  }
  .loadboard td[title="LastCheckCallComment"],
  .loadboard td[title="AccountManagerId"],
  .loadboard td[title="SalesManagerId"] {
    display: none !important;
  }
  #ATG-Header #GlobalSearch {
    height: 40px !important;
    transition: height 0.3s;
  }
  #ATG-Header #GlobalSearch.expand {
    height: 40px !important;
  }
  #ATG-Header #GlobalSearch.retract {
    height: 0 !important;
    overflow: hidden;
  }
  #ATG-Header .collapse {
    display: block;
  }
  #ATG-Header .logo {
    padding-left: 0px;
    display: none;
    white-space: nowrap;
    width: 100%;
  }
  #ATG-Header .logo img {
    text-align: center;
    width: 140px;
    float: left;
  }
  #ATG-Header .logo a {
    color: #FFF;
    font-weight: bold;
    float: right;
  }
  #ATG-Header .subnav .navbar-brand {
    padding-left: 0;
    font-size: 15px !important;
  }
  #ATG-Header .navbar-right ul li:not(:first-child) {
    display: none;
  }
  #ATG-Header .navbar-right ul li:first-child {
    position: absolute;
    right: 5px;
    top: 0px;
    white-space: nowrap;
  }
  #ATG-Header ul.nav.navbar-nav.topnav {
    width: 100% !important;
    clear: both !important;
    margin: 0 !important;
    height: 80px !important;
    transition: height 0.3s;
  }
  #ATG-Header ul.nav.navbar-nav.topnav li.hidden-sm {
    display: none !important;
  }
  #ATG-Header ul.nav.navbar-nav.topnav > li > a {
    padding: 12px 8px !important;
  }
  #ATG-Header ul.nav.navbar-nav.topnav .dropdown-menu a {
    font-size: 20px !important;
    padding: 8px;
    border-bottom: 1px dotted #CCC;
  }
  #ATG-Header ul.nav.navbar-nav.topnav.expand {
    height: 80px !important;
  }
  #ATG-Header ul.nav.navbar-nav.topnav.retract {
    height: 0 !important;
    overflow: hidden;
  }
  #ATG-Header ul.nav.navbar-nav.topnav li.dropdown {
    display: inline-block;
  }
  #ATG-Header ul.nav.navbar-nav.topnav li.dropdown ul.dropdown-menu {
    position: absolute !important;
  }
  #ATG-Header ul.nav.navbar-nav.topnav li.dropdown ul.dropdown-menu li.divider {
    display: none;
  }
  #ATG-Header #logoutForm {
    display: none;
    position: absolute;
    top: 10px;
    right: 0%;
  }
  #ATG-Header #logoutForm a {
    padding: 4px;
  }
  #Dashboard section.tab-content {
    position: absolute;
    top: 145%;
  }
  #ATG-Side-Panel-Flyout {
    display: none !important;
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  #ATG-Side-Panel {
    display: none !important;
  }
  .content-main {
    padding-left: 6px !important;
  }
  .content-wrapper {
    font-size: 16px;
    top: 230px !important;
  }
  #ATG-Login {
    margin-top: -150px;
  }
  .order-profit {
    width: 100%;
    clear: both;
    float: none;
  }
  .order-profit h4 {
    margin: 0;
    padding: 2px;
    font-size: 18px;
  }
  /* Order/Load Details page */
  .order-edit-form .nav > li {
    display: inline-flex;
  }
  .order-edit-form .navbar-text {
    position: initial !important;
  }
  .order-edit-form .financials .btn {
    width: 100%;
    margin-top: 25px;
  }
  .order-edit-form .financials .visible-xs {
    display: inline-block !important;
  }
  .order-edit-form .load-price-range {
    margin-left: 0 !important;
  }
  .order-edit-form .load-price-range input {
    padding: 5px !important;
  }
  .order-edit-form .load-stops th,
  .order-edit-form .load-stops thead {
    display: none !important;
  }
  .order-edit-form .load-stops td {
    min-height: 43px;
  }
  .k-grid {
    /* Hide table headers (but not display: none;, for accessibility) */
  }
  .k-grid thead {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }
  .k-grid .k-grid-content {
    height: auto !important;
    overflow-y: auto !important;
    /* Force table to not be like tables anymore */
    /*
		    Label the data
		    */
  }
  .k-grid .k-grid-content table,
  .k-grid .k-grid-content thead,
  .k-grid .k-grid-content tbody,
  .k-grid .k-grid-content th,
  .k-grid .k-grid-content td,
  .k-grid .k-grid-content tr {
    display: block !important;
  }
  .k-grid .k-grid-content tr {
    border-bottom: 3px solid #CCC;
  }
  .k-grid .k-grid-content td {
    /* Behave  like a "row" */
    border: none;
    position: relative;
    padding-left: 50%;
  }
  .k-grid .k-grid-content td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
  .k-grid .k-grid-content td:before {
    content: attr(title);
  }
  .atg-grid .pull-right {
    float: none !important;
  }
  .atg-grid .k-scrollbar {
    display: none;
  }
  .atg-grid .k-grid-content,
  .atg-grid .k-virtual-scrollable-wrap {
    padding-right: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
  }
  #atg-loader {
    left: 25% !important;
  }
}