@import url("https://fonts.googleapis.com/css2?family=Almarai:wght@400;700&display=swap");

:root {
    --base-fontsize: 16px;
    --logo-spacing: 1rem;
    --logo-size: var(--height-medium);
    --logo-organisation-mobile: 2.6rem;
    --content-max-width: 24rem;
    --spacing-x-small: .214rem;
    --spacing-small: .5rem;
    --spacing-medium: 1rem;
    --spacing-large: 1.3rem;
    --spacing-x-large: 2rem;
    --spacing-xx-large: 2.8rem;
    --fontsize-small: .75rem;
    --fontsize-medium: 1rem;
    --fontsize-large: 1.3rem;
    --fontsize-x-large: 1.7rem;
    --fontsize-xx-large: 2.3rem;
    --height-x-small: 2rem;
    --height-small: 2.5rem;
    --height-medium: 3rem;
    --radius-none: 0;
    --radius-small: .25rem;
    --radius-medium: .85rem;
    --radius-round: 10rem;
    --color-grey-000: #FFFFFF;
    --color-grey-200: #F9F9F9;
    --color-grey-300: #F2F2F2;
    --color-grey-400: #DDDDE0;
    --color-grey-500: #B3B3B8;
    --color-grey-700: #8B8B90;
    --color-grey-800: #747476;
    --color-grey-900: #28282C;
    --color-grey-990: #0D0D0E;
    --color-blue-200: #D5E0EB;
    --color-blue-500: #31679B;
    --color-green-200: #CCE2DE;
    --color-green-500: #006E5B;
    --color-red-200: #FAE2DB;
    --color-red-500: #E4704A;
    --color-purple-200: #D7CEDF;
    --color-purple-500: #74528E;
    --color-orange-200: #FAEBD3;
    --color-orange-500: #E59925;
    --color-yellow-200: #FCF4DC;
    --color-yellow-500: #F0C952;
    --color-semantic-blue-200: #D8E6F3;
    --color-semantic-blue-500: #31679B;
    --color-semantic-green-200: #D1F0D6;
    --color-semantic-green-500: #006E5B;
    --color-semantic-orange-200: #FAEBD4;
    --color-semantic-orange-500: #CB8418;
    --color-semantic-red-200: #F8D3D1;
    --color-semantic-red-500: #DD3228;
    --color-body: var(--color-grey-900);
    --color-body-diapositive: var(--color-grey-200);
    --color-environment-primary: var(--color-grey-900);
    --color-environment-secondary: var(--color-grey-800);
    --color-environment-primary-text: var(--color-body-diapositive);
    --color-environment-secondary-text: var(--color-body-diapositive);
    --color-environment-bar-text: var(--color-body-diapositive);
    --text-environment-bar: '';
    --color-semantic-success-text: var(--color-semantic-green-200);
    --color-semantic-success-surface: var(--color-semantic-green-500);
    --color-semantic-notify-text: var(--color-semantic-blue-200);
    --color-semantic-notify-surface: var(--color-semantic-blue-500);
    --color-semantic-warn-text: var(--color-semantic-orange-200);
    --color-semantic-warn-surface: var(--color-semantic-orange-500);
    --color-semantic-error-text: var(--color-semantic-red-200);
    --color-semantic-error-surface: var(--color-semantic-red-500);
    --surface-vignet: var(--color-grey-900);
    --text-vignet: var(--color-body-diapositive);
}

.app-logo-blue .app-logo-vignet {
    --surface-vignet: var(--color-blue-500);
}

.app-logo {
    display: flex;
    align-items: center;
    gap: var(--logo-spacing);
    font-size: var(--fontsize-large);
    font-weight: 600;
}

.app-logo-vignet {
    background: var(--surface-vignet);
    color: var(--text-vignet);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: var(--logo-size);
    width: var(--logo-size);
    border-radius: calc(var(--logo-size) / 3)/calc(var(--logo-size) / 2.65);
}

/* Belastingen overwrites. */
.app-logo {
    --logo-size: 40px;
    text-decoration: none;
    font-family: "Almarai", "Times new Roman", "Helvetica neue", "Arial", sans-serif;
}

.app-logo-vignet {
    font-size: 16.7px !important;
}

.belastingen-logo-container {
    position: absolute;
    left: 8px;
    top: 10px;
}