@media only screen and (max-width: 800px) {
  html {
    -webkit-text-size-adjust: none;
    /* Prevent font scaling in landscape */
  }

  #container {
    width: auto !important;
    min-width: auto !important;
    padding: 0 !important;
  }

  #container {
    width: 100%;
  }

  #container .board {
    padding: 0;
  }

  .top-tabs li.tab:hover .top-menu {
    display: block;
  }

  table.table {
    table-layout: auto !important;
  }

  #recommend_btn {
    display: none;
  }

  #container .board .page {
    box-shadow: none;
  }

  body {
    background: white;
  }

  .table-container {
    overflow: auto;
  }

  .modal {
    position: absolute;
    top: 0px !important;
    left: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    margin: 0 !important;
    width: auto !important;

    &.fade:not(.in) {
      pointer-events: none;
    }
  }

  .modal .modal-body {
    background: white;
  }

  .modal .modal-footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
  }

  body.login .content {
    width: 100vw !important;
    box-sizing: border-box;
  }

  /* Login and Wizard*/

  /* Allgemein */

  /* Struktur */
  .upgrade-package-hint {
    display: none;
  }

  div.site-header {
    position: relative;
    height: 50px;
    background: #f0f9fe;
    padding-bottom: 5px;
  }

  div.site-header div.logo {
    margin: 0px 5px 0px 10px;
  }

  div.site-header div.logo img {
    width: 50%;
    /*Retina Style*/
    margin-left: 20px;
    margin-top: 8px;
  }

  div.site-header div.tenant-name {
    float: right;
    position: absolute;
    right: 10px;
    top: 14px;
    background: none;
    padding: 0;
    text-align: right;
  }

  div.site-header .tenant-name .company-name,
  div.site-header .tenant-name .user-name {
    font-size: 12px;
    font-weight: normal;
    float: none !important;
    line-height: 12px;
  }

  div.site-header .tenant-name span.label {
    display: none;
  }

  div.site-header div.search {
    display: none;
  }

  div.site-header div.settings {
    float: none;
    margin: 50px 0 10px 0;
    padding-top: 15px;
    padding-bottom: 15px;
    display: none;
    z-index: 100;
    position: absolute;
    text-align: left;
    top: 50px;
    padding-left: 15px !important;
  }

  div.site-header div.settings .entry {
    border: none !important;
    display: inline-block;
    float: none;
    padding-bottom: 15px;
  }

  .site-header .settings .entry > a {
    text-align: center;
    font-size: 16px;
  }

  .notification-and-help-entries {
    display: inline;
  }
  .dropdown-menu a {
    float: left;
  }

  #navigation-toggle:before {
    padding: 4px 8px;
    font-size: 24px;
    left: 20px;
    top: 20px;
    color: #6f8a95;
    content: '\f0c9';
    font-family: 'Font Awesome 6 Pro';
    cursor: pointer;
    display: inline-block;
    position: absolute;
  }

  body.show-navigation .top-tabs ul,
  body.show-navigation div.site-header div.settings {
    display: block;
    padding-left: 25px;
    padding-right: 20px;
    margin-top: 60px;
  }

  body.show-navigation .timer {
    display: none;
  }

  .top-tabs {
    background: #fff !important;
    width: 100%;
    height: 100%;
  }

  .top-tabs ul {
    display: none;
  }

  .top-tabs li.tab .top-menu .main-menu > .entry.open {
    background: none;
  }

  .top-tabs li.tab:first-child {
    width: 99%;
    margin-top: 50px;
  }

  .top-tabs li.tab {
    width: 99%;
    z-index: 1;
  }
  
  .top-tabs li.tab:hover {
    background: none;
  }

  .top-tabs li.tab .top-menu:before {
    display: none;
    margin-bottom: 100px;
  }

  .top-tabs li.tab > a {
    float: left;
    padding: 0px !important;
    margin: 0px !important;
    position: absolute;
    left: 5px;
    font-size: 18px !important;
    color: #aaa !important;
    margin-top: 3px !important;
    background: none !important;
    box-shadow: none !important;
  }

  .top-tabs li.tab .top-menu,
  .top-tabs li.tab .top-menu:hover {
    display: block;
    position: inherit;
    min-height: 1px !important;
    border: none;
    box-shadow: none;
    margin-bottom: 20px;
    background: none;
  }

  .top-tabs li.tab .top-menu {
    animation: none !important;
  }

  .top-tabs li.tab .top-menu .menu-header {
    background: none;
    padding-left: 40px;
  }

  .top-tabs li.tab .top-menu .main-menu {
    float: none;
    display: block;
    width: auto;
    font-size: 18px;
  }

  .top-tabs li.tab .top-menu .aside-menu {
    display: none;
  }

  .top-tabs li.tab .top-menu .main-menu > .entry a {
    margin-left: 25px;
    color: #6f8a95 !important;
  }

  .top-tabs li.tab .top-menu .main-menu > .entry a.new {
    left: inherit !important;
    right: 0px;
    text-align: right;
  }

  .top-tabs li.tab .top-menu.with-aside {
    width: inherit !important;
  }

  .top-tabs li.tab .top-menu .aside-menu {
    display: none !important;
  }

  div.board-header div.timer {
    float: none;
    position: static;
    min-height: 27px;
    z-index: 399;
    padding: 0 12px 20px 12px;
    background: #f0f9fe;
    padding-top: 20px;
  }

  div.timer .timer-widget {
    right: 0px !important;
    left: 0px !important;
    width: auto !important;
    margin-left: 0 !important;
    border-left: 1px solid #00a5ff;
    border-right: 1px solid #00a5ff;
  }

  div.timer .timer-detail {
    padding-right: 66px;
  }

  div.board-header .timer .timer-detail:hover .project,
  div.board-header .timer .timer-detail:hover .task {
    visibility: visible !important;
  }

  div.board-header div.timer .quick-control .btn {
    display: block;
    opacity: 1;
  }

  .timer .timer-widget:before {
    right: 20px;
  }

  .timer .timer-widget .timer-form {
    width: auto !important;
    float: none !important;
    padding: 12px !important;
  }

  .timer .timer-widget .recent-entries {
    position: relative;
    top: 0;
    min-height: 0;
    width: auto !important;
    background-image: none;
  }

  .timer .timer-widget .timer-form .control-group .selected-project {
    width: auto !important;
  }

  .timer .timer-widget .timer-form .times {
    margin-left: 0 !important;
    width: auto !important;
  }

  .timer .timer-widget .timer-group {
    margin-left: 0 !important;
  }

  .timer .timer-widget .timer-actions {
    width: auto !important;
  }

  .timer .timer-widget .timer-actions .btn.reset {
    margin-bottom: 5px;
  }

  .timer .timer-widget .timer-form .controls input[type='text'],
  .timer .timer-widget .timer-form .controls textarea {
    width: 95% !important;
  }

  div.main-footer .imprint {
    text-align: center;
  }

  div.main-footer .pull-left {
    display: none !important;
  }

  /* Formulare*/
  #container input,
  textarea {
    font-size: 16px !important;
    /*Prevent Zooming into Forms*/
  }

  #container .form-horizontal .control-label {
    float: none !important;
    text-align: left !important;
  }

  #container .form-horizontal .controls {
    margin-left: 0 !important;
  }

  /* Spezifische Seiten/Elemente */
  div.page {}

  .page-header .page-header-inner h1 .page-header-title {
    float: none;
  }

  .page-header .page-header-inner .aside {
    float: none;
  }

  .multi-actions {
    display: none;
  }

  /* Tables */
  table.table thead tr th.optional,
  table.table tbody tr td.optional,
  table.table thead tr th.more-optional,
  table.table tbody tr td.more-optional {
    display: none;
  }
}
@media only screen and (max-width: 380px) {
  div.site-header div.settings {
    text-align: left;
    top: 50px;
    padding-left: 15px !important;
  }
  .top-tabs li.tab:first-child {
    margin-top: 80px;
  }
  .notification-and-help-entries {
    display: block;
  }
}
@media only screen and (max-width: 1200px) {

  /* Fluid Grid Rows */
  #container [class*='span'],
  #container .uneditable-input[class*='span'],
  #container .row-fluid [class*='span'] {
    float: none;
    display: block;
    width: 100% !important;
    margin-left: 0;
  }

  .summary-box .arrow_box:after,
  .summary-box-large .arrow_box:after {
    display: none;
  }
}