:root,
* {
  --font-size-xs: calc((var(--font-base-size) / var(--font-scale-ratio)) / var(--font-scale-ratio));
  --font-size-sm: calc(var(--font-size-xs) * var(--font-scale-ratio));
  --font-size-md: calc(var(--font-base-size) * var(--font-scale-ratio));
  --font-size-lg: calc(var(--font-size-md) * var(--font-scale-ratio));
  --font-size-xl: calc(var(--font-size-lg) * var(--font-scale-ratio));
  --font-size-xxl: calc(var(--font-size-xl) * var(--font-scale-ratio));
  --font-size-xxxl: calc(var(--font-size-xxl) * var(--font-scale-ratio));
  --font-size-xxxxl: calc(var(--font-size-xxxl) * var(--font-scale-ratio));
}

@media screen and (max-width: 768px) {
  :root,
  * {
    --font-scale-ratio: 1.1; 
  }
}



html {
  overflow-y: auto;
  height: -webkit-fill-available;
}

html::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


/* BODY */
body {
  color: var(--ecb-blue);
  font-size: var(--font-base-size);
  font-family: Arial;
  background-color: #fff;
  height: -webkit-fill-available;
}


/* FONTS */
.t-col-pri {
  color: var(--font-color-pri);
}

.t-col-sec {
  color: var(--font-color-sec);
}


/* KEEP HEIGHT FOR EMPTY DIVS*/
.min-el-height {
  min-height: 1.5em;
}