/*
Functions and routines associated with Enasis Network Common Library.

This file is part of Enasis Network software eco-system. Distribution
is permitted, for more information consult the project license file.
*/



/***********************************/
/* Colors used throughout the site */
/***********************************/

:root {

  --pretty: var(--color-teal-lite);
  --gritty: var(--color-teal-dark);

  --background: var(--color-teal-back);
  --foreground: var(--color-text-lite);

  --scroll: var(--color-teal-dark); }



/***********************************/
/* Colors used throughout the site */
/***********************************/

:root {

  --color-text-lite: 245, 245, 245;    /* f5f5f5 */
  --color-text-dark: 233, 233, 233;    /* e9e9e9 */

  --color-gray-lite: 233, 233, 233;    /* e9e9e9 */
  --color-gray-dark: 107, 107, 107;    /* 6b6b6b */
  --color-gray-back: 21, 21, 21;       /* 151515 */

  --color-red-lite: 255, 102, 102;     /* ff6666 */
  --color-red-dark: 150, 14, 14;       /* 960e0e */
  --color-red-back: 26, 7, 7;          /* 1a0707 */

  --color-pink-lite: 255, 0, 204;      /* ff00cc */
  --color-pink-dark: 107, 10, 88;      /* 6b0a58 */
  --color-pink-back: 18, 5, 16;        /* 120510 */

  --color-teal-lite: 102, 255, 255;    /* 66ffff */
  --color-teal-dark: 14, 150, 150;     /* 0e9696 */
  --color-teal-back: 7, 26, 26;        /* 071a1a */

  --color-blue-lite: 102, 204, 255;    /* 66ccff */
  --color-blue-dark: 14, 107, 150;     /* 0e6b96 */
  --color-blue-back: 7, 20, 26;        /* 07141a */

  --color-green-lite: 102, 255, 102;   /* 66ff66 */
  --color-green-dark: 14, 150, 14;     /* 0e960e */
  --color-green-back: 7, 26, 7;        /* 071a07 */

  --color-yellow-lite: 255, 255, 102;  /* ffff66 */
  --color-yellow-dark: 150, 150, 14;   /* 96960e */
  --color-yellow-back: 26, 26, 7; }    /* 1a1a07 */



/*****************************************/
/* Extended structure for image elements */
/*****************************************/

:root {

  --svgicon-failure: url('/images/failure');
  --svgicon-information: url('/images/information');
  --svgicon-success: url('/images/success');
  --svgicon-warning: url('/images/warning'); }



/************************************/
/* Initial default for all elements */
/************************************/

* {
  border-collapse: collapse;
  border-spacing: 0;
  border-width: 0;
  box-sizing: border-box;
  color: rgba(var(--foreground), 1);
  font-family: arial;
  font-size: 1vw;
  font-style: normal;
  font-weight: normal;
  letter-spacing: .05rem;
  line-height: 1vw;
  list-style-type: none;
  margin: 0;
  outline: none !important;
  padding: 0;
  page-break-after: avoid;
  page-break-before: avoid;
  page-break-inside: avoid;
  scroll-behavior: smooth;
  text-align: left;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap; }



/**********************************/
/* Elements which are very common */
/**********************************/

body {
  background-color: rgba(var(--background), 1); }



/**********************************/
/* Elements which are very common */
/**********************************/

a, b, i, li, p, span {
  white-space: normal; }

a, b, i, span {
  color: inherit;
  line-height: inherit;
  font-size: inherit;
  white-space: inherit; }



/**********************************/
/* Elements which are very common */
/**********************************/

a {
  color: rgba(var(--pretty), 0.75);
  cursor: pointer;
  transition: color 300ms ease-in-out; }

a:hover {
  color: rgba(var(--pretty), 1); }



/**********************************/
/* Elements which are very common */
/**********************************/

b { font-weight: bold; }
i { font-style: italic; }



/**********************************/
/* Elements which are very common */
/**********************************/

p { margin: .5rem 0 .5rem 0; }

p:first-child {
  margin-top: 0; }



/**********************************/
/* Elements which are very common */
/**********************************/

h1, h2, h3 {
  color: rgba(var(--pretty), .75);
  font-weight: bold;
  margin: .5rem 0 .5rem 0; }

h1:first-child,
 h2:first-child,
 h3:first-child {
  margin-top: 0; }

h1 {
  font-size: 2rem;
  line-height: 2rem; }

h2 {
  font-size: 1.5rem;
  line-height: 1.5rem; }

h3 {
  font-size: 1rem;
  line-height: 1rem; }



/************************************/
/* Styles for scroll bar and handle */
/************************************/

::-webkit-scrollbar {
  background-color: transparent;
  height: 1rem;
  width: .9rem; }

::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: rgba(var(--scroll), .8);
  border-color: transparent;
  border-radius: .5rem;
  border-style: solid;
  border-width: .2rem; }

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--scroll), 1); }

::-webkit-scrollbar-corner {
  background-color: transparent; }
