/* LUDINAUTES • main.css (vers:1.0.0)
© 2025 Dooprod Workshop, https://dooprod.com */


/* UTILS */


/* @import 'utils/preflight.css'; */


/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */


/*
Document
========
*/


/**
Use a better box model (opinionated).
*/


*,
::before,
::after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}


html {
	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	line-height: 1.15; /* 1. Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	-moz-tab-size: 4;
	  -o-tab-size: 4;
	     tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}


/*
Sections
========
*/


body {
	margin: 0; /* Remove the margin in all browsers. */
}


/*
Text-level semantics
====================
*/


/**
Add the correct font weight in Chrome and Safari.
*/


b,
strong {
	font-weight: bolder;
}


/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/


code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}


/**
Add the correct font size in all browsers.
*/


small {
	font-size: 80%;
}


/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/


sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}


sub {
	bottom: -0.25em;
}


sup {
	top: -0.5em;
}


/*
Tabular data
============
*/


/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/


table {
	border-color: currentcolor;
}


/*
Forms
=====
*/


/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/


button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}


/**
Correct the inability to style clickable types in iOS and Safari.
*/


button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}


/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/


legend {
	padding: 0;
}


/**
Add the correct vertical alignment in Chrome and Firefox.
*/


progress {
	vertical-align: baseline;
}


/**
Correct the cursor style of increment and decrement buttons in Safari.
*/


::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}


/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/


[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}


/**
Remove the inner padding in Chrome and Safari on macOS.
*/


::-webkit-search-decoration {
	-webkit-appearance: none;
}


/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/


::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}


/*
Interactive
===========
*/


/*
Add the correct display in Chrome and Safari.
*/


summary {
	display: list-item;
}


/* GLOBAL */


/* BODY */


*
{
	border:0;
    margin:0;
	padding:0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}


body,
html
{
    margin:0;
    padding:0;
    background-color: rgba( 255, 255, 255, 1.0 );

    font-weight: 400;
    font-family: sans-serif;
    font-family: 'Inter', sans-serif;
    /* font-family: 'Calibri', 'Arial', sans-serif; */
    /* font-family: 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif; */

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


body:has( .overlay > .modal.open )
{
    overflow: hidden;
}


body:has( .user-stats )
{
    overflow: hidden;
}


a
{
    color: black;
    text-decoration: none;
}


a:hover
{
    color: black;
    cursor: pointer;
}


/* SWUP */


html.is-changing .transition-fade
{
    opacity: 1;

    -webkit-transition: opacity;

    transition: opacity;
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
}


html.is-animating .transition-fade
{
    opacity: 0.0;
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
}


html.is-leaving .transition-fade
{
    opacity: 0.0;
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
}


html.is-rendering .transition-fade
{
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
    -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
}


/* USER-STATS */


#user-stats.is-changing
{
    opacity: 1.0;

    -webkit-transition:
    opacity 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 );

    transition:
    opacity 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 );    
}


#user-stats.is-animating
{
    opacity: 0.0;
}


#user-stats.is-leaving
{
    opacity: 0.0;
}


#user-stats.is-changing > .container
{
    opacity: 1.0;

    -webkit-transform: translateY( 0px );

            transform: translateY( 0px );

    -webkit-transition:
        opacity 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 ),
        -webkit-transform 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 );

    transition:
        opacity 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 ),
        -webkit-transform 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 );

    transition:
        opacity 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 ),
        transform 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 );

    transition:
        opacity 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 ),
        transform 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 ),
        -webkit-transform 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 );
}


#user-stats.is-animating > .container
{
    opacity: 0.0;

    -webkit-transform: translateY( 10vh );

            transform: translateY( 10vh );
}


#user-stats.is-leaving > .container
{
    opacity: 0.0;
    
    -webkit-transform: translateY( 0px );
    
            transform: translateY( 0px );
}


/* RESOURCES */


#resources-show.is-changing
{
    opacity: 1.0;

    -webkit-transition:
    opacity 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 );

    transition:
    opacity 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 );    
}


#resources-show.is-animating
{
    opacity: 0.0;
}


#resources-show.is-leaving
{
    opacity: 0.0;
}


#resources-show.is-changing > .container
{
    opacity: 1.0;

    -webkit-transform: translateY( 0px );

            transform: translateY( 0px );

    -webkit-transition:
        opacity 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 ),
        -webkit-transform 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 );

    transition:
        opacity 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 ),
        -webkit-transform 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 );

    transition:
        opacity 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 ),
        transform 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 );

    transition:
        opacity 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 ),
        transform 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 ),
        -webkit-transform 0.4s cubic-bezier( 0.250, 0.460, 0.450, 0.940 );
}


#resources-show.is-animating > .container
{
    opacity: 0.0;

    -webkit-transform: translateY( 10vh );

            transform: translateY( 10vh );
}


#resources-show.is-leaving > .container
{
    opacity: 0.0;
    
    -webkit-transform: translateY( 0px );
    
            transform: translateY( 0px );
}


/* FONTS */


/* INTER */


/* Thin (100) */


@font-face
{
    font-family: "Inter";
    font-style: normal;
    font-weight: 100;

    src: url('../fonts/inter/Inter-Thin.woff2') format('woff2');
}


/* Extralight (200) */


@font-face
{
    font-family: "Inter";
    font-style: normal;
    font-weight: 200;

    src: url('../fonts/inter/Inter-ExtraLight.woff2') format('woff2');
}


/* Light (300) */


@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300;

    src: url('../fonts/inter/Inter-Light.woff2') format('woff2');
}


/* Regular (400) */


@font-face
{
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    
    src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
}


/* Medium (500) */


@font-face
{
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    
    src: url('../fonts/inter/Inter-Medium.woff2') format('woff2');
}


/* Semibold (600) */


@font-face
{
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;

    src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2');
}


/* Bold (700) */


@font-face
{
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;

    src: url('../fonts/inter/Inter-Bold.woff2') format('woff2');
}


/* Extrabold (800) */


@font-face
{
    font-family: "Inter";
    font-style: normal;
    font-weight: 800;

    src: url('../fonts/inter/Inter-ExtraBold.woff2') format('woff2');
}


/* Black (900) */


@font-face
{
    font-family: "Inter";
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/inter/Inter-Black.woff2') format('woff2');
}


/* ELEMENTS */


/*  ********************************
    BUTTON
    ******************************** */


/* BUTTON -> DEFAULT */


button
{
    opacity:1.0;
    
    display: -ms-grid;
    
    display: grid;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    grid-template-columns: repeat( auto-fit, minmax( -webkit-max-content, 0 ) );
    grid-template-columns: repeat( auto-fit, minmax( max-content, 0 ) );

    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 255, 255, 255, 1.0 );

    -webkit-transition-duration: 0.1s;

            transition-duration: 0.1s;
    -webkit-transition-property: border-color, background-color;
    transition-property: border-color, background-color;
}


button > svg
{
    width: 16px;
    height: 16px;

    margin: auto;
    display: block;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


button > .desc
{
    font-size: 14px;
    font-weight: 400;
    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


button > .label
{
    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


button:has( .desc )
{
    grid-gap: 4px;

    min-width: 128px;
}


button:hover
{
    cursor: pointer;

    border-style: solid;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 242, 242, 242, 1.0 );
}


button:active
{
    cursor: pointer;
}


button:disabled
{
    cursor:auto;

    border-style: solid;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 250, 250, 250, 1.0 );
}


/* BUTTON -> PRIMARY */


button.primary
{
    border-width: 0;
    
    background-color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


button.primary > svg
{
    color: rgba( 255, 255, 255, 1.0 );
}


button.primary > .desc
{
    color: rgba( 255, 255, 255, 1.0 );
}


button.primary > .label
{
    color: rgba( 255, 255, 255, 1.0 );
}


button.primary:hover
{
    background-color: rgba( 32, 32, 32, 1.0 );
}


button.primary:active
{
    background-color: rgba( 64, 64, 64, 1.0 );
}


button.primary:disabled
{
    background-color: rgba( 255, 255, 255, 1.0 );
}


/*  ********************************
    VARIANT
    ******************************** */


/* BUTTON (size) */


button.size-xs
{
    width: 18px;
    height: 18px;
}


button.size-s
{
    width: 24px;
    height: 24px;
}


button.size-m
{
    width: 32px;
    height: 32px;
}


button.size-l
{
    width: 48px;
    height: 48px;
}


button.size-xl
{
    width: 64px;
    height: 64px;
}


/* BUTTON (type) */


button.square
{
    border-radius: 0px;
}


button.circle  
{
    border-radius: 50%;
}


button.squircle
{
    border-radius: 16px;
}


button.rounded
{
    border-radius: 32px;
}


button.animated
{
    -webkit-animation-name: button-fade-in;
            animation-name: button-fade-in;
    -webkit-animation-duration: 0.1s;
            animation-duration: 0.1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: calc( 0.25s + var( --index ) * 0.05s );
            animation-delay: calc( 0.25s + var( --index ) * 0.05s );
}


/*  ********************************
    ANIMATIONS
    ******************************** */


@-webkit-keyframes button-fade-in
{
    0%
    {
        opacity: 0.0;
        -webkit-transform: translateX( 8px );
                transform: translateX( 8px );
    }
    
    100%
    {
        opacity: 1.0;
        -webkit-transform: translateX( 0 );
                transform: translateX( 0 );
    }
}


@keyframes button-fade-in
{
    0%
    {
        opacity: 0.0;
        -webkit-transform: translateX( 8px );
                transform: translateX( 8px );
    }
    
    100%
    {
        opacity: 1.0;
        -webkit-transform: translateX( 0 );
                transform: translateX( 0 );
    }
}


/* SEPARATOR */


.separator
{
    width: 2px;
    height: 12px;
    display: block;
    border-radius: 16px;
    background-color: rgba( 0.0, 0.0, 0.0, 0.25 );
}


/* CARD-LEVEL */


.card-level
{
    padding: 0 16px;
    
    overflow: hidden;
    text-decoration: none;
    background-color: rgba( 255, 255, 255, 1.0 );

    -webkit-transition-duration: 0.2s;

            transition-duration: 0.2s;
    -webkit-transition-property: background-color, -webkit-transform;
    transition-property: background-color, -webkit-transform;
    transition-property: transform, background-color;
    transition-property: transform, background-color, -webkit-transform;
}


.card-level:hover
{
    cursor: pointer;
    background-color: rgba( 248, 248, 248, 1.0 );
}


.card-level:focus
{
    cursor: pointer;
    background-color: rgba( 240, 240, 240, 1.0 );
}


.card-level > .grid
{
    display: -ms-grid;
    display: grid;
    grid-gap: 2px;
    -ms-grid-rows: 128px;
    grid-template-rows: 128px;
    -ms-grid-columns: 3fr 2px 1fr 2px 1fr 2px 1fr 2px 64px;
    grid-template-columns: 3fr 1fr 1fr 1fr 64px;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
    justify-items: end;
}


.card-level > .grid > *:nth-child(1)
{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}


.card-level > .grid > *:nth-child(2)
{
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}


.card-level > .grid > *:nth-child(3)
{
	-ms-grid-row: 1;
	-ms-grid-column: 5;
}


.card-level > .grid > *:nth-child(4)
{
	-ms-grid-row: 1;
	-ms-grid-column: 7;
}


.card-level > .grid > *:nth-child(5)
{
	-ms-grid-row: 1;
	-ms-grid-column: 9;
}


.card-level > .grid > .level
{
    display: -ms-grid;
    display: grid;
    grid-gap: 16px;
    -ms-grid-columns: 32px 16px 1fr;
    grid-template-columns: 32px 1fr;

    -ms-grid-column-align: start;

        justify-self: start;
}


.card-level > .grid > .level > .index
{
    font-size: 12px;
    font-weight: 400;
    color: rgba( 0.0, 0.0, 0.0, 1.0 );

    text-align: center;
    -ms-flex-line-pack: center;
        align-content: center;

    width: 32px;
    height: 32px;

    border-radius: 50%;
    border: 1px solid rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 255, 255, 255, 1.0 );
}


.card-level > .grid > .level > .info
{
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}


.card-level > .grid > .level > .info > .name
{
    font-size: 16px;
    font-weight: 400;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.card-level > .grid > .level > .info > .desc
{
    padding-top: 4px;

    font-size: 14px;
    font-weight: 400;
    color: rgba( 160, 160, 160, 1.0 );
}


.card-level > .grid > .value
{
    font-size: 16px;
    font-weight: 600;
    color :rgba( 128, 128, 128, 1.0 );
}


.card-level > .grid > .value.red
{
    color :rgba( 160, 0.0, 0.0, 1.0 );
}


.card-level > .grid > .value.green
{
    color :rgba( 0.0, 160, 0.0, 1.0 );
}


.card-level > .grid > .chevron
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    position: relative;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}


.card-level > .grid > .chevron > svg
{
    width: 16px;
    height: 16px;
    color: rgba( 224, 224, 224, 1.0 );

    -webkit-transition-duration: 0.2s;

            transition-duration: 0.2s;
    -webkit-transition-property: color;
    transition-property: color;
}


.card-level:hover > .grid > .chevron > svg
{
    color: rgba( 0, 0, 0, 1.0 );
}


/* CARD-MODULE */


.card-module
{
    height: 100%;
       
    display: -ms-grid;
       
    display: grid;
    grid-gap: 0px;
    -ms-grid-rows: -webkit-max-content 0px 1fr;
    -ms-grid-rows: max-content 0px 1fr;
    grid-template-rows: -webkit-max-content 1fr;
    grid-template-rows: max-content 1fr;

    overflow: hidden;

    border-width: 1px;
    border-style: solid;
    border-radius: 16px;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 250, 250, 250, 1.0 );
}


.card-module > .headline
{
    margin-top: 2px;
    padding: 16px 32px;

    font-size: 14px;
    font-weight: 600;
    color: rgba( 64, 64, 64, 1.0 );

    background-color: rgba( 250, 250, 250, 1.0 );
}


