html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    border: 0;
    outline: 0;
    /*font-size: 100%;*/
    vertical-align: baseline;
    background: transparent;
    margin: 0;
    padding: 0;
}
html {
    /*font-size: calc(17px + (29 - 17) * ((100vw - 300px) / (1920 - 300)));*/
    font-size:17px
}
body {
    /* this font list is typical of modern web devs (2020) */
    /*font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/
    /*font-weight:300*/
    font-family:Nunito,Trebuchet MS,Helvetica,sans-serif;
}
p, ul {
    margin-bottom:1rem;
    line-height:1.5em
}
/* {{{ COLORS */
.bg-foreground {
    background-color:black;
}
.bg-foreground-a10 {
    background-color:rgba(0,0,0,0.1)
}
.bg-foreground-a20 {
    background-color:rgba(0,0,0,0.2)
}
.bg-foreground-a75 {
    background-color:rgba(0,0,0,0.75)
}
.border-foreground {
    border-color:black;
}
.border-foreground-a20 {
    border-color:rgba(0,0,0,0.2);
}
.text-foreground {
    color:black;
}
.text-foreground-a50 {
    color:rgba(1,1,1,0.5)
}
.text-foreground-a75 {
    color:rgba(1,1,1,0.75)
}
.text-foreground-a100 {
    color:black;
}
.bg-button {
    background-color:rgb(2, 122, 255);
}
.bg-background {
    background-color:rgb(239,239,244)
}
.text-background {
    color:white;
}
.text-systemRed {
    color:rgb(255, 59, 48);
}
.text-systemGreen {
    color:rgb(52,199,89);
}
.border-background {
    border-color:rgb(239,239,244);
}
.border-foreground-a20 {
    border-color:rgba(0,0,0,0.2)
}
/* }}} */
/* {{{ PADDING */
.pad-20 {
    padding:0.2rem
}
.pad-100 {
    padding:1rem
}
.pad-25 {
    padding:0.25rem;
}
.pad-h-100 {
    padding-left:1rem;
    padding-right:1rem
}
.pad-l-50 {
    padding-left:0.5rem;
}
.pad-r-50 {
    padding-right:0.5rem;
}
.pad-t-20 {
    padding-top:0.2rem;
}
.pad-b-20 {
    padding-bottom:0.2rem;
}
.pad-b-50 {
    padding-bottom:0.5rem;
}
.pad-b-100 {
    padding-bottom:1rem;
}
.pad-y-10 {
    padding-top:0.1rem;
    padding-bottom:0.1rem;
}
.pad-y-20 {
    padding-top:0.2rem;
    padding-bottom:0.2rem;
}
.pad-y-25 {
    padding-top:0.25rem;
    padding-bottom:0.25rem;
}
.pad-y-50 {
    padding-top:0.5rem;
    padding-bottom:0.5rem;
}
.pad-y-100 {
    padding-top:1rem;
    padding-bottom:1rem;
}
.pad-x-50 {
    padding-left:0.5rem;
    padding-right:0.5rem;
}
.pad-x-100 {
    padding-left:1rem;
    padding-right:1rem;
}
.pad-x-200 {
    padding-left:2rem;
    padding-right:2rem;
}
/* }}} */
/* {{{ MARGINS */
.margin-x-100 {
    margin-left:1rem;
    margin-right:1rem
}
.margin-r-100 {
    margin-right:1rem;
}
.margin-l-100 {
    margin-left:1rem;
}
.margin-y-15 {
    margin-top:0.15rem;
    margin-bottom:0.15rem;
}
.margin-y-20 {
    margin-top:0.2rem;
    margin-bottom:0.2rem;
}
.margin-y-50 {
    margin-top:0.5rem;
    margin-bottom:0.5rem;
}
.margin-y-100 {
    margin-top:1rem;
    margin-bottom:1rem;
}
.margin-y-200 {
    margin-top:2rem;
    margin-bottom:2rem;
}
.margin-t-50 {
    margin-top:0.5rem;
}
.margin-t-100 {
    margin-top:1rem;
}
.margin-t-200 {
    margin-top:2rem;
}
.margin-l-20 {
    margin-left:0.2rem;
}
.margin-l-50 {
    margin-left:0.5rem;
}
.margin-l-75 {
    margin-left:0.75rem;
}
.margin-l-100 {
    margin-left:1rem;
}
.margin-l--100 {
    margin-left:-1rem;
}
.margin-r-20 {
    margin-right:0.2rem;
}
.margin-r--100 {
    margin-right:-1em;
}
.margin-b-0 {
    margin-bottom:0;
}
.margin-b-25 {
    margin-bottom:0.25rem;
}
.margin-b-50 {
    margin-bottom:0.5rem;
}
.margin-b-100 {
    margin-bottom:1rem;
}
.margin-b-200 {
    margin-bottom:2rem;
}
.margin-b-300 {
    margin-bottom:3rem;
}
/* }}} */
/* {{{ MIN WIDTHS */
.mw-325 {
    min-width:3.25rem;
}
/* }}} */
/* {{{ FONT SIZES */
.font-65 {
    font-size:0.65rem;
}
.font-70 {
    font-size:0.7rem
}
.font-75 {
    font-size:0.75rem;
}
.font-100 {
    font-size:1rem;
}
.font-150 {
    font-size:1.5rem;
}
/* }}} */
/* {{{ SHADOWS */
.shadow-outline-foreground-a20 {
    box-shadow:0 0 0 3px rgba(0, 0, 0,0.2);
}
/* }}} */
/* {{{ FOCUS?? */
.focus\:shadow-outline-button-a20:focus {
    box-shadow:0 0 0 3px rgba(2, 122, 255,0.2);
}
/* }}} */
/* {{{ CORNERS?? */
.rounded {
    border-radius: 1rem;
}
/* }}} */
/* {{{ ALIGNMENT */
.text-center {
    text-align:center
}
.text-right {
    text-align:right
}
/* }}} */
ul {
    margin-bottom:1rem
}
li {
    margin-left:1rem;
    margin-bottom:0.5rem
}
header {
    background-image:url(/release_notes/img/letter-bg.jpg);
    color:#fff;
    background-size:1276px;
    background-position: -59px -275px;
    border-bottom:0.5rem solid #eee
}
header h1 {
    font-size:1rem;
    padding:0.5rem 0 0.5rem 3.5rem;
}
header h1 {
    background-image:url(/release_notes/img/WOL_white_165x165.png);
    background-repeat:no-repeat;
    background-size:2.75rem;
    background-position:0 center;
    margin:0
}
header .Content h1 a {
    text-decoration: none;
    color:white;
    font-weight:bold;
    font-size:1.5em
}
header .Content {
    display:flex;
    align-items: center;
    padding:0.5rem 0 0.5rem 0
}
header .Content a {
    font-size: 1rem;
}
header .Content a:hover {
    text-decoration: underline;
}
nav {
    font-size:1rem;
    padding:0.2rem 0 0.2rem 0;
}
nav #NavContent {
    display:flex;
    align-items: center;
}
nav #AppFeedback {
    flex:1 0 auto;
    text-align:left;
    font-style: italic;
}
a {
    text-decoration:none;
    color:rgb(2, 122, 255);
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom:1rem
}
h2 {
    font-size:1.5rem
}
h3 {
    font-size:1.25rem
}
h4 {
}
form {
    padding:1.5rem;
    border-radius: 1rem;
    text-align: center;
    margin-bottom:1rem
}
label {
    display:block;
    font-size: 0.75rem;
    text-align:left;
    margin-bottom:0.5rem
}
input {
    display:block;
}
input:focus {
    outline-width:0;
}
input[type=text], input[type=password], input[type=email], textarea {
    background-color:white;
    border-radius: 0.5rem;
    padding:0.25rem 0.5rem 0.25rem 0.5rem;
    font-size: 1rem;
    width:100%;
    border-width:1px;
    border-style: solid;
}
textarea {
    height:6em;
    max-width: 100%;
}
.field-container {
    margin-bottom:1rem;
    display:inline-block;
    width:100%;
}
form .field-container.signin {
    margin-top:1rem;
    margin-bottom:0
}
a.button {
    text-decoration: none;
    border-radius: 0.75rem;
    display:inline-block;
    border-width: 1px;
    border-style: solid;
    text-align:center;
    position:relative
}
.ContentContainer, header {
    display:grid;
    grid-template-columns: repeat(24,1fr);
}
.Content {
    grid-column:2 / span 22;
}
.title-reg {
    display: none;
}
#FormFooter {
    display:grid;
    grid-template-columns: 1fr 1fr;
    text-align:center;
}
#SiteNav .navitem {
    display:flex;
    color:white;
    margin-right:1rem
}
#SiteNav .navitem img {
    margin-left:0.5rem
}
#SiteNav .navitem span {
    margin-left:0.5rem;
    display: none;
}
@media (min-width: 500px) {
    .Content {
        grid-column:5 / span 16;
    }
    .Content.Functional {
        grid-column:7 / span 12;
    }
    body .feedback {
        width:450px;
        left:50%;
        margin-left:-225px;
    }
}
@media (min-width: 600px) {
    .title-reg {
        display:initial;
    }
    .title-small {
        display:none
    }
}
@media (min-width: 1024px) {
    .title-reg {
        display:initial;
    }
    .title-small {
        display:none
    }
    .Content {
        grid-column:7 / span 12;
    }
    .Content.Functional {
        grid-column:8 / span 10;
    }
    body .feedback {
        width:450px;
        left:50%;
        margin-left:-225px;
    }
}
@media (min-width: 1365px) {
    #SiteNav .navitem span {
        display:inline
    }
    .title-reg {
        display:initial;
    }
    .title-small {
        display:none
    }
    .Content {
        grid-column:8 / span 10;
    }
    .Content.Functional {
        grid-column:9 / span 8;
    }
    body .feedback {
        width:450px;
        left:50%;
        margin-left:-225px;
    }
}
.Content {
    padding-top:1rem
}
#NavContent {
    text-align:right;
    padding-top:0
}
#FooterContent {
    text-align:center;
    padding:0
}
#FooterContent a {
    color:inherit
}
#siwa_button {
    cursor:pointer;
    white-space: nowrap;
}
#siwa_button img {
    cursor:pointer
}

