@import url('fonts/roboto/roboto.css');
@import url('fonts/material-icons/material-icons.css');

:root {
    --primary: #4F4C6A;
    --on-primary: #FFFFFF;
    --secondary: #FBB040;
    --secondary-variant: #AD4200;
    --background: #FFFFFF;
    --on-background: var(--font-color);
    --background-secondary: #EFEFF1;
    --on-background-secondary: var(--font-color);
    --font-color: #06022E;

    --grey: #4d4d4d;
    --border: #dadade;

    --ok-status: #438600;
    --error: #963030;

    --module-link-tile-text-content-line-height: 1;
}

h1 {
    color: var(--font-color);
    font-size: 1.375rem;
    text-align: left;
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 1.5rem 0;
}

h2 {
    color: var(--font-color);
    font-size: 1.375rem;
    text-align: left;
    font-weight: normal;
    line-height: 1.15;
    margin: 2rem 0 0.75rem 0;
}


:focus { outline: 1px solid currentColor; outline-offset: 2px; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

menu-top:focus, menu-left:focus, [slot="pageBody"]:focus { outline: none; }

/* topMenu */

menu-top-item:focus { outline-offset: -8px; }

/* leftMenu */

menu-left ul, menu-left li {
    margin: 0;
    padding: 0;
    list-style: outside none none;
}

menu-left a:focus { outline-offset: 0; }

menu-left > ul > li { margin: 25px 0 0 0; }
menu-left > ul > li li { margin: 0 0 0 0 }
menu-left > ul > li li li { margin: 0 0 0 11px }

menu-left > ul > li > :is(a, span) {
    background: none !important;
    padding: 0;
    text-transform: uppercase;
}

menu-left li :is(a, span) {
    display: inline-block;
    padding: 0 0 0 1.25rem;
    color: var(--font-color);
    text-decoration: none;
    text-transform: lowercase;
    outline: none;
}

menu-left li li :is(a, span) {
    background: url(../assets/icons/menu-arrow.svg) no-repeat 0 0;
    margin-left: 0.5rem;
    background-size: 1rem;
}

menu-left li li li :is(a, span) {
    background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'><circle%20cx='10'%20cy='10'%20r='3'%20stroke='rgba(166,41,41)'%20stroke-width='0'%20fill='rgba(166,41,41)'></circle></svg>");
}


menu-left li :is(a, span).dynamic {
    text-transform: none;
}

menu-left li a:visited, menu-left li a:active {
    color: var(--font-color);
}

menu-left li a:hover, menu-left li a:focus {
    color: var(--font-color);
    text-decoration: underline;
}

menu-left li :is(a, span).selected {
    font-weight: bold;
}

menu-left li :is(a, span).disabled {
    color: #888888;
}

/* icons */
span.icon-inline {
    font-size: inherit;
}

span.icon-clickable {
    font-size: 24px;
    padding: 5px;
    cursor: pointer;
}

span.icons-hide-underline { margin-top: -1px; margin-bottom: -1px; overflow: hidden; }

/* usos-frame */
usos-frame > .hide-borders { margin: 0; padding: 0; }
usos-frame > .hide-borders > * { width: calc(100% + 2px); margin: -1px -1px; }


/** radio button */

input[type=radio] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    color: inherit; /* normalize because of chrome */
}

input[type=radio]:focus-visible {}

input[type=radio]::after {
    display: block;
    content: '.';
    position: relative; top: 0.125em;
    background-color: var(--primary);
    -webkit-mask-image: url(../assets/radio/radio_not_checked.svg); -webkit-mask-size: contain;
    mask-image: url(../assets/radio/radio_not_checked.svg); mask-size: contain;
    width: 1em; height: 1em;
}

input[type=radio]:checked::after {
    -webkit-mask-image: url(../assets/radio/radio_checked.svg);
    mask-image: url(../assets/radio/radio_checked.svg);
}

input[type=radio]:disabled::after {
    background-color: #AAAAAA;
}

input[type=radio]:disabled + label, label > input[type=radio]:disabled ~ * { color: #AAAAAA; }

/** checkbox */

input[type=checkbox] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    position: relative; width: 1.25em; height: 1em;
    color: inherit; /* normalize because of chrome */
}

input[type=checkbox]:focus-visible {}

input[type=checkbox]::after {
    display: block;
    content: '.';
    position: absolute;
    background-color: currentColor;
    -webkit-mask-image: url(../assets/checkbox/checkbox-not-checked.svg); -webkit-mask-size: contain;
    mask-image: url(../assets/checkbox/checkbox-not-checked.svg); mask-size: contain;
    width: 1.25em; height: 1.25em;
}

input[type=checkbox]:checked::after {
    -webkit-mask-image: url(../assets/checkbox/checkbox-checked.svg);
    mask-image: url(../assets/checkbox/checkbox-checked.svg);
}

input[type=checkbox]:disabled::after {
    background-color: #AAAAAA;
}

input[type=checkbox]:disabled + label, label > input[type=checkbox]:disabled ~ * { color: #AAAAAA; }

/** lists */

ul.no-bullets {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.inlined-list > li {
    display: inline;
}

ul.inlined-list > li:not(:last-child)::after {
    display: inline-block;
    content: ',\00a0';
}
ul.inlined-list.pipe-separated > li:not(:last-child)::after { content: '\00a0|\00a0'; }
ul.inlined-list.semicolon-separated > li:not(:last-child)::after { content: ';\00a0'; }

ul.separated > li { padding: 1rem; }
ul.separated > li:not(:last-child) { border-bottom: 1px solid var(--border); }
ul.separated > li > :first-child { margin-top: 0; }
ul.separated > li > :last-child { margin-bottom: 0; }

/** tables */
.autoscroll {
    overflow-x: auto;
    padding: 1px;
    margin-bottom: 1.2rem;
    position: relative;
}

.autoscroll > * {
    margin-bottom: 0.25rem;
}