.card-module > .content
{
    padding: 32px;
    
    display: -ms-grid;
    
    display: grid;
    grid-gap: 8px;
    grid-template-rows: repeat( auto-fill, minmax( -webkit-max-content, 1fr ) );
    grid-template-rows: repeat( auto-fill, minmax( max-content, 1fr ) );

    border-style: solid;
    border-radius: 16px;
    border-width: 1px 0 0 0;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 255, 255, 255, 1.0 );
}


/* ITEM */


.card-module > .content > .item
{
    display: -ms-grid;
    display: grid;
    grid-gap: 0px;
    -ms-grid-columns: 1fr 0px -webkit-max-content;
    -ms-grid-columns: 1fr 0px max-content;
    grid-template-columns: 1fr -webkit-max-content;
    grid-template-columns: 1fr max-content;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
}


.card-module > .content > .item.icon
{
    display: -ms-grid;
    display: grid;
    grid-gap: 8px;
    -ms-grid-columns: 16px 8px 1fr 8px -webkit-max-content;
    -ms-grid-columns: 16px 8px 1fr 8px max-content;
    grid-template-columns: 16px 1fr -webkit-max-content;
    grid-template-columns: 16px 1fr max-content;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
}


.card-module > .content > .item > .icon
{
    width: 16px;
    height: 16px;
    color: rgba( 160, 160, 160, 1.0 );
}


.card-module > .content > .item > .label
{
    font-size: 16px;
    font-weight: 400;
    color: rgba( 128, 128, 128, 1.0 );
}


.card-module > .content > .item > .title
{
    font-size: 20px;
    font-weight: 600;
    color: rgba( 160, 160, 160, 1.0 );
}


