﻿@import url('roboto.css');
@import url('material-icons.css');
:root
{
    --primary: #4f4c6a;
    --on-primary: #fff;
    --secondary: #fbb040;
    --secondary-variant: #ad4200;
    --background: #fff;
    --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 .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(../image/menu-arrow.svg) no-repeat 0 0;
    margin-left: .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: #888;
}/* 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]::after
{
    display: block;
    content: '.';
    position: relative;
    top: .125em;
    background-color: var(--primary);
    -webkit-mask-image: url(../image/radio_not_checked.svg);
    -webkit-mask-size: contain;
    mask-image: url(../image/radio_not_checked.svg);
    mask-size: contain;
    width: 1em;
    height: 1em;
}
input[type=radio]:checked::after
{
    -webkit-mask-image: url(../image/radio_checked.svg);
    mask-image: url(../image/radio_checked.svg);
}
input[type=radio]:disabled::after
{
    background-color: #aaa;
}
input[type=radio]:disabled+label, label>input[type=radio]:disabled~*
{
    color: #aaa;
}/** 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]::after
{
    display: block;
    content: '.';
    position: absolute;
    background-color: currentColor;
    -webkit-mask-image: url(../image/checkbox-not-checked.svg);
    -webkit-mask-size: contain;
    mask-image: url(../image/checkbox-not-checked.svg);
    mask-size: contain;
    width: 1.25em;
    height: 1.25em;
}
input[type=checkbox]:checked::after
{
    -webkit-mask-image: url(../image/checkbox-checked.svg);
    mask-image: url(../image/checkbox-checked.svg);
}
input[type=checkbox]:disabled::after
{
    background-color: #aaa;
}
input[type=checkbox]:disabled+label, label>input[type=checkbox]:disabled~*
{
    color: #aaa;
}/** 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: ', ';
}
ul.inlined-list.pipe-separated>li:not(:last-child)::after
{
    content: ' | ';
}
ul.inlined-list.semicolon-separated>li:not(:last-child)::after
{
    content: '; ';
}
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: .25rem;
}/** usos-timetable configuration to center day headers */
usos-timetable>*>:first-child
{
    max-width: calc(880px - var(--timetable-hours-width));
    position: sticky;
    left: 0;
}
@media screen and (max-width: 1200px)
{
    usos-timetable>*>:first-child
    {
        max-width: calc(100vw - 20vw - 80px - var(--timetable-hours-width));
        min-width: fit-content;
    }
    main-panel[left-menu-hidden] usos-timetable>*>:first-child
    {
        max-width: calc(100vw - 80px - var(--timetable-hours-width));
    }
}
usos-layout[expanded] usos-timetable>*>:first-child
{
    max-width: calc(100vw - 20vw - 80px - var(--timetable-hours-width));
}
usos-layout[expanded] main-panel[left-menu-hidden] usos-timetable>*>:first-child
{
    max-width: calc(100vw - 80px - var(--timetable-hours-width));
}
usos-timetable>*>:first-child>*
{/* consistent header with empty hours header */
    font-weight: 500;
    margin: .5rem 0;
    font-size: .925rem;
    text-align: center;
    line-height: inherit;
}
usos-timetable[mini]>*>:first-child>*
{
    margin: 2px 0;
    font-size: .5rem;
}