/* {{{ FEEDBACK SYSTEM */
.feedback {
    display:grid;
    grid-template-columns: 80px 1fr;
    position:fixed;
    top:0;
    width:100%;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    box-shadow:0px 0px 10px
}
/* see https://codepen.io/sosuke/pen/Pjoqqp */
.feedback.success .indicator, .systemGreenFilter {
    filter: invert(58%) sepia(100%) saturate(358%) hue-rotate(83deg) brightness(93%) contrast(83%); /* systemGreen */
}
.feedback.error .indicator, .systemRedFilter {
    filter: invert(33%) sepia(49%) saturate(3161%) hue-rotate(342deg) brightness(103%) contrast(106%); /* systemRed */
}
.systemYellowFilter {
    filter: invert(78%) sepia(36%) saturate(1490%) hue-rotate(358deg) brightness(100%) contrast(105%);
}
.feedback.info .indicator, .systemBlueFilter {
    filter: invert(41%) sepia(66%) saturate(5890%) hue-rotate(199deg) brightness(102%) contrast(107%);
}
.fade-in {
    animation-duration:0.25s;
    animation-name:fadein;
    animation-fill-mode: forwards;
}
.fade-in-slow {
    animation-duration:3s;
    animation-name:fadein;
    animation-fill-mode: forwards;
}
.fade-out {
    animation-duration:0.25s;
    animation-name:fadeout;
    animation-fill-mode: forwards;
}
.fade-out-slow {
    animation-duration:3s;
    animation-name:fadeout;
    animation-fill-mode: forwards;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
/* }}} */

/* {{{ LOADING INDICATOR CODE FROM https://loading.io/css/ */
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}
/* }}} */

/* {{{ Store badges */
.badgeWrapper {
    grid-template-columns:1fr;
    display: grid;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1rem;
}
.badgeWrapper .b2 {
    padding: 0.5rem 0;
}
.badgeWrapper img {
    height:60px
}
@media (min-width: 850px) {
    .badgeWrapper {
        grid-template-columns:1fr auto 1fr;
    }

    .badgeWrapper img {
        height: 55px
    }

    .badgeWrapper .b2 {
        padding: 0 0.5rem;
    }
    .badgeWrapper .b1 {
        justify-self:right
    }
    .badgeWrapper .b3 {
        justify-self:left
    }
}
/* }}} */

/* news section */
.pubdate {
    font-style: italic;
    border-top:0.125rem solid #ccc;
    font-size:0.75rem;
    color:#666
}
.ender {
    text-align: center;
    margin-bottom:2rem
}