.card-module > .content > .item > .value
{
    font-size: 16px;
    font-weight: 600;
    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.card-module > .content > .item > .value.green
{
    color: rgba( 0.0, 128, 0.0, 1.0 );
}


/* ITEM -> BADGE */


.card-module > .content > .item > .value > .badge
{
    padding: 8px 12px;

    width: -webkit-max-content;

    width: -moz-max-content;

    width: max-content;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 1 / 1 / 2 / 2;

    display: -ms-grid;

    display: grid;
    grid-gap: 4px;
    -ms-grid-columns: 12px 4px 1fr;
    grid-template-columns: 12px 1fr;

    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    border-color: rgba( 0.0, 128, 0.0, 0.25 );
    
    background-color: rgba( 0.0, 255, 0.0, 0.25 );
}


.card-module > .content > .item > .value > .badge > .icon
{
    margin-top: -1px;

    width: 12px;
    height: 12px;

    color: rgba( 0.0, 128, 0.0, 1.0 );
}


.card-module > .content > .item > .value > .badge > .state
{
    font-size: 12px;
    font-weight: 400;
    color: rgba( 0.0, 128, 0.0, 1.0 );
}


/* LUDINAUTES.ID */


.ludinautesID
{
    width: 512px;
    height: 256px;
    
    display: -ms-grid;
    
    display: grid;
    grid-gap: 0px;
    -ms-grid-columns: 160px 0px 32px 0px 1fr;
    grid-template-columns: 160px 32px 1fr;

    overflow: hidden;
    
    border-width: 2px;
    border-style: solid;
    border-radius: 16px;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 255, 255, 255, 1.0 );

    background: 
        linear-gradient(135deg,#0000 20.5%,#ffffff 0 29.5%,#0000 0) 0 16px,
        linear-gradient( 45deg,#0000 8%,#ffffff 0 17%, #0000 0 58%) 32px 0,
        linear-gradient(135deg,#0000 8%,#ffffff 0 17%, #0000 0 58%,#ffffff 0 67%,#0000 0),        
        linear-gradient( 45deg,#0000 8%,#ffffff 0 17%, #0000 0 58%,#ffffff 0 67%,#0000 0 83%,#ffffff 0 92%,#0000 0),
        rgba( 252, 252, 252, 1.0 );

    background-size: 64px 64px;

    -webkit-animation-delay: 0.5s;

            animation-delay: 0.5s;
    -webkit-animation-duration: 1.25s;
            animation-duration: 1.25s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-name: ludinautesID-fade-in;
            animation-name: ludinautesID-fade-in;
    -webkit-animation-timing-function: cubic-bezier( 0.0, 1.25, 0.5, 1.0 );
            animation-timing-function: cubic-bezier( 0.0, 1.25, 0.5, 1.0 );
}


.ludinautesID > .avatar
{
    display:-ms-grid;
    display:grid;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    border-style: solid;
    border-width: 0 2px 0 0;
    border-color: rgba( 224, 224, 224, 1.0 );

    -webkit-backdrop-filter: blur( 8px );

            backdrop-filter: blur( 8px );

    background-image:
        repeating-linear-gradient( -45deg, 
        rgba( 252, 252, 252, 1.0 ) 0, 
        rgba( 255, 255, 255, 1.0 ) 5px, 
        transparent 0, 
        transparent 50% );

    background-size: 13px 13px;
    
    background-color: rgba( 252, 252, 252, 0.5 );
}


.ludinautesID > .avatar > img
{
    width: 192px;
    height: 192px;
    margin-bottom: -4px;
}


.ludinautesID > .banner
{
    display: -ms-grid;
    display: grid;
    grid-gap: 16px;
    -ms-grid-rows: 64px;
    grid-template-rows: 64px;
    -ms-grid-columns: 64px 16px 1fr;
    grid-template-columns: 64px 1fr;

    -webkit-transform: translate( -32px, 32px );

            transform: translate( -32px, 32px );
}


.ludinautesID > .banner > *:nth-child(1)
{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}


.ludinautesID > .banner > *:nth-child(2)
{
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}


.ludinautesID > .banner > .logo
{
    width: 64px;
    height: 64px;

    -ms-flex-line-pack: center;

        align-content: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 250, 250, 250, 1.0 );
}


.ludinautesID > .banner > .logo > svg
{
    width: 32px;
    height: 32px;
    margin: auto;
    display: block;

    color: rgba( 64, 64, 64, 1.0 );
}


.ludinautesID > .banner > .brand
{
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    font-size: 20px;
    font-weight: 600;
    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.ludinautesID > .profile
{
    padding-right: 32px;
    padding-bottom: 32px;

    -ms-grid-row-align: end;

    -ms-grid-column-align: end;

    place-self: end;
    text-align: right;
}


.ludinautesID > .profile > .name
{
    font-size: 28px;
    font-weight: 600;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.ludinautesID > .profile > .role
{
    font-size: 24px;
    font-weight: 400;

    color: rgba( 128, 128, 128, 1.0 );
}


/* ANIMATIONS */


@-webkit-keyframes ludinautesID-fade-in
{
    0%
    {
        opacity: 0.0;

        -webkit-transform: scale( 0.25 );

                transform: scale( 0.25 );
    }
    
    100%
    {
        opacity: 1.0;

        -webkit-transform: scale( 1.0 );

                transform: scale( 1.0 );
    }
}


@keyframes ludinautesID-fade-in
{
    0%
    {
        opacity: 0.0;

        -webkit-transform: scale( 0.25 );

                transform: scale( 0.25 );
    }
    
    100%
    {
        opacity: 1.0;

        -webkit-transform: scale( 1.0 );

                transform: scale( 1.0 );
    }
}


/* LIVEWIRE -> LAYOUT */


/* HEADER */


header
{
    width: 100vw;
    height: 0;
    
    z-index: 99;
    position: fixed;
}


header > .globalnav
{
    top: 0;
    left: 0;
    
    width: 100%;
    height: 64px;

    position: fixed;
    overflow: hidden;

    display: -ms-grid;

    display: grid;
    -ms-grid-rows: 64px auto;
    grid-template-rows: 64px auto;

    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: rgba( 224, 224, 224, 1.0 );
    
    -webkit-backdrop-filter: blur( 16px ) saturate( 180% );
    
            backdrop-filter: blur( 16px ) saturate( 180% );

    background-color: rgba( 255, 255, 255, 0.8 );

    -webkit-transition-duration: 0.2s;

            transition-duration: 0.2s;
    -webkit-transition-property: border-color, background-color, -webkit-backdrop-filter;
    transition-property: border-color, background-color, -webkit-backdrop-filter;
    transition-property: backdrop-filter, border-color, background-color;
    transition-property: backdrop-filter, border-color, background-color, -webkit-backdrop-filter;
}


header > .globalnav.open
{
    /* height: 0px; */
}


header > .globalnav.close
{
    height: auto;
}


header > .globalnav.scrolled
{
    border-color: rgba( 224, 224, 224, 1.0 );

    -webkit-backdrop-filter: blur( 16px ) saturate( 180% );

            backdrop-filter: blur( 16px ) saturate( 180% );

    background-color: rgba( 255, 255, 255, 0.8 );
}


/* HEADER -> GLOBALNAV -> CONTENT */


header > .globalnav > .content
{
    width: 100%;
    margin: 0 auto;
    max-width: 980px;

    display: -ms-grid;

    display: grid;
    grid-gap: 8px;
    -ms-grid-rows: 64px;
    grid-template-rows: 64px;
    -ms-grid-columns: 1fr 8px -webkit-min-content;
    -ms-grid-columns: 1fr 8px min-content;
    grid-template-columns: 1fr -webkit-min-content;
    grid-template-columns: 1fr min-content;
    
    -webkit-box-align: center;
    
        -ms-flex-align: center;
    
            align-items: center;
}


header > .globalnav > .content > *:nth-child(1)
{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}


header > .globalnav > .content > *:nth-child(2)
{
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}


header > .globalnav > .content > .website
{
    display: -ms-grid;
    display: grid;
    grid-gap: 8px;
    -ms-grid-columns: 32px 8px 2px 8px 1fr;
    grid-template-columns: 32px 2px 1fr;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
    justify-items: start;
}


header > .globalnav > .content > .website > a
{
    opacity:1.0;
    width: 32px;
    height: 32px;
    
    display: -ms-grid;
    
    display: grid;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    grid-template-columns: repeat( auto-fit, minmax( -webkit-max-content, 0 ) );
    grid-template-columns: repeat( auto-fit, minmax( max-content, 0 ) );

    border-width: 1px;
    border-style: solid;
    border-radius: 50%;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 255, 255, 255, 1.0 );

    -webkit-transition-duration: 0.1s;

            transition-duration: 0.1s;
    -webkit-transition-property: border-color, background-color;
    transition-property: border-color, background-color;
}


header > .globalnav > .content > .website > a > svg
{
    width: 16px;
    height: 16px;

    margin: auto;
    display: block;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


header > .globalnav > .content > .website > a:hover
{
    cursor: pointer;

    border-style: solid;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 242, 242, 242, 1.0 );
}


header > .globalnav > .content > .website > a:active
{
    cursor: pointer;
}


header > .globalnav > .content > .website > a:disabled
{
    cursor:auto;

    border-style: solid;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 250, 250, 250, 1.0 );
}


header > .globalnav > .content > .website > .name
{
    margin-top: -2px;

    font-size: 14px;
    font-weight: 400;
    letter-spacing: -.01em;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


header > .globalnav > .content > .toolbar
{
    display: -ms-grid;
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat( auto-fit, minmax( -webkit-max-content, 0 ) );
    grid-template-columns: repeat( auto-fit, minmax( max-content, 0 ) );

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
}


header > .globalnav > .content > .toolbar > .user
{
    margin-top: -2px;

    font-size: 14px;
    font-weight: 400;
    letter-spacing: -.01em;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


header > .globalnav > .content > .toolbar > button > #svg-menu,
header > .globalnav > .content > .toolbar > button > #svg-search,
header > .globalnav > .content > .toolbar > button > #svg-profile
{
    display: block;
}


header > .globalnav > .content > .toolbar > button > #svg-close
{
    display: none;
}


/* HEADER -> GLOBALNAV -> FLYOUT */


header > .globalnav > .flyout
{
    /* width: 100%;
    margin: 0 auto;
    max-width: 980px; */
}


/* HEADER -> GLOBALNAV -> FLYOUT -> NAVIGATION */


header > .globalnav > .flyout > .navigation
{
    
    opacity: 0.0;
    display: none;
    
    padding: 8px 0 0 0;

    grid-gap: 32px;
    -ms-grid-rows: 1fr 32px 80px;
    grid-template-rows: 1fr 80px;
}


header > .globalnav > .flyout > .navigation > .links
{
    width: 100%;
    margin: 0 auto;
    max-width: 980px;

    display: -ms-grid;

    display: grid;
    grid-gap: 16px;
    -ms-grid-columns: 1fr 16px 1fr 16px 1fr 16px 1fr;
    grid-template-columns: repeat( 4, 1fr );
}


header > .globalnav > .flyout > .navigation > .links > a
{
    opacity: 0.0;
    padding: 16px;

    display: -ms-grid;

    display: grid;
    grid-gap: 2px;
    -ms-grid-rows: 1fr 2px 16px 2px 16px;
    grid-template-rows: 1fr 16px 16px;
    
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    border-color: rgba( 224, 224, 224, 1.0 );

    outline: 0px solid rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 250, 250, 250, 1.0 );

    -webkit-transition-duration: 0.1s;

            transition-duration: 0.1s;
    -webkit-transition-property: outline, border-color, background-color;
    transition-property: outline, border-color, background-color;
}


header > .globalnav > .flyout > .navigation > .links > a:hover
{
    cursor: pointer;

    border-color: rgba( 224, 224, 224, 1.0 );
    background-color: rgba( 242, 242, 242, 1.0 );
}


header > .globalnav > .flyout > .navigation > .links > a:active,
header > .globalnav > .flyout > .navigation > .links > a.target
{
    cursor: auto;

    border-width: 1px;

    border-color: rgba( 208, 208, 208, 1.0 );

    outline: 4px solid rgba( 232, 232, 232, 1.0 );

    background-color: rgba( 255, 255, 255, 1.0 );
}


header > .globalnav > .flyout > .navigation > .links > a > svg
{
    width: 24px;
    height: 24px;
    display: block;

    margin-bottom: 24px;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


header > .globalnav > .flyout > .navigation > .links > a > .title
{
    font-size: 12px;
    font-weight: 400;
    color:  rgba( 0.0, 0.0, 0.0, 1.0 );
}


header > .globalnav > .flyout > .navigation > .links > a > .description
{
    font-size: 12px;
    font-weight: 400;
    color: rgba( 128, 128, 128, 1.0 );
}


header > .globalnav > .flyout > .navigation > .profile
{
    width: 100%;
    /* height: 80px; */

    border-style: solid;
    border-width: 1px 0 0 0;
    border-color: rgba( 224, 224, 224, 1.0 );
    
    background-color: rgba( 240, 240, 240, 0.8 );
}


header > .globalnav > .flyout > .navigation > .profile > .container
{
    width: 100%;
    margin: 0 auto;
    max-width: 980px;

    display: -ms-grid;

    display: grid;
    grid-gap: 8px;
    -ms-grid-rows: 80px;
    grid-template-rows: 80px;
    -ms-grid-columns: 1fr 8px 1fr;
    grid-template-columns: repeat( 2, 1fr );
    
    -webkit-box-align: center;
    
        -ms-flex-align: center;
    
            align-items: center;
}


header > .globalnav > .flyout > .navigation > .profile > .container > *:nth-child(1)
{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}


header > .globalnav > .flyout > .navigation > .profile > .container > *:nth-child(2)
{
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}


header > .globalnav > .flyout > .navigation > .profile > .container > .usercard
{
    display: -ms-grid;
    display: grid;
    grid-gap: 8px;
    /* grid-template-rows: 64px; */
    -ms-grid-columns: 32px 8px 1fr;
    grid-template-columns: 32px 1fr;

    text-align: left;
    -ms-grid-column-align: left;
        justify-self: left;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}


header > .globalnav > .flyout > .navigation > .profile > .container > .usercard > .avatar
{
    overflow: hidden;

    border-radius: 50%;
    border: 1px solid rgba( 224, 224, 224, 1.0 );
    background-color: rgba( 255, 255, 255, 1.0 );
}


header > .globalnav > .flyout > .navigation > .profile > .container > .usercard > .avatar > img
{
    width: 32px;
    height: 32px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -1px;
    -o-object-fit: contain;
       object-fit: contain;
}


header > .globalnav > .flyout > .navigation > .profile > .container > .usercard > .info > .name
{
    font-size: 14px;
    font-weight: 400;
    color :rgba( 0.0, 0.0, 0.0, 1.0 );
}


header > .globalnav > .flyout > .navigation > .profile > .container > .usercard > .info > .mail
{
    /* padding-top: 2px; */

    font-size: 12px;
    font-weight: 400;
    color: rgba( 128, 128, 128, 1.0 );
}


header > .globalnav > .flyout > .navigation > .profile > .container > .toolbar
{
    display: -ms-grid;
    display: grid;
    grid-gap: 8px;
    -ms-grid-rows: 48px;
    grid-template-rows: 48px;
    grid-template-columns: repeat( auto-fit, minmax( -webkit-max-content, 0 ) );
    grid-template-columns: repeat( auto-fit, minmax( max-content, 0 ) );

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
}


/* HEADER -> GLOBALNAV -> FLYOUT -> SEARCH */


header > .globalnav > .flyout > .search
{
    opacity: 0.0;
    display: none;

    width: 100%;
    margin: 0 auto;
    max-width: 980px;

    padding: 8px 0 32px 0;
    
    grid-gap: 32px;
    -ms-grid-rows: 64px 32px 1fr;
    grid-template-rows: 64px 1fr;
}


header > .globalnav > .flyout > .search > .searchfield
{
    width: 100%;
    height: auto;

    padding: 16px;
    margin: 0 auto;

    display: -ms-grid;

    display: grid;
    -webkit-column-gap: 8px;
       -moz-column-gap: 8px;
            column-gap: 8px;
    -ms-grid-columns: 16px 8px 1fr;
    grid-template-columns: 16px 1fr;
    
    -webkit-box-align: center;
    
        -ms-flex-align: center;
    
            align-items: center;

    border: 1px solid;
    border-radius: 64px;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 244, 244, 244, 1.0 );

    -webkit-box-shadow:
        rgba( 0.0, 0.0, 0.0, 0.1 ) 0 2px 8px -2px inset,
        rgba( 255, 255, 255, 0.4 ) 0 2px 4px -2px;

            box-shadow:
        rgba( 0.0, 0.0, 0.0, 0.1 ) 0 2px 8px -2px inset,
        rgba( 255, 255, 255, 0.4 ) 0 2px 4px -2px;
}


header > .globalnav > .flyout > .search > .searchfield > svg
{
    width: 16px;
    height: 16px;
    margin-bottom: -3px;
    color: rgba( 128, 128, 128, 1.0 );
}


header > .globalnav > .flyout > .search > .searchfield > input
{
    font-size: 20px;
    font-weight: 600;
    color: rgba( 0.0, 0.0, 0.0, 1.0 );
    
    border: none;
    padding-top: 4px;
    background-color: transparent;
}


header > .globalnav > .flyout > .search > .searchfield > input:focus
{
    outline: none;
}


header > .globalnav > .flyout > .search > .searchfield > input::-webkit-input-placeholder
{
    font-size: 14px;
    font-weight: 400;

    -webkit-transform: translateY( -2px );

            transform: translateY( -2px );
    color: rgba( 160, 160, 160, 1.0 );
}


header > .globalnav > .flyout > .search > .searchfield > input::-moz-placeholder
{
    font-size: 14px;
    font-weight: 400;

    transform: translateY( -2px );
    color: rgba( 160, 160, 160, 1.0 );
}


header > .globalnav > .flyout > .search > .searchfield > input:-ms-input-placeholder
{
    font-size: 14px;
    font-weight: 400;

    transform: translateY( -2px );
    color: rgba( 160, 160, 160, 1.0 );
}


header > .globalnav > .flyout > .search > .searchfield > input::-ms-input-placeholder
{
    font-size: 14px;
    font-weight: 400;

    transform: translateY( -2px );
    color: rgba( 160, 160, 160, 1.0 );
}


header > .globalnav > .flyout > .search > .searchfield > input::placeholder
{
    font-size: 14px;
    font-weight: 400;

    -webkit-transform: translateY( -2px );

            transform: translateY( -2px );
    color: rgba( 160, 160, 160, 1.0 );
}


header > .globalnav > .flyout > .search > .searchfield > input::-webkit-search-cancel-button
{
    appearance: none;
    -webkit-appearance: none;

    width: 20px;
    height: 20px;
    
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z' clip-rule='evenodd' /%3E%3C/svg%3E%0A");
}


header > .globalnav > .flyout > .search > .searchfield > input:focus::-webkit-input-placeholder
{

}


header > .globalnav > .flyout > .search > .searchfield > input:focus::-moz-placeholder
{

}


header > .globalnav > .flyout > .search > .searchfield > input:focus:-ms-input-placeholder
{

}


header > .globalnav > .flyout > .search > .searchfield > input:focus::-ms-input-placeholder
{

}


header > .globalnav > .flyout > .search > .searchfield > input:focus::placeholder
{

}


header > .globalnav > .flyout > .search > .links
{
    margin: 0;
    padding: 0;
    list-style-type: none;

    display: -ms-grid;

    display: grid;
    grid-gap: 8px;
    -ms-grid-rows: 1fr 8px 1fr 8px 1fr 8px 1fr;
    grid-template-rows: repeat( 4, 1fr );
}


header > .globalnav > .flyout > .search > .links > a
{
    opacity: 0.0;
    
    display: -ms-grid;
    
    display: grid;
    grid-gap: 8px;
    -ms-grid-columns: 16px 8px 1fr;
    grid-template-columns: 16px 1fr;

    padding: 0;

    font-size: 12px;
    font-weight: 400;
    color: rgba( 160, 160, 160, 1.0 );

    -webkit-transition-duration: 0.2s;

            transition-duration: 0.2s;
    -webkit-transition-property: padding, background-color;
    transition-property: padding, background-color;
}


header > .globalnav > .flyout > .search > .links > a > .arrow
{
    font-size: 14px;
    font-weight: 400;
    color: rgba( 192, 192, 192, 1.0 );
}


header > .globalnav > .flyout > .search > .links > a:hover
{
    cursor: pointer;
    padding-left: 4px;
    
    color: rgba( 128, 128, 128, 1.0 );
}


header > .globalnav > .flyout > .search > .links > a:hover > .arrow
{
    color:  rgba( 128, 128, 128, 1.0 );
}


/* MEDIAQUERIES */


@media only screen
    and ( orientation: portrait )
    and ( min-device-width: 375px ), ( min-device-width: 375px ) 
    and ( max-device-width: 667px ), ( max-device-width: 812px )
    and ( -webkit-min-device-pixel-ratio: 2 ), ( -webkit-min-device-pixel-ratio: 3 )
{

}


/* FOOTER */


footer
{
    width: 100%;
    height: 0;
}


footer > .global
{
    top: 0;
    left: 0;
    
    width: 100%;
    height: 128px;

    z-index: 9999;
    overflow: hidden;
    position: relative;
    -ms-flex-line-pack: center;
        align-content: center;

    border-style: solid;
    border-width: 1px 0 0 0;
    border-color: rgba( 0.0, 0.0, 0.0, 0.1 );
}


/* FOOTER -> GLOBAL -> CONTENT */


footer > .global > .content
{
    width: 100%;
    margin: 0 auto;
    max-width: 980px;

    display: -ms-grid;

    display: grid;
    grid-gap: 4px;
    -ms-grid-rows: 1fr 4px 1fr;
    grid-template-rows: repeat( 2, 1fr );
    
    -webkit-box-align: center;
    
        -ms-flex-align: center;
    
            align-items: center;
}


/* FOOTER -> GLOBAL -> CONTENT -> DIRECTORY */


footer > .global > .content > .directory
{
    display: -ms-grid;
    display: grid;
    grid-gap: 2px;
    -ms-grid-columns: 1fr 2px 1fr;
    grid-template-columns: repeat( 2, 1fr );
}


footer > .global > .content > .directory > .legal
{
    display: -ms-grid;
    display: grid;
    grid-gap: 12px;
    -ms-grid-columns: minmax( -webkit-min-content, -webkit-max-content ) 12px minmax( -webkit-min-content, -webkit-max-content ) 12px minmax( -webkit-min-content, -webkit-max-content ) 12px minmax( -webkit-min-content, -webkit-max-content ) 12px minmax( -webkit-min-content, -webkit-max-content ) 12px minmax( -webkit-min-content, -webkit-max-content ) 12px minmax( -webkit-min-content, -webkit-max-content );
    -ms-grid-columns: minmax( min-content, max-content ) 12px minmax( min-content, max-content ) 12px minmax( min-content, max-content ) 12px minmax( min-content, max-content ) 12px minmax( min-content, max-content ) 12px minmax( min-content, max-content ) 12px minmax( min-content, max-content );
    grid-template-columns: repeat( 7, minmax( -webkit-min-content, -webkit-max-content ) );
    grid-template-columns: repeat( 7, minmax( min-content, max-content ) );
}


footer > .global > .content > .directory > .legal > .link
{
    -ms-grid-column-align: start;
        justify-self: start;

    font-size: 12px;
    font-weight: 400;
    letter-spacing: -.01em;
    
    color: rgba( 128, 128, 128, 1.0 );
}


footer > .global > .content > .directory > .local
{
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-grid-column-align: end;
        justify-self: end;
    
    display: -ms-grid;
    
    display: grid;
    grid-gap: 4px;
    -ms-grid-columns: 16px 4px 1fr;
    grid-template-columns: 16px 1fr;
}


footer > .global > .content > .directory > .local > svg
{
    width: 16px;
    height: 16px;
    margin: auto;
    display: block;

    color: rgba( 160, 160, 160, 1.0 );
}


footer > .global > .content > .directory > .local > .value
{
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -.01em;

    color: rgba( 128, 128, 128, 1.0 );
}


/* FOOTER -> GLOBAL -> CONTENT -> COPYRIGHT */


footer > .global > .content > .copyright
{
    font-size: 10px;
    font-weight: 400;

    letter-spacing: -.01em;
    color: rgba( 192, 192, 192, 1.0 );
}


/* OVERLAY */


.overlay
{
    width: 0;
    height: 0;
}


.overlay > .curtain
{
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
    opacity:0.0;
    z-index: 9999;
    display: none;
    position: fixed;
    visibility: hidden;

    -webkit-backdrop-filter: blur( 8px ) contrast( 0.8 );

            backdrop-filter: blur( 8px ) contrast( 0.8 );
}


/* LIVEWIRE -> MODAL */


/* TABLE */


.table
{
    padding: 0px;

    max-width: 980px;
    min-height: 320px;

    border-radius: 16px;
    outline: 1px solid rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 248, 248, 248, 1.0 );
}


.table.edition
{
    background-size: 5px 5px;
    
    background-image: linear-gradient( 135deg,
        rgba( 240, 240, 240, 1.0 ) 25%,
        rgba( 255, 255, 255, 1.0 ) 25%,
        rgba( 255, 255, 255, 1.0 ) 50%,
        rgba( 240, 240, 240, 1.0 ) 50%,
        rgba( 240, 240, 240, 1.0 ) 75%,
        rgba( 255, 255, 255, 1.0 ) 75%,
        rgba( 255, 255, 255, 1.0 ) 100% );

    -webkit-box-shadow: inset 0 0 2px 2px rgba( 255, 255, 255, 1.0 );

            box-shadow: inset 0 0 2px 2px rgba( 255, 255, 255, 1.0 );
}


/* TABLE -> HEADING */


.table > .heading
{
    width: 100%;
    height: 96px;
    padding: 0 28px;
    
    display: -ms-grid;
    
    display: grid;
    grid-gap: 0px;
    -ms-grid-columns: 1fr 0px 2fr;
    grid-template-columns: 1fr 2fr;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
}


.table > .heading > .context
{
    display: -ms-grid;
    display: grid;
    grid-gap: 8px;
    -ms-grid-rows: 48px;
    grid-template-rows: 48px;
    grid-template-columns: repeat( auto-fit, minmax( -webkit-max-content, 0 ) );
    grid-template-columns: repeat( auto-fit, minmax( max-content, 0 ) );

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;

    -webkit-transition-delay: 0.25s;

            transition-delay: 0.25s;
    -webkit-transition-duration: 0.25s;
            transition-duration: 0.25s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
}


.table.default > .heading > .context
{
    opacity: 1.0;
}


.table.edition > .heading > .context
{
    opacity: 0.0;
}


.table > .heading > .context > .icon
{
    width: 32px;
    height: 32px;
    overflow: hidden;

    display: -ms-grid;

    display: grid;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    place-self: center;
    
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 255, 255, 255, 1.0 );
}


.table > .heading > .context > .icon > svg
{
    width: 16px;
    height: 16px;
    margin: auto;
    display: block;
}


.table > .heading > .context > .info
{
    display: -ms-grid;
    display: grid;
    grid-gap: 0px;
    grid-template-rows: repeat( auto-fit, minmax( -webkit-max-content, 0 ) );
    grid-template-rows: repeat( auto-fit, minmax( max-content, 0 ) );

    -webkit-box-pack: start;

        -ms-flex-pack: start;

            justify-content: start;
}


.table > .heading > .context > .info > .title
{
    margin-top: -2px;

    font-size: 14px;
    font-weight: 400;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.table > .heading > .context > .info > .subtitle
{
    font-size: 12px;
    font-weight: 400;

    color: rgba( 128, 128, 128, 1.0 );
}


.table > .heading > .toolbar
{
    display: -ms-grid;
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat( auto-fit, minmax( -webkit-max-content, 0 ) );
    grid-template-columns: repeat( auto-fit, minmax( max-content, 0 ) );

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
}


.table > .heading > .toolbar > .selection
{
    font-size: 16px;
    font-weight: 400;
    color: rgba( 0.0, 0.0, 0.0, 1.0 );

    -ms-grid-column-align: end;

        justify-self: end;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;

    -webkit-animation-name: button-fade-in;

            animation-name: button-fade-in;
    -webkit-animation-duration: 0.1s;
            animation-duration: 0.1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: calc( 0.25s + var( --index ) * 0.05s );
            animation-delay: calc( 0.25s + var( --index ) * 0.05s );
}


/* TABLE -> CONTENT */


.table > .content
{
    height: 100%;
    min-height: 480px;

    margin: 0;
    padding: 0;
    overflow: hidden;

    border-radius: 16px;
    outline: 1px solid rgba( 224, 224, 224, 1.0 );

    -webkit-box-shadow: 0 1px 4px rgba( 0.0, 0.0, 0.0, 0.05 );

            box-shadow: 0 1px 4px rgba( 0.0, 0.0, 0.0, 0.05 );

    background-color: rgba( 255, 255, 255, 1.0 );

    -webkit-transition-duration: 0.25s;

            transition-duration: 0.25s;
    -webkit-transition-property: margin, -webkit-box-shadow;
    transition-property: margin, -webkit-box-shadow;
    transition-property: margin, box-shadow;
    transition-property: margin, box-shadow, -webkit-box-shadow;
    -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
}


.table.default > .content
{
    margin: 0;
}


.table.edition > .content
{
    margin: 0;

    -webkit-box-shadow: 0 0 2px 2px rgba( 255, 255, 255, 1.0 );

            box-shadow: 0 0 2px 2px rgba( 255, 255, 255, 1.0 );
}


/* TABLE -> CONTENT -> ITEM.DEFAULT */


.table.default > .content > .item
{
    padding: 24px 30px;
    width: calc( 100% + 1px );

    display: -ms-grid;

    display: grid;
    -ms-grid-columns: 1fr 16px;
    grid-template-columns: 1fr 16px;

    place-content: center;

    outline: 1px solid rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 255, 255, 255, 1.0 );

    -webkit-transition-duration: 0.1s;

            transition-duration: 0.1s;
    -webkit-transition-property: background-color;
    transition-property: background-color;

    -webkit-animation-name: item-fade-in;

            animation-name: item-fade-in;
    -webkit-animation-duration: 0.2s;
            animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: calc( var( --index ) * 0.04s );
            animation-delay: calc( var( --index ) * 0.04s );
}


.table.default > .content > .item > .profile
{
    display: -ms-grid;
    display: grid;
    grid-gap: 16px;
    -ms-grid-rows: 48px;
    grid-template-rows: 48px;
    -ms-grid-columns: 48px 16px 1fr;
    grid-template-columns: 48px 1fr;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
}


.table.default > .content > .item > .profile > *:nth-child(1)
{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}


.table.default > .content > .item > .profile > *:nth-child(2)
{
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}


.table.default > .content > .item > .profile > .portrait
{
    width: 48px;
    height: 48px;
    overflow: hidden;

    border-radius: 50%;
    border: 1px solid rgba( 224, 224, 224, 1.0 );
    background-color: rgba( 255, 255, 255, 1.0 );
}


.table.default > .content > .item > .profile > .userdata
{
    display: -ms-grid;
    display: grid;
    grid-gap: 2px;
    grid-template-rows: repeat( auto-fit, minmax( -webkit-max-content, 0 ) );
    grid-template-rows: repeat( auto-fit, minmax( max-content, 0 ) );
}


.table.default > .content > .item > .profile > .userdata > .name
{
    font-size: 16px;
    font-weight: 400;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.table.default > .content > .item > .profile > .userdata > .mail
{
    font-size: 12px;
    font-weight: 400;

    color: rgba( 128, 128, 128, 1.0 );
}


.table.default > .content > .item > .chevron
{
    width: 16px;
    height: 16px;

    display: -ms-grid;

    display: grid;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    place-self: center;
    
    -webkit-transform: translateX( -2px );
    
            transform: translateX( -2px );
    
    color: rgba( 224, 224, 224, 1.0 );

    -webkit-transition-duration: 0.25s;

            transition-duration: 0.25s;
    -webkit-transition-property: color, -webkit-transform;
    transition-property: color, -webkit-transform;
    transition-property: color, transform;
    transition-property: color, transform, -webkit-transform;
}


.table.default > .content > .item:hover
{
    cursor: pointer;

    background-color: rgba( 248, 248, 248, 1.0 );

    .chevron
    {
        -webkit-transform: translateX( 0px );
                transform: translateX( 0px );

        color: rgba( 0.0, 0.0, 0.0, 1.0 );
    }
}


.table.default > .content > .item:active
{
    cursor: pointer;
}


.table.default > .content > .item:disabled
{
    background-color: rgba( 128, 128, 128, 1.0 );
}


/* TABLE -> CONTENT -> ITEM.EDITION */


.table.edition > .content > .item
{
    padding: 24px 30px;
    width: calc( 100% + 1px );

    display: -ms-grid;

    display: grid;
    grid-gap: 16px;
    -ms-grid-columns: 16px 16px 1fr;
    grid-template-columns: 16px 1fr;

    place-content: center;

    outline: 1px solid rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 255, 255, 255, 1.0 );

    -webkit-transition-duration: 0.1s;

            transition-duration: 0.1s;
    -webkit-transition-property: background-color;
    transition-property: background-color;

    -webkit-animation-name: item-fade-in;

            animation-name: item-fade-in;
    -webkit-animation-duration: 0.2s;
            animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: calc( var( --index ) * 0.04s );
            animation-delay: calc( var( --index ) * 0.04s );
}


.table.edition > .content > .item > .profile
{
    display: -ms-grid;
    display: grid;
    grid-gap: 16px;
    -ms-grid-rows: 48px;
    grid-template-rows: 48px;
    -ms-grid-columns: 48px 16px 1fr;
    grid-template-columns: 48px 1fr;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
}


.table.edition > .content > .item > .profile > *:nth-child(1)
{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}


.table.edition > .content > .item > .profile > *:nth-child(2)
{
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}


.table.edition > .content > .item > .profile > .portrait
{
    width: 48px;
    height: 48px;
    overflow: hidden;

    border-radius: 50%;
    border: 1px solid rgba( 224, 224, 224, 1.0 );
    background-color: rgba( 255, 255, 255, 1.0 );
}


.table.edition > .content > .item > .profile > .userdata
{
    display: -ms-grid;
    display: grid;
    grid-gap: 2px;
    grid-template-rows: repeat( auto-fit, minmax( -webkit-max-content, 0 ) );
    grid-template-rows: repeat( auto-fit, minmax( max-content, 0 ) );
}


.table.edition > .content > .item > .profile > .userdata > .name
{
    font-size: 16px;
    font-weight: 400;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.table.edition > .content > .item > .profile > .userdata > .mail
{
    font-size: 12px;
    font-weight: 400;

    color: rgba( 128, 128, 128, 1.0 );
}


.table.edition > .content > .item > .checkbox
{
    width: 16px;
    height: 16px;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
}


.table.edition > .content > .item > .checkbox > input
{
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    outline: none;
    cursor: pointer;
    
    border-width: 1px;
    border-radius: 50%;
    border-style: solid;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 248, 248, 248, 1.0 );
}


.table.edition > .content > .item:hover
{
    cursor: pointer;

    background-color: rgba( 248, 248, 248, 1.0 );

    .chevron
    {
        -webkit-transform: translateX( 0px );
                transform: translateX( 0px );

        color: rgba( 0.0, 0.0, 0.0, 1.0 );
    }
}


.table.edition > .content > .item:active
{
    cursor: pointer;
}


.table.edition > .content > .item:disabled
{
    background-color: rgba( 128, 128, 128, 1.0 );
}


.table.edition > .content > .item > .checkbox > input:checked
{
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
    clip-path: circle( 50% at 50% 50% );
}


.table.edition > .content > .item:has( input[type="checkbox"]:checked )
{
    background-color: rgba( 248, 248, 248, 1.0 );
}


.table.edition > .content > .item:has( input[type="checkbox"]:checked ):hover
{
    cursor: pointer;
    background-color: rgba( 244, 244, 244, 1.0 );
}


/* TABLE -> FOOTER */


.table > .footer
{
    width: 100%;
    height: 96px;
    padding: 0 32px;

    display: -ms-grid;

    display: grid;
    grid-gap: 0px;
    -ms-grid-columns: 1fr 0px 1fr 0px 1fr;
    grid-template-columns: repeat( 3, 1fr );

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
}


.table > .footer > .column
{
    font-size: 12px;
    font-weight: 400;

    color: rgba( 128, 128, 128, 1.0 );
}


.table > .footer > .column.left
{
    -ms-grid-column-align: start;
        justify-self: start;
}


.table > .footer > .column.right
{
    -ms-grid-column-align: end;
        justify-self: end;
}


.table > .footer > .column.center
{
    /* justify-self: center; */
}


.table > .footer > .column > .pagination
{
    display: -ms-grid;
    display: grid;
    grid-gap: 4px;
    -ms-grid-rows: 48px;
    grid-template-rows: 48px;
    grid-template-columns: repeat( auto-fit, minmax( 48px, 0 ) );

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;
}


/* ANIMATIONS */


@-webkit-keyframes item-fade-in
{
    0%
    {
        opacity: 0.0;
        -webkit-filter: blur( 4px );
                filter: blur( 4px );
        -webkit-transform: translateY( -8px );
                transform: translateY( -8px );
    }
    
    100%
    {
        opacity: 1.0;
        -webkit-filter: blur( 0 );
                filter: blur( 0 );
        -webkit-transform: translateY( 0 );
                transform: translateY( 0 );
    }
}


@keyframes item-fade-in
{
    0%
    {
        opacity: 0.0;
        -webkit-filter: blur( 4px );
                filter: blur( 4px );
        -webkit-transform: translateY( -8px );
                transform: translateY( -8px );
    }
    
    100%
    {
        opacity: 1.0;
        -webkit-filter: blur( 0 );
                filter: blur( 0 );
        -webkit-transform: translateY( 0 );
                transform: translateY( 0 );
    }
}


/* MODAL */


.modal
{
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    
    opacity: 0.0;
    display: -ms-grid;
    display: grid;
    position: fixed;
    visibility: hidden;
    pointer-events: none;

    /* backdrop-filter: blur( 4px ) contrast( 0.8 ); */
}


/* MODAL -> CONTENT */


.modal > .content
{
    z-index: 1;
    opacity: 0.0;

    width: 100vw;
    /* height: 'auto'; */

    overflow: hidden;
    pointer-events: auto;

    display: -ms-grid;

    display: grid;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    place-self: center;

    border-width: 1px 0;
    border-style: solid;
    border-color: rgba( 224, 224, 224, 1.0 );

    outline: 4px solid rgba( 255, 255, 255, 0.4 );
    
    background-color: rgba( 255, 255, 255, 1.0 );
}


.modal.open > .content
{
    height: 0px;
}


.modal.close > .content
{
    height: auto;
}


.modal > .content > .container
{

}


/* ALERT */


.alert
{
    display: -ms-grid;
    display: grid;
}


.alert > .content
{
    display: -ms-grid;
    display: grid;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
    place-self: center;
}


.alert > .content > .container
{
    width: 512px;
    padding: 48px 0;

    display: -ms-grid;

    display: grid;
    -ms-grid-rows: (1fr)[2];
    grid-template-rows: repeat( 2, 1fr );
}


.alert > .content > .container > .title
{
    padding-bottom: 16px;

    font-size: 18px;
    font-weight: 600;
    text-align: center;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.alert > .content > .container > .message
{
    font-size: 16px;
    font-weight: 400;
    text-align: center;

    color: rgba( 128, 128, 128, 1.0 );
}


.alert > .actions
{
    border-style: solid;
    border-width: 1px 0 0 0;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 250, 250, 250, 1.0 );

    display: -ms-grid;

    display: grid;
    place-content: center;
}


.alert > .actions > .container
{
    width: 512px;
    padding: 24px 0;

    display: -ms-grid;

    display: grid;
    grid-gap: 16px;
    -ms-grid-rows: 48px;
    grid-template-rows: 48px;
    -ms-grid-columns: 1fr 16px 1fr;
    grid-template-columns: repeat( 2, 1fr );
}


.alert > .actions > .container > *:nth-child(1)
{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}


.alert > .actions > .container > *:nth-child(2)
{
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}


/* USER-CREATE */


.user-create
{
    display: -ms-grid;
    display: grid;
    background-color: rgba( 255, 255, 255, 1.0 );

    display: grid;
}


/* USER-CREATE -> CONTENT */


.user-create > .content
{
    width: 100%;
    height: 100%;
    min-height: 384px;

    -ms-grid-row: 1;

    -ms-grid-row-span: 1;

    -ms-grid-column: 1;

    -ms-grid-column-span: 1;

    grid-area: 1 / 1 / 2 / 2;
}


.user-create > .content > .container
{
    width: 980px;
    height: 100%;
    margin: 0 auto;
    padding: 32px 0;

    display: -ms-grid;

    display: grid;
    grid-gap: 0px;
    -ms-grid-rows: 80px 0px 1fr;
    grid-template-rows: 80px 1fr;

    place-items: center;

    -webkit-animation-name: step-content-fade-in;

            animation-name: step-content-fade-in;
    -webkit-animation-duration: 0.25s;
            animation-duration: 0.25s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
}


.user-create > .content > .container > .background
{
    width: 100%;
    height: 100%;
    background-color: black;
}


.user-create > .content > .container > .headline
{
    width: 512px;
    text-align: center;
}


.user-create > .content > .container > .headline > .title
{
    padding-bottom: 4px;

    font-size: 32px;
    font-weight: 600;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.user-create > .content > .container > .headline > .subtitle
{
    font-size: 20px;
    font-weight: 400;

    color: rgba( 128, 128, 128, 1.0 )
}


/* USER-CREATE -> CONTENT -> STEP */


.user-create > .content > .container.step-01
{
    .wrapper
    {
        width: 384px;

        -webkit-animation-name: step-wrapper-fade-in;

                animation-name: step-wrapper-fade-in;
        -webkit-animation-delay: 0.4s;
                animation-delay: 0.4s;
        -webkit-animation-duration: 0.2s;
                animation-duration: 0.2s;
        -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
}


.user-create > .content > .container.step-02
{
    .wrapper
    {
        width: 100%;

        display: -ms-grid;

        display: grid;
        grid-gap: 16px;
        grid-template-columns: repeat( auto-fill, minmax( 32px, 256px ) );

        place-content: center;
    }

    .wrapper > label
    {
        padding: 32px;

        display: -ms-grid;

        display: grid;
        grid-gap: 32px;
        -ms-grid-rows: 32px 32px 1fr;
        grid-template-rows: 32px 1fr;

        border-width: 1px;
        border-style: solid;
        border-radius: 8px;
        border-color: rgba( 224, 224, 224, 1.0 );
    
        outline: 0px solid rgba( 224, 224, 224, 1.0 );

        background-color: rgba( 250, 250, 250, 1.0 );

        -webkit-animation-name: step-wrapper-fade-in;

                animation-name: step-wrapper-fade-in;
        -webkit-animation-duration: 0.2s;
                animation-duration: 0.2s;
        -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
        -webkit-animation-delay: calc( var( --index ) * 0.1s );
                animation-delay: calc( var( --index ) * 0.1s );

        -webkit-transition-duration: 0.1s;

                transition-duration: 0.1s;
        -webkit-transition-property: outline, border-color, background-color;
        transition-property: outline, border-color, background-color;
    }

    .wrapper > label:hover
    {
        cursor: pointer;
        
        border-color: rgba( 224, 224, 224, 1.0 );
        background-color: rgba( 242, 242, 242, 1.0 );
    }

    .wrapper > label > input
    {
        display: none;
    }

    .wrapper > label > .icon
    {
        width: 32px;
        height: 32px;
        color: rgba( 0.0, 0.0, 0.0, 1.0 );
    }

    .wrapper > label > .info
    {

    }

    .wrapper > label > .info > .name
    {
        padding-bottom: 4px;
        
        font-size: 20px;
        font-weight: 600;

        color: rgba( 0.0, 0.0, 0.0, 1.0 );
    }

    .wrapper > label > .info > .desc
    {
        font-size: 16px;
        font-weight: 400;

        color: rgba( 128, 128, 128, 1.0 );
    }

    .wrapper > label:has( input:checked )
    {
        border-width: 1px;

        border-color: rgba( 208, 208, 208, 1.0 );

        outline: 4px solid rgba( 232, 232, 232, 1.0 );

        background-color: rgba( 255, 255, 255, 1.0 );
    }
}


.user-create > .content > .container.step-03,
.user-create > .content > .container.step-04
{
    /* WRAPPER */

    .wrapper
    {
        width: 512px;
        display: -ms-grid;
        display: grid;
        grid-gap: 0px;
        grid-template-rows: repeat( auto-fit, minmax( -webkit-min-content, 1fr ) );
        grid-template-rows: repeat( auto-fit, minmax( min-content, 1fr ) );

        place-items: center;

        -webkit-animation-name: step-wrapper-fade-in;

                animation-name: step-wrapper-fade-in;
        -webkit-animation-delay: 0.2s;
                animation-delay: 0.2s;
        -webkit-animation-duration: 0.2s;
                animation-duration: 0.2s;
        -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }

    /* FIELD */

    .wrapper > .field
    {
        z-index: 0;
        width: 384px;
        margin-top: 24px;

        display: -ms-grid;

        display: grid;
        grid-gap: 0px;
        grid-template-rows: repeat( auto-fit, minmax( -webkit-min-content, 1fr ) );
        grid-template-rows: repeat( auto-fit, minmax( min-content, 1fr ) );
    }

    .wrapper > .field > label
    {
        margin-bottom: 4px;
        
        font-size: 12px;
        font-weight: 400;
        color: rgba( 160, 160, 160, 1.0 );
    }

    .wrapper > .field > input
    {
        z-index: 2;
        padding: 16px;
        outline: none;

        font-size: 20px;
        font-weight: 400;
        color: rgba( 0.0, 0.0, 0.0, 1.0 );

        border-width: 1px;
        border-style: solid;
        border-radius: 8px;
        border-color: rgba( 224, 224, 224, 1.0 );

        outline: 0px solid rgba( 224, 224, 224, 1.0 );
        
        background-color: rgba( 255, 255, 255, 1.0 );

        -webkit-transition-duration: 0.1s;

                transition-duration: 0.1s;
        -webkit-transition-property: outline, border-color;
        transition-property: outline, border-color;
    }

    .wrapper > .field > input::-webkit-input-placeholder
    {
        font-size: 16px;
        font-weight: 400;
        font-style: italic;
        color: rgba( 160, 160, 160, 1.0 );
    }

    .wrapper > .field > input::-moz-placeholder
    {
        font-size: 16px;
        font-weight: 400;
        font-style: italic;
        color: rgba( 160, 160, 160, 1.0 );
    }

    .wrapper > .field > input:-ms-input-placeholder
    {
        font-size: 16px;
        font-weight: 400;
        font-style: italic;
        color: rgba( 160, 160, 160, 1.0 );
    }

    .wrapper > .field > input::-ms-input-placeholder
    {
        font-size: 16px;
        font-weight: 400;
        font-style: italic;
        color: rgba( 160, 160, 160, 1.0 );
    }

    .wrapper > .field > input::placeholder
    {
        font-size: 16px;
        font-weight: 400;
        font-style: italic;
        color: rgba( 160, 160, 160, 1.0 );
    }

    .wrapper > .field > input:focus
    {
        border-color: rgba( 192, 192, 192, 1.0 );

        outline: 4px solid rgba( 224, 224, 224, 1.0 );
    }

    .wrapper > .field > input:disabled
    {
        font-size: 20px;
        font-weight: 600;
        color: rgba( 128, 128, 128, 1.0 );

        border-width: 1px;
        border-style: solid;
        border-radius: 8px;
        border-color: rgba( 244, 244, 244, 1.0 );

        background-color: rgba( 250, 250, 250, 1.0 );
    }

    .wrapper > .field > input.error
    {
        border-width: 1px;
        border-radius: 8px 8px 8px 0;
        border-color: rgba( 255, 0.0, 0.0, 1.0 );
    }

    .wrapper > .field > input.error:focus
    {
        border-color: rgba( 192, 192, 192, 1.0 );

        outline: 2px solid rgba( 224, 224, 224, 1.0 );
    }

    .wrapper > .field > .inline-error
    {
        z-index: 1;
        padding: 4px;
        margin-top: -1px;
        
        /* width: 100%; */
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;

        display: -ms-grid;

        display: grid;
        grid-gap: 2px;
        -ms-grid-columns: 14px 2px 1fr;
        grid-template-columns: 14px 1fr;

        -webkit-box-align: center;

            -ms-flex-align: center;

                align-items: center;
        
        border-width: 1px;
        border-style: solid;
        border-radius: 0 0 8px 8px;
        border-color: rgba( 255, 0.0, 0.0, 1.0 );

        background-color: rgba( 255, 0.0, 0.0, 0.1 );

        -webkit-animation-name: step-error-fade-in;

                animation-name: step-error-fade-in;
        -webkit-animation-duration: 0.25s;
                animation-duration: 0.25s;
        -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }

    .wrapper > .field > .inline-error > .icon
    {
        margin-top: -2px;

        width: 14px;
        height: 14px;

        color: rgba( 255, 0.0, 0.0, 1.0 );
    }

    .wrapper > .field > .inline-error > .message
    {
        margin-top: 1px;

        font-size: 12px;
        font-weight: 400;
        color: rgba( 255, 0.0, 0.0, 1.0 );
    }

    /* FIELD -> STACKED */

    .wrapper > .field.stacked
    {
        display: -ms-grid;
        display: grid;
        grid-gap: 0px;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        -ms-grid-rows: -webkit-min-content 0px 1fr;
        -ms-grid-rows: min-content 0px 1fr;
        grid-template-rows: -webkit-min-content 1fr;
        grid-template-rows: min-content 1fr;          
    }

    .wrapper > .field.stacked > *:nth-child(1)
    {
		-ms-grid-row: 1;
		-ms-grid-column: 1;          
    }

    .wrapper > .field.stacked > *:nth-child(2)
    {
		-ms-grid-row: 3;
		-ms-grid-column: 1;          
    }
    
    .wrapper > .field.stacked > label
    {
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-area: 1 / 1 / 2 / 2;
    }
    
    .wrapper > .field.stacked > input
    {
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-area: 2 / 1 / 3 / 2;
    }

    .wrapper > .field.stacked > input.loading
    {
        -ms-grid-row: 2;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-area: 2 / 1 / 3 / 2;

        -webkit-animation-name: step-username-loading;

                animation-name: step-username-loading;
        -webkit-animation-duration: 0.25s;
                animation-duration: 0.25s;
        -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
        -webkit-animation-direction: alternate;
                animation-direction: alternate;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
    
    .wrapper > .field.stacked > .badge
    {
        width: -webkit-min-content;
        width: -moz-min-content;
        width: min-content;
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;

        z-index: 2;
        padding: 6px 8px;
        margin-right: 12px;
        
        -ms-grid-row: 2;
        
        -ms-grid-row-span: 1;
        
        -ms-grid-column: 1;
        
        -ms-grid-column-span: 1;
        
        grid-area: 2 / 1 / 3 / 2;
        
        display: -ms-grid;
        
        display: grid;
        grid-gap: 0px;
        -ms-grid-columns: 14px 0px -webkit-min-content;
        -ms-grid-columns: 14px 0px min-content;
        grid-template-columns: 14px -webkit-min-content;
        grid-template-columns: 14px min-content;

        -ms-grid-row-align: center;

            align-self: center;
        -ms-grid-column-align: end;
            justify-self: end;
    
        border-width: 1px;
        border-style: solid;
        border-radius: 50%;
        border-color: rgba( 224, 224, 224, 1.0 );
        
        background-color: rgba( 255, 255, 255, 1.0 );
    }

    .wrapper > .field.stacked > .badge.label
    {
        display: -ms-grid;
        display: grid;
        grid-gap: 2px;
        -ms-grid-columns: 16px 2px -webkit-max-content;
        -ms-grid-columns: 16px 2px max-content;
        grid-template-columns: 16px -webkit-max-content;
        grid-template-columns: 16px max-content;

        border-width: 1px;
        border-style: solid;
        border-radius: 32px;
        border-color: rgba( 0.0, 128, 0.0, 0.1 );

        background-color: rgba( 0.0, 255, 0.0, 0.1 );
    }

    .wrapper > .field.stacked > .badge > .icon
    {
        width: 16px;
        height: 16px;
    }

    .wrapper > .field.stacked > .badge > .icon > svg
    {
        width: 14px;
        height: 14px;

        color: rgba( 0.0, 128, 0.0, 1.0 );
    }

    .wrapper > .field.stacked > .badge > .value
    {
        font-size: 14px;
        font-weight: 400;
        color: rgba( 128, 128, 128, 1.0 );
    }

    /* PASSWORD */

    .wrapper > .card-password
    {
        width: 512px;
        margin-bottom: 16px;
    }

    .wrapper > .card-password > .otp-wrapper
    {
        display: -ms-grid;
        display: grid;
        grid-gap: 8px;
        grid-template-columns: repeat( auto-fit, minmax( -webkit-max-content, 32px ) );
        grid-template-columns: repeat( auto-fit, minmax( max-content, 32px ) );

        -webkit-box-align: center;

            -ms-flex-align: center;

                align-items: center;
        justify-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .wrapper > .card-password > .otp-wrapper > input
    {
        width: 64px;
        height: 64px;

        font-size: 24px;
        font-weight: 600;
        text-align: center;
        color: rgba( 0.0, 0.0, 0.0, 1.0 );

        border-width: 1px;
        border-style: solid;
        border-radius: 8px;
        border-color: rgba( 224, 224, 224, 1.0 );

        outline: 0px solid rgba( 224, 224, 224, 1.0 );

        -webkit-transition-duration: 0.1s;

                transition-duration: 0.1s;
        -webkit-transition-property: outline, border-color;
        transition-property: outline, border-color;
    }

    .wrapper > .card-password > .otp-wrapper > input:focus
    {
        border-color: rgba( 192, 192, 192, 1.0 );

        outline: 4px solid rgba( 224, 224, 224, 1.0 );
    }
    
    /* FEEDBACK */

    .feedback
    {
        width: 384px;
        margin-top: 8px;
        
        opacity: 1.0;
        display: -ms-grid;
        display: grid;
        grid-gap: 4px;
        -ms-grid-columns: 16px 4px 1fr;
        grid-template-columns: 16px 1fr;

        -webkit-box-align: center;

            -ms-flex-align: center;

                align-items: center;

        background-color: rgba( 255, 255, 255, 1.0 );
    }

    .feedback.inline
    {
        width: 464px;
        padding: 18px;
        margin-top: 0px;
        
        opacity: 1.0;
        display: -ms-grid;
        display: grid;
        grid-gap: 8px;
        -ms-grid-columns: 16px 8px 1fr;
        grid-template-columns: 16px 1fr;

        -webkit-box-align: center;

            -ms-flex-align: center;

                align-items: center;

        border-radius: 8px;
        border: 1px solid rgba( 224, 224, 224, 1.0 );

        background-color: rgba( 250, 250, 250, 1.0 );
    }

    .feedback.error,
    .feedback.inline.error
    {
        opacity: 0.0;
        display: none;
    }

    .feedback > .icon
    {
        width: 16px;
        height: 16px;

        color: rgba( 160, 160, 160, 1.0 );
    }

    .feedback > .desc
    {
        font-size: 12px;
        font-weight: 400;

        color: rgba( 160, 160, 160, 1.0 );
    }
}


.user-create > .content > .container.step-05
{
    .wrapper
    {
        width: 384px;

        -webkit-animation-name: step-wrapper-fade-in;

                animation-name: step-wrapper-fade-in;
        -webkit-animation-delay: 0.2s;
                animation-delay: 0.2s;
        -webkit-animation-duration: 0.2s;
                animation-duration: 0.2s;
        -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }

    .wrapper > .card
    {
        height: 100%;
        margin: -18px 0;

        display: -ms-grid;

        display: grid;
        -ms-grid-rows: 1fr 42px 1fr;
        grid-template-rows: 1fr 42px 1fr;
    }

    .wrapper > .card > .profile
    {
        width: 100%;
        padding: 16px;

        display: -ms-grid;

        display: grid;
        grid-gap: 32px;
        -ms-grid-columns: 32px 32px 1fr;
        grid-template-columns: 32px 1fr;

        -webkit-box-align: center;

            -ms-flex-align: center;

                align-items: center;

        -webkit-transform: translateY( 18px );

                transform: translateY( 18px );

        border-width: 1px;
        border-style: dashed;
        border-radius: 16px;
        border-color: rgba( 224, 224, 224, 1.0 );

        background-color: rgba( 250, 250, 250, 1.0 );
    }

    .wrapper > .card > .profile > .user-avatar
    {
        width: 48px;
        height: 48px;
        overflow: hidden;

        border-width: 1px;
        border-style: solid;
        border-radius: 50%;
        border-color: rgba( 224, 224, 224, 1.0 );
        background-color: rgba( 255, 255, 255, 1.0 );
    }

    .wrapper > .card > .profile > .user-avatar > img
    {
        display: block;
        margin-top: 4px;
        margin-left: auto;
        margin-right: auto;
        -o-object-fit: contain;
           object-fit: contain;
    }

    .wrapper > .card > .profile > .user-info > .name
    {
        display: -ms-grid;
        display: grid;
        grid-gap: 4px;
        -ms-grid-rows: 16px;
        grid-template-rows: 16px;
        -ms-grid-columns: -webkit-max-content 4px 16px;
        -ms-grid-columns: max-content 4px 16px;
        grid-template-columns: -webkit-max-content 16px;
        grid-template-columns: max-content 16px;
        
        font-size: 16px;
        font-weight: 600;
        color: rgba( 0.0, 0.0, 0.0, 1.0 );
    }

    .wrapper > .card > .profile > .user-info > .name > *:nth-child(1)
    {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
    }

    .wrapper > .card > .profile > .user-info > .name > *:nth-child(2)
    {
		-ms-grid-row: 1;
		-ms-grid-column: 3;
    }

    .wrapper > .card > .profile > .user-info > .mail
    {
        padding-top: 2px;

        font-size: 14px;
        font-weight: 400;
        color: rgba( 128, 128, 128, 1.0 );
    }

    .wrapper > .card > .arrow
    {
        z-index: 1;

        width: 42px;
        height: 42px;
        
        -ms-grid-column-align: center;
        
            justify-self: center;
        -ms-flex-line-pack: center;
            align-content: center;

        border-width: 1px;
        border-style: solid;
        border-radius: 50%;
        border-color: rgba( 224, 224, 224, 1.0 );

        background-color: rgba( 255, 255, 255, 1.0 );
    }

    .wrapper > .card > .arrow > svg
    {
        width: 24px;
        height: 24px;
        margin: auto;
        display: block;

        color: rgba( 0.0, 0.0, 0.0, 1.0 );
    }

    .wrapper > .card > .organization
    {
        width: 100%;
        padding: 16px;

        display: -ms-grid;

        display: grid;
        grid-gap: 16px;
        -ms-grid-rows: 48px;
        grid-template-rows: 48px;
        -ms-grid-columns: 48px 16px 1fr;
        grid-template-columns: 48px 1fr;

        -webkit-box-align: center;

            -ms-flex-align: center;

                align-items: center;

        border-style: solid;
        border-width: 1px;
        border-radius: 16px;
        border-color: rgba( 224, 224, 224, 1.0 );
        
        -webkit-transform: translateY( -18px );
        
                transform: translateY( -18px );

        background-color: rgba( 255, 255, 255, 1.0 );
    }

    .wrapper > .card > .organization > *:nth-child(1)
    {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
    }

    .wrapper > .card > .organization > *:nth-child(2)
    {
		-ms-grid-row: 1;
		-ms-grid-column: 3;
    }

    .wrapper > .card > .organization > .orga-logo
    {
        width: 48px;
        height: 48px;
        overflow: hidden;
        
        border-radius: 8px;
        border: 1px solid rgba( 224, 224, 224, 1.0 );
        
        background: repeating-linear-gradient( -45deg,
            rgba( 255, 255, 255, 1.0 ),
            rgba( 255, 255, 255, 1.0 ) 8px,
            rgba( 252, 252, 252, 1.0 ) 8px,
            rgba( 252, 252, 252, 1.0 ) 16px );
    }

    .wrapper > .card > .organization > .orga-logo > img
    {
        width: 48px;
        height: 48px;
        
        display: block;
        margin-left: auto;
        margin-right: auto;
        -o-object-fit: contain;
           object-fit: contain;
    }

    .wrapper > .card > .organization > .orga-info > .role
    {
        font-size: 16px;
        font-weight: 600;
        color: rgba( 0.0, 0.0, 0.0, 1.0 );
    }

    .wrapper > .card > .organization > .orga-info > .name
    {
        padding-top: 2px;

        font-size: 14px;
        font-weight: 400;
        color: rgba( 128, 128, 128, 1.0 );
    }

    .wrapper > .loading
    {
        opacity: 0.0;
        
        width: 100%;
        height: 100%;
        
        display: none;
        place-items: center;
    }

    .wrapper > .loading > svg
    {
        width: 32px;
        height: 32px;

        color: rgba( 0.0, 0.0, 0.0, 1.0 );
    }

    .wrapper > .loading.active
    {
        opacity: 1.0;
        display: -ms-grid;
        display: grid;

        -webkit-animation-name: step-loader-fade-in;

                animation-name: step-loader-fade-in;
        -webkit-animation-delay: 0.25s;
                animation-delay: 0.25s;
        -webkit-animation-duration: 0.25s;
                animation-duration: 0.25s;
        -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
        -webkit-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }
}


.user-create > .content > .container.step-06
{
    padding: 0;

    width: 100%;
    height: 100%;

    display: -ms-grid;

    display: grid;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    
    .background
    {
        z-index: 0;
        width: 100%;
        height: 100%;
        opacity: 1.0;
        overflow: hidden;
        
        display: -ms-grid;
        
        display: grid;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-area: 1 / 1 / 2 / 2;

        background-color: rgba( 255, 255, 255, 1.0 );
    }

    .background > .geometry
    {
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-area: 1 / 1 / 2 / 2;

        background-image: 
            repeating-radial-gradient( circle at 50% 50%, transparent 0, rgba( 255, 255, 255, 1.0 ) 64px ),
            repeating-linear-gradient( rgba( 254, 254, 254, 1.0 ), rgba( 252, 252, 252, 1.0 ) );

        -webkit-animation-duration: 2.0s;

                animation-duration: 2.0s;
        -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
        -webkit-animation-name: background-geometry-fade-in;
                animation-name: background-geometry-fade-in;
        -webkit-animation-timing-function: ease-in-out;
                animation-timing-function: ease-in-out;
    }

    .background > .abstract
    {
        opacity: 0.0;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-area: 1 / 1 / 2 / 2;
        
        -webkit-filter: blur( 2px ) grayscale( 50% );
        
                filter: blur( 2px ) grayscale( 50% );
        
        -webkit-animation-duration: 1.0s;
        
                animation-duration: 1.0s;
        -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
        -webkit-animation-name: background-abstract-fade-in;
                animation-name: background-abstract-fade-in;
        -webkit-animation-timing-function: ease-in-out;
                animation-timing-function: ease-in-out;
    }

    .background > .abstract > svg
    {
        width: 100%;
        height: 100%;
    }

    .background > .abstract > svg > .gradient-01,
    .background > .abstract > svg > .gradient-02,
    .background > .abstract > svg > .gradient-03
    {
        width: 100vw;
        height: 100vh;

        -webkit-transform-origin: center;

                transform-origin: center;

        -webkit-animation-duration: 10s;

                animation-duration: 10s;
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        -webkit-animation-name: background-abstract-animation;
                animation-name: background-abstract-animation;
    }

    .background > .abstract > svg > .gradient-01
    {
        -webkit-animation-duration: 10s;
                animation-duration: 10s;
    }

    .background > .abstract > svg > .gradient-02
    {
        -webkit-animation-duration: 20s;
                animation-duration: 20s;
    }

    .background > .abstract > svg > .gradient-03
    {
        -webkit-animation-duration: 30s;
                animation-duration: 30s;
    }

    .foreground
    {
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-area: 1 / 1 / 2 / 2;
    }
}


.user-create > .content > .container.step-06 > *:nth-child(1)
{
	-ms-grid-row: 1;
	-ms-grid-column: 1
}


/* USER-CREATE -> ACTIONS */


.user-create > .actions
{
    border-style: solid;
    border-width: 1px 0 0 0;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 250, 250, 250, 1.0 );

    display: -ms-grid;

    display: grid;
    place-content: center;
}


.user-create > .actions > .container
{
    opacity: 1.0;

    width: 512px;
    padding: 24px 0;

    display: -ms-grid;

    display: grid;
    grid-gap: 16px;
    -ms-grid-rows: 48px;
    grid-template-rows: 48px;
    grid-template-columns: repeat( auto-fit, minmax( 128px, 1fr ) );
}


.user-create > .actions > .container.active
{
    opacity: 1.0;

    -webkit-animation-name: step-actions-fade-in;

            animation-name: step-actions-fade-in;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
    -webkit-animation-duration: 0.25s;
            animation-duration: 0.25s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
}


/* ANIMATIONS */


@-webkit-keyframes step-content-fade-in
{
    0%
    {
        opacity: 0.0;
        -webkit-transform: translateX( 16px );
                transform: translateX( 16px );
    }
    
    100%
    {
        opacity: 1.0;
        -webkit-transform: translateX( 0px );
                transform: translateX( 0px );
    }
}


@keyframes step-content-fade-in
{
    0%
    {
        opacity: 0.0;
        -webkit-transform: translateX( 16px );
                transform: translateX( 16px );
    }
    
    100%
    {
        opacity: 1.0;
        -webkit-transform: translateX( 0px );
                transform: translateX( 0px );
    }
}


@-webkit-keyframes step-actions-fade-in
{
    0%
    {
        opacity: 0.0;
    }
    
    100%
    {
        opacity: 1.0;
    }
}


@keyframes step-actions-fade-in
{
    0%
    {
        opacity: 0.0;
    }
    
    100%
    {
        opacity: 1.0;
    }
}


@-webkit-keyframes step-wrapper-fade-in
{
    0%
    {
        opacity: 0.0;
        -webkit-transform: translateX( 32px );
                transform: translateX( 32px );
    }
    
    100%
    {
        opacity: 1.0;
        -webkit-transform: translateX( 0px );
                transform: translateX( 0px );
    }
}


@keyframes step-wrapper-fade-in
{
    0%
    {
        opacity: 0.0;
        -webkit-transform: translateX( 32px );
                transform: translateX( 32px );
    }
    
    100%
    {
        opacity: 1.0;
        -webkit-transform: translateX( 0px );
                transform: translateX( 0px );
    }
}


@-webkit-keyframes step-error-fade-in
{
    0%
    {
        opacity: 0.0;
        -webkit-transform: translateY( -16px );
                transform: translateY( -16px );
    }
    
    100%
    {
        opacity: 1.0;
        -webkit-transform: translateY( 0px );
                transform: translateY( 0px );
    }
}


@keyframes step-error-fade-in
{
    0%
    {
        opacity: 0.0;
        -webkit-transform: translateY( -16px );
                transform: translateY( -16px );
    }
    
    100%
    {
        opacity: 1.0;
        -webkit-transform: translateY( 0px );
                transform: translateY( 0px );
    }
}


@-webkit-keyframes step-loader-fade-in
{
    0%
    {
        opacity: 0.0;
    }
    
    100%
    {
        opacity: 1.0;
    }
}


@keyframes step-loader-fade-in
{
    0%
    {
        opacity: 0.0;
    }
    
    100%
    {
        opacity: 1.0;
    }
}


@-webkit-keyframes step-username-loading
{
    0%
    {
        color: rgba( 160, 160, 160, 1.0 );
    }
    
    100%
    {
        color: rgba( 224, 224, 224, 1.0 );
    }
}


@keyframes step-username-loading
{
    0%
    {
        color: rgba( 160, 160, 160, 1.0 );
    }
    
    100%
    {
        color: rgba( 224, 224, 224, 1.0 );
    }
}


@-webkit-keyframes background-geometry-fade-in
{
    0%
    {
        opacity: 0.0;
    }
    
    100%
    {
        opacity: 1.0;
    }
}


@keyframes background-geometry-fade-in
{
    0%
    {
        opacity: 0.0;
    }
    
    100%
    {
        opacity: 1.0;
    }
}


@-webkit-keyframes background-abstract-fade-in
{
    0%
    {
        opacity: 0.0;
    }
    
    100%
    {
        opacity: 0.2;
    }
}


@keyframes background-abstract-fade-in
{
    0%
    {
        opacity: 0.0;
    }
    
    100%
    {
        opacity: 0.2;
    }
}


@-webkit-keyframes background-abstract-animation
{
    0%
    {
        -webkit-transform: rotate( 0deg );
                transform: rotate( 0deg );
    }
    
    100%
    {
        -webkit-transform: rotate( 360deg );
                transform: rotate( 360deg );
    }
}


@keyframes background-abstract-animation
{
    0%
    {
        -webkit-transform: rotate( 0deg );
                transform: rotate( 0deg );
    }
    
    100%
    {
        -webkit-transform: rotate( 360deg );
                transform: rotate( 360deg );
    }
}


/* COLLECTION */


/* WEBSITE */


/* WORKSPACE */


.workspace
{
    width: 100%;
    min-height: 100vh;
    padding: 96px 0px;
    
    background-color: rgba( 252, 252, 252, 1.0 );
}


.workspace > .organization
{
    padding: 0;
    margin: 0 auto;
    max-width: 980px;
}


/* ORGANIZATION -> PROFILE */


.workspace > .organization.profile
{
    padding: 16px 0 48px 0;

    display: -ms-grid;

    display: grid;
    grid-gap: 16px;
    -ms-grid-rows: 64px;
    grid-template-rows: 64px;
    -ms-grid-columns: 64px 16px 1fr;
    grid-template-columns: 64px 1fr;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
}


.workspace > .organization.profile > *:nth-child(1)
{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}


.workspace > .organization.profile > *:nth-child(2)
{
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}


.workspace > .organization.profile > .logo
{
    width: 64px;
    height: 64px;
    overflow: hidden;
    
    border-radius: 16px;
    border: 1px solid rgba( 224, 224, 224, 1.0 );
    
    background: repeating-linear-gradient( -45deg,
        rgba( 255, 255, 255, 1.0 ),
        rgba( 255, 255, 255, 1.0 ) 8px,
        rgba( 252, 252, 252, 1.0 ) 8px,
        rgba( 252, 252, 252, 1.0 ) 16px );
}


.workspace > .organization.profile > img
{
    width: 64px;
    height: 64px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    -o-object-fit: contain;
       object-fit: contain;
}


.workspace > .organization.profile > .info > .name
{
    margin-top: -2px;
    
    font-size: 24px;
    font-weight: 600;
    /* letter-spacing: -.01em; */
    
    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.workspace > .organization.profile > .info > .desc
{    
    padding-top: 4px;

    display: -ms-grid;

    display: grid;
    grid-gap: 16px;
    -ms-grid-columns: fit-content( 160px ) 16px fit-content( 160px ) 16px fit-content( 160px );
    grid-template-columns: repeat( 3, fit-content( 160px ) );

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
}


.workspace > .organization.profile > .info > .desc > .item
{
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    
    display: -ms-grid;
    
    display: grid;
    grid-gap: 2px;
    -ms-grid-columns: 16px 2px 1fr;
    grid-template-columns: 16px 1fr;
}


.workspace > .organization.profile > .info > .desc > .item > svg
{
    width: 16px;
    height: 16px;
    margin: auto;
    display: block;

    color: rgba( 160, 160, 160, 1.0 );
}


.workspace > .organization.profile > .info > .desc > .item > .value
{
    font-size: 12px;
    font-weight: 400;

    color: rgba( 128, 128, 128, 1.0 );
}


/* ORGANIZATION -> MEMBERS */


.worksapce > .organization.members
{

}


/* DOWNLOADS */


.downloads
{
    width: 100%;
    min-height: 100vh;
    padding: 128px 0px;
    
    background-color: rgba( 250, 250, 250, 1.0 );
}


.downloads > .headline
{
    padding: 0 0 64px 0;
    margin: 0 auto;
    max-width: 980px;
}


.downloads > .headline > .title
{
    font-size: 24px;
    font-weight: 600;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.downloads > .headline > .subtitle
{
    font-size: 14px;
    font-weight: 400;

    color: rgba( 128, 128, 128, 1.0 );
}


/* RESOURCES */


.resources
{
    width: 100%;
    min-height: 100vh;
    padding: 128px 0px;
    
    background-color: rgba( 250, 250, 250, 1.0 );
}


.resources > .headline
{
    padding: 0 0 64px 0;
    margin: 0 auto;
    max-width: 980px;
}


.resources > .headline > .title
{
    font-size: 24px;
    font-weight: 600;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.resources > .headline > .subtitle
{
    font-size: 14px;
    font-weight: 400;

    color: rgba( 128, 128, 128, 1.0 );
}


.resources > .content
{
    padding: 0;
    margin: 0 auto;
    max-width: 980px;

    display: -ms-grid;

    display: grid;
    grid-gap: 32px;
    grid-template-columns: repeat( auto-fill, minmax( auto, 220px ) );
}


.resources > .content > a
{
    height: 320px;
    padding: 16px;

    -ms-flex-line-pack: end;

        align-content: end;
    text-align: center;

    border-width: 1px;
    border-style: solid;
    border-radius: 16px;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 255, 255, 255, 1.0 );

    -webkit-transition-duration: 0.1s;

            transition-duration: 0.1s;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;

    -webkit-animation-name: guide-fade-in;

            animation-name: guide-fade-in;
    -webkit-animation-duration: 0.4s;
            animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-delay: calc( var( --index ) * 0.1s );
            animation-delay: calc( var( --index ) * 0.1s );
}


.resources > .content > a:hover
{
    -webkit-transform: scale( 1.1 );
            transform: scale( 1.1 );
}


.resources > .content > a > .info
{
    display: -ms-grid;
    display: grid;
    grid-gap: 0px;
    -ms-grid-rows: 1fr 0px 1fr;
    grid-template-rows: repeat( 2, 1fr );
}


.resources > .content > a > .info > .eyebrow
{
    font-size: 12px;
    font-weight: 400;

    color: rgba( 192, 192, 192, 1.0 );
}


.resources > .content > a > .info > .title
{
    font-size: 16px;
    font-weight: 600;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


/* ANIMATIONS */


@-webkit-keyframes guide-fade-in
{
    0%
    {
        opacity: 0.0;
        -webkit-filter: blur( 8px );
                filter: blur( 8px );
    }
    
    100%
    {
        opacity: 1.0;
        -webkit-filter: blur( 0px );
                filter: blur( 0px );
    }
}


@keyframes guide-fade-in
{
    0%
    {
        opacity: 0.0;
        -webkit-filter: blur( 8px );
                filter: blur( 8px );
    }
    
    100%
    {
        opacity: 1.0;
        -webkit-filter: blur( 0px );
                filter: blur( 0px );
    }
}


/* WORKSPACE -> STATS */


.resources-show
{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    position: fixed;
    z-index: 99999999;
    -webkit-backdrop-filter: brightness( 0.8 ) blur( 4px );
            backdrop-filter: brightness( 0.8 ) blur( 4px );
}


.resources-show > .container
{
    padding: 32px 0 64px 0;
    margin: 64px auto 32px auto;

    width: calc( 100vw - 64px );
    max-width: 1400px;

    border-radius: 32px;
    background-color: rgba( 255, 255, 255, 1.0 );
}


/* WORKSPACE -> STATS -> HEADER */


.resources-show > .container > .header
{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    width: 100%;
    height: 160px;
    position: sticky;
}


.resources-show > .container > .header > .backdrop
{
    top: 0;
    left: 0;
    width: 100%;
    height: 192px;
    position: absolute;
    border-radius: 32px 32px 0 0;

    -webkit-backdrop-filter: blur( 16px );

            backdrop-filter: blur( 16px );
    
	-webkit-mask: -webkit-gradient(
        linear, 
        left top, left bottom, 
        color-stop(50%, rgba( 255, 255, 255, 1.0 )), 
        to(rgba( 255, 255, 255, 0.0 )) );
    
	-webkit-mask: linear-gradient(
        180deg, 
        rgba( 255, 255, 255, 1.0 ) 50%, 
        rgba( 255, 255, 255, 0.0 ) 100% );
    
	        mask: -webkit-gradient(
        linear, 
        left top, left bottom, 
        color-stop(50%, rgba( 255, 255, 255, 1.0 )), 
        to(rgba( 255, 255, 255, 0.0 )) );
    
	        mask: linear-gradient(
        180deg, 
        rgba( 255, 255, 255, 1.0 ) 50%, 
        rgba( 255, 255, 255, 0.0 ) 100% );
}


.resources-show > .container > .header > .gradient
{
    top: 0;
    left: 0;
    width: 100%;
    height: 192px;
    position: absolute;
    border-radius: 32px 32px 0 0;

    background: -webkit-gradient(
        linear, 
        left top, left bottom, 
        from(rgba( 255, 255, 255, 1.0 )), 
        to(rgba( 255, 255, 255, 0.0 )) );

    background: linear-gradient(
        180deg, 
        rgba( 255, 255, 255, 1.0 ) 0%, 
        rgba( 255, 255, 255, 0.0 ) 100% );
}


.resources-show > .container > .header > .headline
{
    width: 100%;
    margin: 0 auto;
    max-width: 980px;

    display: -ms-grid;

    display: grid;
    grid-gap: 2px;
    -ms-grid-rows: 128px;
    grid-template-rows: 128px;
    -ms-grid-columns: 1fr 2px 32px;
    grid-template-columns: 1fr 32px;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
}


.resources-show > .container > .header > .headline > *:nth-child(1)
{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}


.resources-show > .container > .header > .headline > *:nth-child(2)
{
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}


.resources-show > .container > .header > .headline > .infos
{
    z-index: 9999;
}


.resources-show > .container > .header > .headline > .infos > .eyebrow
{
    font-size: 16px;
    font-weight: 400;

    color: rgba( 160, 160, 160, 1.0 );
}


.resources-show > .container > .header > .headline > .infos > .title
{
    padding-top: 2px;

    font-size: 32px;
    font-weight: 600;

    color: rgba( 0, 0, 0, 1.0 );
}


.resources-show > .container > .header > .headline > .toolbar
{
    display: -ms-grid;
    display: grid;
    -webkit-column-gap: 8px;
       -moz-column-gap: 8px;
            column-gap: 8px;
    -ms-grid-columns: ;
    grid-template-columns: repeat( auto, 32px );
}


.resources-show > .container > .header > .headline > .toolbar > a
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    width: 32px;
    height: 32px;
    overflow: hidden;
    position: relative;

    border-radius: 50%;
    background-color: rgba( 0, 0, 0, 0.2 );
    
    -webkit-transition-duration: 0.1s;
    
            transition-duration: 0.1s;
    -webkit-transition-property: background-color;
    transition-property: background-color;
}


.resources-show > .container > .header > .headline > .toolbar > a:hover
{
    cursor: pointer;
    background-color: rgba( 0, 0, 0, 0.4 );
}


.resources-show > .container > .header > .headline > .toolbar > a:active
{
    cursor: pointer;
    background-color: rgba( 0, 0, 0, 0.8 );
}


.resources-show > .container > .header > .headline > .toolbar > a > svg
{
    width: 22px;
    height: 22px;
    margin: auto;
    display: block;
    pointer-events: none;
    color: rgba( 0, 0, 0, 0.8 );
}


.resources-show > .container > .header > .headline > .toolbar > a:active > svg
{
    color: rgba( 255, 255, 255, 1.0 );
}


/* MODAL -> STATS -> CONTENT */


.resources-show > .container > .content
{
    z-index: 0;
    padding: 0;
    margin: 0 auto;
    max-width: 980px;
}


.resources-show > .container > .content > .wrapper
{
    padding: 64px 0;

    border-width: 1px 0;
    border-style: solid;
    border-color: rgba( 224, 224, 224, 1.0 );
}


.resources-show > .container > .content > .wrapper.first
{
    border-width: 1px 0;
}


.resources-show > .container > .content > .wrapper.center
{

    border-width: 0 0 1px 0;
}


.resources-show > .container > .content > .wrapper.last
{
    border-width: 0;
}


.resources-show > .container > .content > .wrapper > .actions
{
    display: -ms-grid;
    display: grid;
    grid-gap: 16px;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
}


.resources-show > .container > .content > .wrapper > .actions > *:nth-child(1)
{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}


.resources-show > .container > .content > .wrapper > .actions > button
{
    width: 100%;
    padding: 16px;

    border-width: 1px;
    border-style: solid;
    border-color: rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 255, 255, 255, 1.0 );
}


.resources-show > .container > .content > .wrapper > .actions > button:hover
{
    background-color: rgba( 250, 250, 250, 1.0 );
}


.resources-show > .container > .content > .wrapper > .actions > button > .label
{
    font-size: 16px;
    font-weight: 500;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


/* WORKSPACE -> SHOW */


.user-show
{

}


/* WORKSPACE -> SHOW -> OVERVIEW */


.user-show > .overview
{   
    width: 100%;
    height: 100vh;
    display: -ms-grid;
    display: grid;

    background-color: rgba( 255, 255, 255, 1.0 );
}


.user-show > .overview > .profile
{
    width: 100%;
    max-width: 980px;

    z-index: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 1 / 1 / 2 / 2;
    
    margin: 0 auto;
    overflow: hidden;
    padding: 128px 0 0 0;

    pointer-events: none;
}


.user-show > .overview > .profile > .header
{
    opacity: 1.0;
    padding: 0px 0 16px 0;
    
    display: -ms-grid;
    
    display: grid;
    grid-gap: 40px;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
}


.user-show > .overview > .profile > .header > .context
{
    opacity: 1.0;

    -webkit-transition-duration: 0.25s;

            transition-duration: 0.25s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
}


.user-show > .overview > .profile > .header > .context > .name
{
    font-size: 40px;
    font-weight: 600;
    text-align: center;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.user-show > .overview > .profile > .header > .toolbar
{
    display: -ms-grid;
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat( auto-fit, minmax( -webkit-max-content, 0 ) );
    grid-template-columns: repeat( auto-fit, minmax( max-content, 0 ) );

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
}


.user-show > .overview > .profile > .report
{
    display: -ms-grid;
    display: grid;
    grid-gap: 1px;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    grid-template-columns: repeat( auto-fit, minmax( 128px, 1fr ) );
    
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba( 224, 224, 224, 1.0 );
    background-color: rgba( 224, 224, 224, 1.0 );
}


.user-show > .overview > .profile > .report > .item
{
    padding: 32px;

    display: -ms-grid;

    display: grid;
    grid-gap: 8px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-grid-columns: 48px 8px 1fr;
    grid-template-columns: 48px 1fr;
    background-color: rgba( 250, 250, 250, 1.0 );
}


.user-show > .overview > .profile > .report > .item > svg
{
    width: 48px;
    height: 48px;
}


.user-show > .overview > .profile > .report > .item > .stats > .desc
{
    font-size: 14px;
    font-weight: 400;

    color: rgba( 128, 128, 128, 1.0 );
}


.user-show > .overview > .profile > .report > .item > .stats > .value
{
    padding-top: 4px;
    
    font-size: 24px;
    font-weight: 600;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.user-show > .overview > .charting
{
    z-index: 0;
    width: 100%;
    height: 56vh;
    min-width: 100% !important;
    /* min-height: 100% !important; */
    
    -ms-grid-row: 1;
    
    -ms-grid-row-span: 1;
    
    -ms-grid-column: 1;
    
    -ms-grid-column-span: 1;
    
    grid-area: 1 / 1 / 2 / 2;
    
    position: relative;
    padding: 0 16px 16px 16px;
    
    -ms-grid-row-align: end;
    
        align-self: end;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    -ms-flex-line-pack: end;
        align-content: end;
}


/* WORKSPACE -> SHOW -> ACTIVITY */


.user-show > .activity
{   
    background-color: rgba( 250, 250, 250, 1.0 );
}


.user-show > .activity > .table-level > .header
{
    top: 63px;
    position: sticky;
    padding: 32px 0 8px 0;
    
    background: repeating-linear-gradient(
        135deg,
        rgba( 0.0, 0.0, 0.0, 0.0 ),
        rgba( 0.0, 0.0, 0.0, 0.0 ) 10px,
        rgba( 0.0, 0.0, 0.0, 0.0075 ) 10px,
        rgba( 0.0, 0.0, 0.0, 0.0075 ) 20px );

    border-style: solid;
    border-width: 1px 0;
    border-color: rgba( 224, 224, 224, 1.0 );

    -webkit-backdrop-filter: blur( 16px ) saturate( 180% );

            backdrop-filter: blur( 16px ) saturate( 180% );

    background-color: rgba( 255, 255, 255, 0.25 );
}


.user-show > .activity > .table-level > .header > .container
{
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;

    width: 100%;
    max-width: 980px;

    padding: 0;
    margin: 0 auto;
}


.user-show > .activity > .table-level > .header > .container > .grid
{
    display: -ms-grid;
    display: grid;
    /* grid-gap: 2px; */
    -ms-grid-columns: 3fr 1fr 1fr 1fr 64px;
    grid-template-columns: 3fr 1fr 1fr 1fr 64px;

    -webkit-box-align: end;

        -ms-flex-align: end;

            align-items: end;
    justify-items: end;
}


.user-show > .activity > .table-level > .header > .container > .grid > .title
{
    font-size: 24px;
    font-weight: 600;
    -ms-grid-column-align: start;
        justify-self: start;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.user-show > .activity > .table-level > .header > .container > .grid > .item
{
    font-size: 14px;

    color: rgba( 160, 160, 160, 1.0 );
}


.user-show > .activity > .table-level > .content
{   
    width: 100%;
    margin: 0 auto;
    padding: 96px 0;
    max-width: 980px;
}


.user-show > .activity > .table-level > .content > .container
{   
    display: -ms-grid;   
    display: grid;
    grid-gap: 1px;
    overflow: hidden;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;

    border-radius: 16px;
    border: 1px solid rgba( 224, 224, 224, 1.0 );

    background-color: rgba( 224, 224, 224, 1.0 );
}


/* WORKSPACE -> STATS */


.user-stats
{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    position: fixed;
    z-index: 99999999;
    -webkit-backdrop-filter: brightness( 0.8 ) blur( 4px );
            backdrop-filter: brightness( 0.8 ) blur( 4px );
}


.user-stats > .container
{
    padding: 32px 0 64px 0;
    margin: 64px auto 32px auto;

    width: calc( 100vw - 64px );
    max-width: 1400px;

    border-radius: 32px;
    background-color: rgba( 255, 255, 255, 1.0 );
}


/* WORKSPACE -> STATS -> HEADER */


.user-stats > .container > .header
{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    width: 100%;
    height: 160px;
    position: sticky;
}


.user-stats > .container > .header > .backdrop
{
    top: 0;
    left: 0;
    width: 100%;
    height: 192px;
    position: absolute;
    border-radius: 32px 32px 0 0;

    -webkit-backdrop-filter: blur( 16px );

            backdrop-filter: blur( 16px );
    
	-webkit-mask: -webkit-gradient(
        linear, 
        left top, left bottom, 
        color-stop(50%, rgba( 255, 255, 255, 1.0 )), 
        to(rgba( 255, 255, 255, 0.0 )) );
    
	-webkit-mask: linear-gradient(
        180deg, 
        rgba( 255, 255, 255, 1.0 ) 50%, 
        rgba( 255, 255, 255, 0.0 ) 100% );
    
	        mask: -webkit-gradient(
        linear, 
        left top, left bottom, 
        color-stop(50%, rgba( 255, 255, 255, 1.0 )), 
        to(rgba( 255, 255, 255, 0.0 )) );
    
	        mask: linear-gradient(
        180deg, 
        rgba( 255, 255, 255, 1.0 ) 50%, 
        rgba( 255, 255, 255, 0.0 ) 100% );
}


.user-stats > .container > .header > .gradient
{
    top: 0;
    left: 0;
    width: 100%;
    height: 192px;
    position: absolute;
    border-radius: 32px 32px 0 0;

    background: -webkit-gradient(
        linear, 
        left top, left bottom, 
        from(rgba( 255, 255, 255, 1.0 )), 
        to(rgba( 255, 255, 255, 0.0 )) );

    background: linear-gradient(
        180deg, 
        rgba( 255, 255, 255, 1.0 ) 0%, 
        rgba( 255, 255, 255, 0.0 ) 100% );
}


.user-stats > .container > .header > .headline
{
    width: 100%;
    margin: 0 auto;
    max-width: 980px;

    display: -ms-grid;

    display: grid;
    grid-gap: 2px;
    -ms-grid-rows: 128px;
    grid-template-rows: 128px;
    -ms-grid-columns: 1fr 2px 32px;
    grid-template-columns: 1fr 32px;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
}


.user-stats > .container > .header > .headline > *:nth-child(1)
{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}


.user-stats > .container > .header > .headline > *:nth-child(2)
{
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}


.user-stats > .container > .header > .headline > .infos
{
    z-index: 9999;
}


.user-stats > .container > .header > .headline > .infos > .eyebrow
{
    font-size: 16px;
    font-weight: 400;

    color: rgba( 160, 160, 160, 1.0 );
}


.user-stats > .container > .header > .headline > .infos > .title
{
    padding-top: 2px;

    font-size: 32px;
    font-weight: 600;

    color: rgba( 0, 0, 0, 1.0 );
}


.user-stats > .container > .header > .headline > .toolbar
{
    display: -ms-grid;
    display: grid;
    -webkit-column-gap: 8px;
       -moz-column-gap: 8px;
            column-gap: 8px;
    -ms-grid-columns: ;
    grid-template-columns: repeat( auto, 32px );
}


.user-stats > .container > .header > .headline > .toolbar > a
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    width: 32px;
    height: 32px;
    overflow: hidden;
    position: relative;

    border-radius: 50%;
    background-color: rgba( 0, 0, 0, 0.2 );
    
    -webkit-transition-duration: 0.1s;
    
            transition-duration: 0.1s;
    -webkit-transition-property: background-color;
    transition-property: background-color;
}


.user-stats > .container > .header > .headline > .toolbar > a:hover
{
    cursor: pointer;
    background-color: rgba( 0, 0, 0, 0.4 );
}


.user-stats > .container > .header > .headline > .toolbar > a:active
{
    cursor: pointer;
    background-color: rgba( 0, 0, 0, 0.8 );
}


.user-stats > .container > .header > .headline > .toolbar > a > svg
{
    width: 22px;
    height: 22px;
    margin: auto;
    display: block;
    pointer-events: none;
    color: rgba( 0, 0, 0, 0.8 );
}


.user-stats > .container > .header > .headline > .toolbar > a:active > svg
{
    color: rgba( 255, 255, 255, 1.0 );
}


/* MODAL -> STATS -> CONTENT */


.user-stats > .container > .content
{
    z-index: 0;
    padding: 0;
    margin: 0 auto;
    max-width: 980px;

    display: -ms-grid;

    display: grid;
    grid-template-rows: repeat( auto-fit, 2fr );
}


.user-stats > .container > .content > .row-stats
{
    padding: 80px 0;

    display: -ms-grid;

    display: grid;
    grid-gap: 64px;
    -ms-grid-columns: 1fr 64px 2fr;
    grid-template-columns: 1fr 2fr;

    border-width: 1px 0;
    border-style: solid;
    border-color: rgba( 224, 224, 224, 1.0 );
}


.user-stats > .container > .content > .row-stats.first
{
    border-width: 1px 0;
}


.user-stats > .container > .content > .row-stats.center
{

    border-width: 0 0 1px 0;
}


.user-stats > .container > .content > .row-stats.last
{
    border-width: 0;
}


.user-stats > .container > .content > .row-stats > .data
{
    display: -ms-grid;
    display: grid;
    grid-gap: 32px;
    -ms-grid-rows: -webkit-min-content 32px -webkit-min-content;
    -ms-grid-rows: min-content 32px min-content;
    grid-template-rows: -webkit-min-content -webkit-min-content;
    grid-template-rows: min-content min-content;

    -ms-grid-row-align: center;

        align-self: center;
}


.user-stats > .container > .content > .row-stats > .data > .value
{

}


.user-stats > .container > .content > .row-stats > .data > .value > .head
{
    font-size: 48px;
    font-weight: 600;

    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.user-stats > .container > .content > .row-stats > .data > .value > .subhead
{
    font-size: 16px;
    font-weight: 600;

    color: rgba( 64, 64, 64, 1.0 );
}


.user-stats > .container > .content > .row-stats > .data > .description
{
    font-size: 16px;
    font-weight: 400;

    color: rgba( 128, 128, 128, 1.0 );
}


.user-stats > .container > .content > .row-stats > .data > .skill
{
    display: -ms-grid;
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat( auto-fit, minmax( -webkit-min-content, 0 ) );
    grid-template-columns: repeat( auto-fit, minmax( min-content, 0 ) );
}


.user-stats > .container > .content > .row-stats > .data > .skill > .badge
{
    padding: 4px 8px;

    font-size: 12px;
    font-weight: 400;
    color: rgba( 32, 32, 32, 1.0 );

    border-radius: 64px;

    background-color: rgba( 244, 244, 244, 1.0 );
}


.user-stats > .container > .content > .row-stats > .chart
{
    z-index: 0;
    position: relative;
    
    width: 100%;
    height: 256px;
    min-width: 100% !important;
    min-height: 100% !important;
}


/* REVIEW */


.user-stats > .container > .cross
{
    width: 100%;
    padding: 32px 0;

    border-width: 1px 0;
    border-style: solid;
    border-color: rgba( 224, 224, 224, 1.0 );

    font-size: 20px;
    font-weight: 500;
    text-align: center;
    color: rgba( 0.0, 0.0, 0.0, 1.0 );

    background: repeating-linear-gradient(
        135deg,
        rgba( 0.0, 0.0, 0.0, 0.0 ),
        rgba( 0.0, 0.0, 0.0, 0.0 ) 10px,
        rgba( 0.0, 0.0, 0.0, 0.0075 ) 10px,
        rgba( 0.0, 0.0, 0.0, 0.0075 ) 20px );

    background-color: rgba( 252, 252, 252, 1.0 );
}


.user-stats > .container > .review
{
    margin: 0 auto;
    padding: 80px 0;
    max-width: 980px;

    border-width: 1px 0;
    border-style: solid;
    border-color: rgba( 224, 224, 224, 1.0 );
}


.user-stats > .container > .review.first
{
    border-width: 1px 0;
}


.user-stats > .container > .review.center
{

    border-width: 0 0 1px 0;
}


.user-stats > .container > .review.last
{
    border-width: 0;
}


.user-stats > .container > .review > .wrapper
{
    padding-bottom: 16px;

    display: -ms-grid;

    display: grid;
    grid-gap: 8px;
    -ms-grid-columns: 24px 8px 1fr;
    grid-template-columns: 24px 1fr;

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
}


.user-stats > .container > .review > .wrapper > .icon
{
    width: 32px;
    height: 32px;
    display: block;
    -ms-flex-line-pack: center;
        align-content: center;
}


.user-stats > .container > .review > .wrapper > .info > .title
{
    font-size: 24px;
    font-weight: 600;
    color: rgba( 0.0, 0.0, 0.0, 1.0 );
}


.user-stats > .container > .review > .wrapper > .info > .subtitle
{
    font-size: 14px;
    font-weight: 400;
    color: rgba( 128, 128, 128, 1.0 );
}


.user-stats > .container > .review > .chart
{
    z-index: 0;
    position: relative;
    
    width: 100%;
    height: 320px;
    min-width: 100% !important;
    min-height: 100% !important;
}