/**
  *  Root Fonts, Text types & Header
  * 
  * This sets a standard text properties for the HPD framework environment
*/
:root 
{

  

  /** Default Font Size 
  */
  --fs: 14px;
  
  
  
  /** Default Line Height 
  */
  --lh: 1.5rem;


  
  /** Default Font Family 
  */
  --def-font: 
  "Arial", 
  "Helvetica", 
  "sans-serif";


  
  /** Alternitive Font Family 
  */
  --alt-font: 
  "Segoe UI Emoji", 
  "Segoe UI Symbol", 
  "Arial", 
  "Helvetica", 
  "sans-serif";

}











/*----------------------------------------------------------------------------
* Font Family
*----------------------------------------------------------------------------*/
.def-font { font-family: var(--def-font) !important; }
.alt-font { font-family: var(--alt-font) !important; }










/*----------------------------------------------------------------------------
* Text Size, Weight Style Properties
*----------------------------------------------------------------------------*/
.i
{
  font-style: italic !important;
}

.u 
{
  text-decoration: underline !important;
}

.b
{
  font-weight: bold !important;
}

.tc 
{
  text-align: center !important;
}

.cp 
{
  cursor: pointer !important;
}





.strong 
{
  font-weight: 800 !important;
}

.txt-0x7
{
  font-size: 0.8rem !important;
}

.txt-0x8
{
  letter-spacing: 0.020rem;
  font-size: 0.8rem !important;
}

.txt-0x9
{
  letter-spacing: 0.020rem;
  font-size: 0.9rem !important;
}

.txt-1x0
{
  font-size: 1rem !important;
}

.txt-1x1
{
  font-size: 1.1rem !important;
}

.txt-1x2
{
  font-size: 1.2rem !important;
}
.txt-1x3
{
  font-size: 1.3rem !important;
}

.txt-1x4
{
  font-size: 1.4rem !important;
}











/*----------------------------------------------------------------------------
* Container Line Heights
*----------------------------------------------------------------------------*/
.lh-1x0 
{
  line-height: 1rem !important;
}
.lh-1x2 
{
  line-height: 1.2rem !important;
}
.lh-1x3 
{
  line-height: 1.3rem !important;
}
.lh-1x4 
{
  line-height: 1.4rem !important;
}
.lh-1x5 
{
  line-height: 1.5rem !important;
}
.lh-1x6 
{
  line-height: 1.6rem !important;
}
.lh-1x7
{
  line-height: 1.7rem !important;
}
.lh-1x8 
{
  line-height: 1.8rem !important;
}
.lh-1x9
{
  line-height: 1.9rem !important;
}
.lh-2x0 
{
  line-height: 2rem !important;
}













/*----------------------------------------------------------------------------
* Clamped Text Style Properties
*----------------------------------------------------------------------------*/
.big-txt 
{
  line-height: 1.2;
  font-size: clamp(2.5rem, 3.5vw + 1rem, 4.5rem);
}

.big-up-txt 
{
  line-height: 1.3;
  text-transform: uppercase;
  font-size: clamp(2rem, 3.5vw + 1rem, 3.95rem);
}

.big-txt-bold
{
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 3.5vw + 1rem, 4.3rem);
}

.mid-txt 
{
  line-height: 1.3;
  font-size: clamp(1rem, 3.5vw + 1rem, 1.4rem);
}

.mid-up-txt 
{
  line-height: 1.2;
  font-size: clamp(1.1rem, 3.5vw + 1rem, 1.9rem);
}

.mid-txt-bold 
{
  font-weight: 800;
  line-height: 1.3;
  font-family: var(--def-font);
  font-size: clamp(1.2rem, 3.5vw + 1rem, 4.2rem);
}

.section-header-txt 
{
  font-weight: 800;
  line-height: 1.3;
  font-family: var(--def-font);
  font-size: clamp(1.2rem, 2vw + 1rem, 1.5rem);
}










/*----------------------------------------------------------------------------
* UI header Properties
*----------------------------------------------------------------------------*/
.header-1x0, 
.header-1x1, 
.header-1x2, 
.header-1x3, 
.header-1x4, 
.header-1x5 
{
  gap: 0.3rem;
  display: flex;
  min-height: 25px;
  align-content: center;
}

.header-1x0
{
  font-size: 1rem;
  font-weight: bold;
} 
.header-1x1
{
  font-size: 1.1rem;
  font-weight: bold;
} 
.header-1x2
{
  font-size: 1.2rem;
  font-weight: bold;
} 
.header-1x3
{
  font-size: 1.3rem;
  font-weight: bold;
} 
.header-1x4
{
  font-size: 1.4rem;
  font-weight: bold;
} 
.header-1x5
{
  font-size: 1.5rem;
  font-weight: bold;
} 











/*----------------------------------------------------------------------------
* Text Box components Properties
*----------------------------------------------------------------------------*/
.textbox 
{
  font-size: 1.05rem;
  line-height: 1.5;
}
.textbox header 
{
  min-height: 25px;
}

.line-block 
{
  padding: 0.5rem 0;
}










/*----------------------------------------------------------------------------
* Text Color Properties
*----------------------------------------------------------------------------*/
.red 
{
  color: #ff0000 !important;
}

.azul 
{
  color: #42ffff !important;
}

.blue
{
  color: var(--base-blue) !important;
}

.dark
{
  color: var(--prime-0) !important;
}

.green
{
  color: var(--base-green) !important;
}

.white
{
  color: #ffffff !important;
}

.purple
{
  color: var(--base-purple) !important;
}

.muted 
{
  opacity: 0.8 !important;
}