: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
*/
   --primary-color: #0093e9;
   --secondary-color: #80d0c7;
   --good-color: #80d094;
   --warning-color: #d0cf80;
   --error-color: #d08080;
   --text-color: #575757;
   --text-color: #343434;
   --normal-text-color: #0a244d;
   --light-text-color: rgb(140, 171, 217);
   --richer-text-color: rgb(60, 74, 88);
   --highlight-text-color: hsl(25, 70%, 45%);
   
   --background-color: #f3f4f6;
   --sidebar-background-color: #343a40;
   
   --item-background-color: #fff;
   --button-background-color: #fff;
   --modal-background-color: #fafafa;
   
   --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(--primary-color) 0%,
      var(--secondary-color) 100% );

   --dark-background-image:
   -webkit-linear-gradient( 160deg,
      var(--dark-1-color) 0%,
      var(--dark-2-color) 100% );
   
      --primary-color: #0093e9;
      --secondary-color: #80d0c7;
      --good-color: #80d094;
      --warning-color: #d0cf80;
      --error-color: #d08080;
      
      --light-text-color: #575757;
      --dark-text-color: #ffffff;
      --light-normal-text-color: #0a244d;
      --dark-normal-text-color: #cccccc;
      --light-light-text-color: rgb(140, 171, 217);
      --dark-light-text-color: rgb(76, 89, 103);
      --light-richer-text-color: rgb(60, 74, 88);
      --dark-richer-text-color: rgb(148, 184, 219);
      --highlight-text-color: hsl(25, 70%, 45%);
   
      --light-background-color: #f3f4f6;
      --dark-background-color: #26242E;
      --light-sidebar-background-color: #f3f4f6;
      --dark-sidebar-background-color: #343a40;
   
      --light-item-background-color: #fff;
      --dark-item-background-color: #34323D;
      --light-button-background-color: #fff;
      --dark-button-background-color: #34323D;
      
      --light-modal-background-color: #fafafa;
      --dark-modal-background-color: #3b3b48;
      --icon-background-image: linear-gradient(160deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

[data-theme="light"] {
   --text-color: var(--light-text-color);
   --normal-text-color: var(--light-normal-text-color);
   --light-text-color: var(--light-light-text-color);
   --richer-text-color: var(--light-richer-text-color);
   --background-color: var(--light-background-color);
   --sidebar-background-color-color: var(--light-sidebar-background-color);
   --item-background-color-color: var(--light-item-background-color);
   --button-background-color: var(--light-button-background-color);
   --modal-background-color-color: var(--light-modal-background-color);
}

[data-theme="dark"] {
   --text-color: var(--dark-text-color);
   --normal-text-color: var(--dark-normal-text-color);
   --light-text-color: var(--dark-light-text-color);
   --richer-text-color: var(--dark-richer-text-color);
   --background-color: var(--dark-background-color);
   --sidebar-background-color-color: var(--dark-sidebar-background-color);
   --item-background-color-color: var(--dark-item-background-color);
   --button-background-color: var(--dark-button-background-color);
   --modal-background-color-color: var(--dark-modal-background-color);
}
[data-theme="dark"] {
/* DARK MODE COLORS
*/
   --primary-color: #0093e9;
   --secondary-color: #80d0c7;
   --good-color: #57d175;
   --warning-color: #cfcd44;
   --error-color: #d34a4a;
   
   --text-color: #ffffff;
   --text-color: #ffffff;
   --normal-text-color: rgb(148, 158, 168);
   --light-text-color: rgb(76, 89, 103);
   --richer-text-color: rgb(148, 184, 219);
   --highlight-text-color: hsl(25, 70%, 45%);
   
   --background-color: rgb(38, 36, 46);
   --sidebar-background-color: #343a40;
   --item-bg: #34323D;

   /* --item-background-color: #343a40; */
   /* --item-background-color: #282831; */
   --item-background-color: rgba(23, 23, 23, 0.95);
   --button-background-color: #34323D;
   --modal-background-color: #3b3b48;
   

   --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(--primary-color) 0%,
      var(--secondary-color) 100% );
   
   --dark-background-image:
   -webkit-linear-gradient( 60deg,
      var(--dark-2-color) 5%,
      var(--dark-1-color) 100% );
}

/* LAYOUT
*/
.layout {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 64px auto 1fr;
   grid-template-areas: 'sideNav' 'status-area' 'content';
   min-height: 100vh;
}
@media ( max-width: 640px ) {
   .layout {
      grid-template-columns: 1fr;
      grid-template-rows: 64px auto auto 1fr;
   }
}
@media ( min-width: 640px ) {
   .layout {
      grid-template-columns: 1fr;
      grid-template-rows: 64px auto 1fr;
   }
}
@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';
   }
}