:root {

  /*** COLORS ***/


  /* grey colors */

  --base-grey-color-50: #FAFAFA;
  --base-grey-color-100: #F5F5F5;
  --base-grey-color-200: #EEEEEE;
  --base-grey-color-300: #E0E0E0;
  --base-grey-color-400: #BDBDBD;
  --base-grey-color-500: #9E9E9E;
  --base-grey-color-600: #757575;
  --base-grey-color-700: #616161;
  --base-grey-color-800: #424242;
  --base-grey-color-900: #212121;

  /* papiroti colors */

  --base-papiroti-green: #00c896;
  --base-papiroti-yellow: #fac800;
  --base-papiroti-target-red: #DE2322;

  --base-papiroti-blue-pale: #e6f0fa;
  --base-papiroti-blue-dark-pale: #cde5f8;
  --base-papiroti-blue-1: #00c8fa;
  --base-papiroti-blue-2: #00afe1;
  --base-papiroti-blue-3: #0096c8;
  --base-papiroti-blue-4: #007daf;
  --base-papiroti-blue-5: #006496;
  --base-papiroti-blue-6: #004b7d;
  --base-papiroti-blue-7: #003264;

  --base-papiroti-blue-7-alpha-30: rgba(0, 50, 100, 0.3);

  --base-papiroti-blue-7-box-shadow: rgba(0, 50, 100, 0.3);
  --base-papiroti-box-shadow: 0 3px 8px var(--base-papiroti-blue-7-box-shadow);;

  --base-paper-products-card-hover-linear-gradient-background: linear-gradient(to bottom, #e6f0fa 60%, transparent);
  --base-travel-program-card-hover-linear-gradient-background: linear-gradient(to bottom, #e6f0fa 60%, transparent);
  --base-industrial-paper-bags-hover-linear-gradient-background: linear-gradient(to left, #e6f0fa 60%, transparent);



  /* error colors */

  --base-error-color: #E53935;
  --base-error-color--light: #E57373;



  /*** FONTS ***/

  --base-font-family: "Mulish", "Helvetica", "Arial", sans-serif;
  --base-caveat-font-family: "Caveat", cursive;
  --base-font-weight: 400;
  --base-font-size: 16px;

  --base-font-thin-weight: 100;
  --base-font-light-weight: 300;
  --base-font-regular-weight: 400;
  --base-font-medium-weight: 500;
  --base-font-bold-weight: 700;
  --base-font-black-weight: 900;


  /*** SIZES ***/

  --base-page-max-width: 960px;


  /* top bar sizes */

  --base-top-bar-height: 120px;



}

html {
  box-sizing: border-box;
}

*,
*:after,
*:before {
  box-sizing: inherit;
}

html, body {
  padding: 0;
  margin: 0;

  width: 100%;
  min-width: 0;

  /*height: 100vh;*/
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  flex: 1 1 auto;

  font-family: var(--base-font-family);
  font-weight: var(--base-font-weight);
  font-size: var(--base-font-size);

  background-color: #fff;
  /*background-color: var(--base-grey-color-300);*/
}

a.no-style:link {
  text-decoration: inherit;
  color: inherit;
  cursor: pointer;
}

a.no-style:visited {
  text-decoration: inherit;
  color: inherit;
  cursor: pointer;
}

.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

body::-webkit-scrollbar {
  width: 6px;
}

body::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
  /*background-color: var(--base-grey-color-50);*/
  background-color: transparent;
}

body::-webkit-scrollbar-thumb {
  /*background-color: var(--base-grey-color-500);*/
  background-color: var(--base-papiroti-yellow);
  /*outline: 1px solid slategrey;*/
  border-radius: 3px;
}

/* find overflowing element */
/** {
  outline: 1px solid #f00 !important;
  opacity: 1 !important;
  visibility: visible !important;
}*/