@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  src: url( './fonts/OpenSans-Regular.ttf' ) format( 'truetype' );
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 700;
  src: url( './fonts/OpenSans-Bold.ttf' ) format( 'truetype' );
}

:root {
  --shadow-container:     
    0 0 1px 1px #e9ebed,
    0 1px 8px 2px #0007161f;  
  --shadow-container-active: 
    0px 1px 1px 1px #e9ebed, 
    0px 6px 36px #0007161a;

  --color-primary: #000716;
  --color-primary-disabled: #e9ebed;
  --color-primary-hover: #033160;
  --color-error: #d91515;
  --color-inactive: #5f6b7a;
  --color-link: #0972d3;  
  --color-inverted: #ffffff;    
  --color-secondary: #414d5c;
  --color-secondary-disabled: #9ba7b6;  
  --color-secondary-hover: #f2f8fd;  
  --color-success: #037f0c;
  --color-warning: #8d6605;

  /* Convert black to color via filter */
  /* https://codepen.io/sosuke/pen/Pjoqqp */  
  --filter-color-primary:
    brightness( 0 ) 
    saturate( 100% )          
    invert( 4% ) 
    sepia( 24% ) 
    saturate( 4129% ) 
    hue-rotate( 186deg ) 
    brightness( 102% ) 
    contrast( 107% );
  --filter-color-primary-disabled:
    brightness( 0 ) 
    saturate( 100% )          
    invert( 100% ) 
    sepia( 1% ) 
    saturate( 3425% ) 
    hue-rotate( 176deg ) 
    brightness( 99% ) 
    contrast( 87% );
  --filter-color-primary-hover:
    brightness( 0 ) 
    saturate( 100% )          
    invert( 17% ) 
    sepia( 57% ) 
    saturate( 1418% ) 
    hue-rotate( 183deg ) 
    brightness( 90% ) 
    contrast( 107% );
  --filter-color-error:
    brightness( 0 ) 
    saturate( 100% )            
    invert( 14% ) 
    sepia( 98% ) 
    saturate( 3166% ) 
    hue-rotate( 350deg ) 
    brightness( 107% ) 
    contrast( 105% );
  --filter-color-inactive:
    brightness( 0 ) 
    saturate( 100% )              
    invert( 46% ) 
    sepia( 2% ) 
    saturate( 3672% ) 
    hue-rotate( 174deg ) 
    brightness( 87% ) 
    contrast( 91% );
  --filter-color-link:
    brightness( 0 ) 
    saturate( 100% )                
    invert( 26% ) 
    sepia( 98% ) 
    saturate( 3640% ) 
    hue-rotate( 196deg ) 
    brightness( 97% ) 
    contrast( 93% );  
  --filter-color-inverted:
    brightness( 0 ) 
    saturate( 100% )                  
    invert( 100% ) 
    sepia( 2% ) 
    saturate( 0% ) 
    hue-rotate( 173deg ) 
    brightness( 103% ) 
    contrast( 101% );
  --filter-color-secondary:
    brightness( 0 ) 
    saturate( 100% )                    
    invert( 25% ) 
    sepia( 43% ) 
    saturate( 260% ) 
    hue-rotate( 173deg ) 
    brightness( 98% ) 
    contrast( 89% );
  --filter-color-secondary-disabled:
    brightness( 0 ) 
    saturate( 100% )                      
    invert( 74% ) 
    sepia( 4% ) 
    saturate( 1016% ) 
    hue-rotate( 173deg ) 
    brightness( 90% ) 
    contrast( 85% );
  --filter-color-secondary-hover:
    brightness( 0 ) 
    saturate( 100% )                        
    invert( 88% ) 
    sepia( 40% ) 
    saturate( 36% ) 
    hue-rotate( 181deg ) 
    brightness( 103% ) 
    contrast( 99% );
  --filter-color-success:
    brightness( 0 ) 
    saturate( 100% )                          
    invert( 29% ) 
    sepia( 72% ) 
    saturate( 1725% ) 
    hue-rotate( 103deg ) 
    brightness( 91% ) 
    contrast( 98% );
  --filter-color-warning:
    brightness( 0 ) 
    saturate( 100% )                            
    invert( 34% ) 
    sepia( 88% ) 
    saturate( 1021% ) 
    hue-rotate( 23deg ) 
    brightness( 90% ) 
    contrast( 96% );
}

h1,
h2,
h3,
h4,
h5,
p {
  color: #000716;
  font-family: 'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif;
  margin: 0;      
  padding: 4px 0 4px 0;  
  text-rendering: optimizeLegibility;  
}

h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;          
}

h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
}

h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  margin: 4px 0 0 0;
}

h5 {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

p {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;    
}

p a {
  color: #0972d3;
  text-decoration: underline;
}

p a:hover {
  color: #033160;
}

p code {
  color: #000716;
  font-family: Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace;
  font-size: 12px;
  line-height: 16px;
}

p small {
  color: #5f6b7a;
  font-size: 12px;
  line-height: 16px;
  padding: 0;
}

p strong {
  font-weight: 700;
}

ol,
ul {
  margin: 8px 0 8px 0;
  padding: 0 0 0 20px;
}

ol {
  padding: 4px 0 0 20px;
}

ol li,
ul li {
  color: #000716;
  font-family: 'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 0;
  padding: 4px 0 0 0;
  text-rendering: optimizeLegibility;          
}

ol li:first-of-type,
ul li:first-of-type {
  padding: 0;
}

div.hbox {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

div.popover {
  background-color: #ffffff;
  border: solid 2px #9ba7b6;
  border-radius: 8px;
  box-shadow: rgba( 0, 7, 22, 0.10 ) 0px 4px 20px 1px;
  display: none;
  padding: 12px 16px 12px 16px;
}

div.select {
  background-color: #ffffff;
  border: solid 2px #7d8998;
  border-radius: 8px;
  display: none;
  position: absolute;
}

div.select ul {
  box-sizing: border-box;
  cursor: pointer;
  list-style-type: none;  
  margin: 0;
  padding: 0;
}

div.select rf-select-option {
  border-bottom: solid 1px #b5beca;
}

div.select rf-select-option:last-of-type {
  border-bottom: none;
}

div.vbox {
  display: flex;
  flex-direction: column;
  gap: 16px;
}