/* less than 640px. usage: var(--mobile-portrait);
*/
@media (max-width: 640px) {
   .status-area {
      margin-top: -60px;
   }
   .status-items span {
      font-size: 14px;
   }
   .status-items,
   .status-data-container {
      flex-direction: row;
   }
   .status-items li,
   .data-divider,
   .data-list {
      flex-direction: column;
   }
   .data-list {
      margin-top: 12px;
   }
   .data-items {
      /* flex: 0 1 100%; */
      flex-direction: row;
   }
   .nav-trigger {
      display: flex;
   }

   .data-icon-large {
      min-height: 32px;
      max-height: 48px;
   }
   .secondary-data,
   .secondary-data-last {
      font-size: 16px;
   }
   h2 {
      font-size: 1.2rem;
   }
   /* .btn-action {
      display: none;
   } */
}

/* more than 640px. usage: var(--mobile-landscape);
*/
@media (min-width: 640px ) {
   .status-area {
      margin-top: -60px;
   }
   .status-items span {
      font-size: 14px;
   }
   .status-items li,
   .data-divider,
   .data-list {
      flex-direction: column;
   }
   .data-list {
      margin-top: 12px;
   }
   .data-box {
      flex: 0 1 100%;
   }
   .data-items {
      /* flex: 0 1 100%; */
      flex-direction: row;
   }
   .status-items,
   .status-data-container {
      flex-direction: row;
   }
   .nav-trigger {
      display: flex;
   }
   .data-icon-large {
      max-height: 5rem;
   }
   /* .btn-action {
      display: none;
   } */
}

/* more than 768px. usage: var(--tablet-portrait);
*/
@media (min-width: 768px ) {
   .status-area {
      margin-top: 0px;
   }
   .menu {
      background-color: transparent;
   }
   .status-items span {
      font-size: 14px;
   }
   .status-items li,
   .data-list {
      flex-direction: row;
   }
   .data-box {
      flex: 1 1 auto;
      flex-direction: column;
   }
   .half {
      flex: 1 1 calc(50% - 12px);
   }
   .status-items,
   .status-data-container,
   .data-items {
      flex-direction: column;
   }
   .nav-trigger {
      display: flex;
   }
   .data-icon-large {
      max-height: 7rem;
   }
   /* .btn-action {
      display: none;
   } */
}

/* more than 1024px. usage: var(--tablet-landscape);
*/
@media (min-width: 1024px ) {
   .navigation {
      display: flex;
      height: 100%;
      width: 64px;
   }
   .data-list {
      flex-direction: row;
   }
   .status-items,
   .status-data-container,
   .data-items {
      flex-direction: column;
   }
   .data-box {
      /* max-width: 200px; */
      flex: 1 1 calc(20% - 12px);
      flex-direction: column;
   }
   .nav-trigger {
      display: none;
   }
   .btn-action {
      display: inline-block;
   }
}

/* more than 1280px. usage: var(--laptop);
*/
@media (min-width: 1280px ) {
   .data-list {
      flex-direction: row;
   }
   .data-box {
      flex: 1 1 calc(20% - 10px);
      flex-direction: column;
   }
   .status-items,
   .status-data-container,
   .data-divider,
   .data-items {
      flex-direction: column;
   }
   .navigation {
      width: 64px;
      display: flex;
   }
}

/* more than > 1536px. usage: var(--2xl);
*/
@media (min-width: 1536px ) {
   .navigation {
      display: flex;
      /* width: 160px; */
   }
   .data-list {
      flex-direction: row;
   }
   .status-items,
   .status-data-container,
   .data-divider,
   .data-items {
      flex-direction: column;
   }
   .data-box {
      flex: 0 1 calc(20% - 10px);
      flex-direction: column;
   }
}