:root {

    --white: #FFFFFF;
    
    --blue: #0055ff;
    --blue-light: #F1F4FC;
    --blue-dark: #2F4C9B;

    --ink: #393C44;
    --grey-7: #808192;
    --grey-5: #ADAEC4;
    
    --grey: #F2F2F2;
    --grey-1: var(--grey-1);
    --grey-4: #e8e8ef;
    --grey-4: #E6E6E6;

    --red: #E26D69;
    --red-light:#FFE6E6;
    --red-dark: #800400;


    --font-black: "Inter Black";
    --font-bold: "Inter Bold";
    --fontsemibold: "Inter Medium";
    --font-normal: "Inter";

    --bodytext: var(--font-normal) "regular" var(--secondary100) 16pt;
    --bigbodytext: var(--font-normal) "regular" var(--secondary100) 20pt;
    --smallbodytext: var(--font-normal) "regular" var(--secondary100) 12pt;
    --lightbodytext: "regular" "normal" 16pt  var(--font-normal);
    --heavybodytext: var(--font-bold) "regular" var(--secondary100) 16pt;
    --quotation: var(--font-normal) "italics" var(--darkslate) 16pt;
    --smallheavybodytext: var(--font-bold) "regular" var(--secondary100) 14pt;


}

html, body {
    font-family: inter;
    color: var(--ink);
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

#app {
    height: 100%;
    box-sizing: border-box;
    overflow-y: hidden;
}

h1 {
    font-family: var(--font-black);
    font-size: 36pt;
    color: var(--secondary100);
}

h2 {
    font-family: var(--font-bold);
    font-size: 30pt;
    color: var(--secondary100);
}

h3 {
    font-family: var(--font-bold);
    font-size: 24pt;
    color: var(--secondary60);
}

h4 {
    font-family: var(--font-bold);
    font-size: 18pt;
    color: var(--ink);
}

h5 {
    font-family: var(--font-black);
    font-size: 14pt;
    color: var(--secondary100);
}

h5 {
    font-family: var(--font-black);
    font-size: 12pt;
    color: var(--darkslate);
}

textarea {
    font-family: var(--font-normal);
}

.hoverable:hover {
    cursor: pointer;
}

/* Top bottom spacing */

.bb-margin-m {
    margin-bottom: var(--spacing-m);
}
* + .bb-margin-m {
    margin-top: var(--spacing-m);
}

.bb-margin-xl {
    margin-bottom: var(--spacing-xl);
}

* + .bb-margin-xl {
    margin-top: var(--spacing-xl);
}

/* Table styles */
.bb-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    margin-bottom: var(--spacing-xl);
}

* + .bb-table { 
    margin-top: var(--spacing-xl)
}

.bb-table th {
    padding: var(--spacing-l) var(--spacing-m);
    text-align: left;
    vertical-align: bottom;
}

.bb-table td {
    padding: var(--spacing-l) var(--spacing-m);
    vertical-align: top;
}

.bb-table td > :last-child { margin-bottom: 0; }