:root {
/* BREAKPOINTS
   Project screen inside sauna 1280x800
*/
   --mobile-portrait: 640px; /* less than 640px; */
   --mobile-landscape: 640px; /* > 640px; */
   --tablet-portrait: 768px; /* > 768px; */
   --tablet-landscape: 1024px; /* > 1024px; */
   --laptop: 1280px; /* > 1280px; */
   --2xl: 1536px; /* > 1536px; */

/* DEFAULT COLORS
*/
   --primaryColor: #0093e9;
   --secondaryColor: #80d0c7;
   --goodColor: #80d094;
   --warringColor: #d0cf80;
   --errorColor: #d08080;
   --textColor: #575757;
   --text-color: #343434;
   --text-color-normal: #0a244d;
   --text-color-light: rgb(140, 171, 217);
   --text-color-richer: rgb(60, 74, 88);
   --text-color-highlight: hsl(25, 70%, 45%);
   
   --body-background: #f3f4f6;
   --sidebar-background: #343a40;
   
   --item-background: #fff;
   --btn-background: #fff;
   
   --dark-tl-color: rgb(48, 48, 59);
   --dark-1-color: rgb(243, 241, 238);
   --dark-br-color: rgb(38, 39, 47);
   --dark-2-color: rgb(250, 250, 250);
   --dark-sidet-color: rgb(45, 47, 56);
   --dark-side-color: rgb(38, 39, 47);
   
   --box-shadow:
      0px 0px 24px -10px rgba(149, 157, 165, 0.1),
      0px 2px 12px 0px rgba(149, 157, 165, 0.18),
      0px 4px 6px 0px rgba(149, 157, 165, 0.27);

   --icon-background-image:
   -webkit-linear-gradient( 160deg,
      var(--primaryColor) 0%,
      var(--secondaryColor) 100% );

   --dark-background-image:
   -webkit-linear-gradient( 160deg,
      var(--dark-1-color) 0%,
      var(--dark-2-color) 100% );
}
   
[data-theme="dark"] {
/* DARK MODE COLORS
*/
   --primaryColor: #0093e9;
   --secondaryColor: #80d0c7;
   --goodColor: #57d175;
   --warringColor: #cfcd44;
   --errorColor: #d34a4a;
   
   --textColor: #ffffff;
   --text-color: #ffffff;
   --text-color-normal: rgb(148, 158, 168);
   --text-color-light: rgb(76, 89, 103);
   --text-color-richer: rgb(148, 184, 219);
   --text-color-highlight: hsl(25, 70%, 45%);
   
   --body-background: rgb(38, 36, 46);
   --sidebar-background: #343a40;
   --item-bg: #34323D;

   /* --item-background: #343a40; */
   /* --item-background: #282831; */
   --item-background: rgba(23, 23, 23, 0.95);
   --btn-background: #34323D;
   

   --dark-tl-color: rgb(48, 48, 59);
   --dark-1-color: rgb(55,55,55);
   --dark-br-color: rgb(38, 39, 47);
   --dark-2-color: rgb(22, 22, 22);
   --dark-side-top-color: rgb(45, 47, 56);
   --dark-side-color: rgb(38, 39, 47);
   
   --box-shadow:
      0px 0px 24px -10px rgba(0, 0, 0, 0.1),
      0px 2px 12px 0px rgba(0, 0, 0, 0.2),
      0px 4px 6px 0px rgba(0, 0, 0, 0.3);
   
   --test-cp-background: -webkit-linear-gradient(to top, #000000, #434343); /* Chrome 10-25, Safari 5.1-6 */
   --test-cp-background: linear-gradient(to top, #000000, rgb(67, 67, 67)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    
   --icon-background-image:
   -webkit-linear-gradient( 160deg,
      var(--primaryColor) 0%,
      var(--secondaryColor) 100% );
   
   --dark-background-image:
   -webkit-linear-gradient( 60deg,
      var(--dark-2-color) 5%,
      var(--dark-1-color) 100% );
}

/* LAYOUT
*/
.layout {
   display: grid;
   min-height: 100vh;
}

@media ( max-width: 640px ) {
   .layout {
      grid-template-columns: 1fr;
      grid-template-rows: 64px auto auto 1fr;
      grid-template-areas: 'sideNav' 'status-area' 'content';
   }
}
@media ( min-width: 640px ) {
   .layout {
      grid-template-columns: 1fr;
      grid-template-rows: 64px auto 1fr;
      grid-template-areas: 'sideNav' 'status-area' 'content';
   }
}
@media ( min-width: 768px ) {
   .layout {
      grid-template-columns: 200px 1fr;
      grid-template-rows: 64px 1fr;
      grid-template-areas: 'sideNav content' 'status-area content';
   }
}
@media ( min-width: 1024px ) {
   .layout {
      grid-template-columns: 64px 300px 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: 'sideNav status-area content';
   }
}
@media ( min-width: 1280px ) {
   .layout {
      grid-template-columns: 64px 300px 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: 'sideNav status-area content';
   }
}
@media ( min-width: 1536px ) {
   .layout {
      grid-template-columns: 180px 340px 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: 'sideNav status-area content';
   }
}