@charset "UTF-8";

body {
    --input-border-color: 136, 167, 75;
    --form-btn-bg-color: 136, 167, 75;
    --form-btn-text-color: 64, 64, 64;
    --menu-item-hover-bg-color: 244, 232, 210;
    --body-bg-color: 244, 232, 210;
    --calendar-selected-bg-color: 244, 232, 210, 0.6;
    --calendar-hover-bg-color: 244, 232, 210;
    --btn-bg-color: 136, 167, 75;
    --grid-btn-bg-color: 136, 167, 75;
    --grid-record-shadow-color: 136, 167, 75;
}
form[data-type="form"] > span[data-type="buttons"] > input[type="submit"],
form[data-type="form"] > span[data-type="buttons"] > input[type="reset"] {
    background-color: rgba(var(--form-btn-bg-color), 0.3);
    color: rgb(var(--form-btn-text-color));
}

body > header > .logo {
    width: 8rem;
    height: 3rem;
    background-image: url("../images/logo.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 0.75rem 0 0.5rem;
}

body > header > span.title {
    width: calc(-16rem + 100%);
    height: 4rem;
    line-height: 4rem;
    font-family: "Microsoft YaHei", PingFang, sans-serif;
    font-weight: bolder;
    color: rgb(var(--bg-color));
}

body > header > div#btn-group {
    float: right;
}

body > header > div#btn-group > form#searchForm {
    height: 3rem;
}

body > header > div#btn-group > form#searchForm > label {
    height: 3rem;
    line-height: 3rem;
    margin-right: 1rem;
    font-size: 1rem;
}

body > header > div#btn-group > form#searchForm > input#keywords {
    height: calc(-1px + 2rem);
    line-height: calc(-1px + 2rem);
    margin: 0.5rem 0;
}

body > header > div#btn-group > form#searchForm > input[type=submit] {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    margin: 0.5rem;
    padding: 0;
    box-shadow: none;
    border-bottom: none;
    font-size: 1.5rem;
    cursor: pointer;
}

body > header > div#btn-group > nav {
    width: 3rem;
    height: 3rem;
    position: relative;
    cursor: pointer;
    margin-left: 0;
    float: right;
}

body > header > div#btn-group > nav > a[data-type="main"] {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
}

body > header > div#btn-group > nav > a[data-type="main"]::before {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    margin: 0 auto;
    padding: 0;
}

body > header > div#btn-group > nav > span[data-type="items"] {
    width: max-content;
    height: 2rem;
    position: absolute;
    top: 3rem;
    right: 0;
    background-color: rgb(var(--menu-hover-bg-color));
    display: none;
}

body > header > div#btn-group > nav > span[data-type="items"] > span[data-type="menu"] {
    height: 2rem;
}

body > header > div#btn-group > nav:hover > a {
    background-color: rgb(var(--menu-hover-bg-color));
    color: rgb(var(--menu-hover-text-color));
}

body > header > div#btn-group > nav:hover > span[data-type="items"] {
    display: block;
}

body > header > div#btn-group > nav > span[data-type="items"] > span[data-type="menu"]:hover > a {
    height: 2rem;
    background-color: rgb(var(--menu-item-hover-bg-color));
    color: rgb(var(--menu-item-hover-text-color));
}

body > section[data-type="slide"] {
    width: 100%;
    height: 60vh;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

body > main {
    width: 100%;
    margin-top: 3rem;
}

body > main > section[id="banner"] {
    width: 100%;
}

body > main > section[id="banner"] > form-info,
body > main > section[id="banner"] > notification-details {
    width: 50%;
    padding: 2rem 25%;
}

body > main > section[id="banner"] > form-info > form {
    margin: 0 auto;
}

body > main > article {
    width: max(calc(-23rem + 100%), calc(-3rem + 80%));
    min-height: calc(-300px + 100%);
    padding: 0 1rem;
}

body > main > article > section {
    width: 100%;
}

body > main > article > section > h1 {
    width: 100%;
    height: 4rem;
    line-height: 4rem;
}

body > main > article > section > article {
    width: calc(-4rem + 100%);
    margin: 1rem 0;
    padding: 2rem;
    background-color: rgb(var(--section-bg-color));
    border-radius: 1rem;
}

section#circleChart {
    margin-right: 0;
}

html.index > body > header#topic {
    width: 50vw;
    height: 100vh;
    box-shadow: none;
    background-color: #F4E8D2;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

html.index > body > header#topic > a#logo-icon {
    width: 30%;
    height: 0;
    margin: 0 35%;
    padding-bottom: 30%;
    opacity: 0.5;
}

html.index > body > header#topic > a#logo-icon::after,
html.admin > body > header#topic > a#logo-icon::after,
html.member > body > header#topic > a#logo-icon::after {
    content: none;
}

html.admin > body > footer,
html.index > body > footer {
    display: none;
}

html.index > body > main > section#banner {
    position: fixed;
    width: 50vw;
    height: 100vh;
    background-color: #FFFFFF;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

html.index > body > main > section#banner > tabs-info > span[data-type="tabs"] {
    position: relative;
}

html.index > body > main > section#banner > tabs-info > span[data-type="tabs"] > span[data-type="tab-container"] {
    position: absolute;
    bottom: 2rem;
    display: block;
    background: transparent;
}

html.index > body > main > section#banner > tabs-info > span[data-type="tabs"] > span[data-type="tab-container"] > a.current {
    display: none;
}

html.index > body > main > section#banner > tabs-info > span[data-type="tabs"] > span[data-type="tab-container"] > a:last-child {
    float: right;
}

html.index > body > main > section#banner > tabs-info > span[data-type="tabs"] > span[data-type="tab-container"] > a {
    height: 2rem;
    line-height: 2rem;
    padding: 0 1rem;
    border-radius: 1rem;
    color: #404040;
    background-color: rgba(136, 167, 75, 0.3);
}

html.index > body > main > section#banner > tabs-info > span[data-type="tabs"] > span[data-type="data-container"] > form-info > form > span[data-type="buttons"] {
    width: 10rem;
    margin: 0 calc(-5rem + 50%);
    position: relative;
    z-index: 10;
}

html.admin > body > header#topic,
html.admin > body > footer,
html.member > body > header#topic,
html.member > body > footer {
    background-color: rgba(136, 167, 75, 0.4);
    box-shadow: none;
}

html.admin > body > header#topic > a#logo-icon,
html.member > body > header#topic > a#logo-icon {
    background-image: none;
}

html.admin > body > header#topic > a#logo-icon::before,
html.member > body > header#topic > a#logo-icon::before {
    content: "";
    width: 8rem;
    height: 8rem;
    position: fixed;
    background-image: url("../images/logo.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(-20deg);
    border-radius: 50%;
    box-shadow: 0 5px 10px rgba(var(--calendar-shadowbox));
    left: 2rem;
    top: -1rem;
    z-index: 20;
}

html.admin > body > nav[data-type="menu"],
html.member > body > nav[data-type="menu"] {
    height: calc(-8rem + 100%);
    padding-top: 8rem;
    top: 0;
    background-color: #F28943;
    z-index: auto;
}

html.member > body > main#content > article > form-info#orderPayment > form > span[data-type="buttons"] > input[type="submit"],
html.member > body > main#content > article > form-info#calendarOrderForm > form > span[data-type="buttons"] > input[type="submit"] {
    height: 4rem;
    padding: 1rem 2rem;
    font-size: 1.5rem;
    font-weight: bolder;
    background-color: rgb(var(--form-btn-bg-color));
    color: #FFFFFF;
}

body > main > section#banner > operator-button {
    margin-right: 1rem;
    float: right;
}

body > main > article > a[data-type="banner"] {
    height: 10rem;
}

body > main > article {
    margin-top: 1rem;
}

body > main > article > message-list > div[data-type="grid"] {
    margin-top: 0;
}

body > main > article > calendar-element {
    background-color: rgb(var(--section-bg-color));
    border-radius: 1rem;
}

body > main > aside {
    width: min(20rem, calc(-3rem + 20%));
    min-height: calc(-2rem + 100%);
    margin: 1rem 1rem 1rem 0;
    float: right;
}

body > main > aside.freeze {
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 4rem;
    right: 0;
    margin-bottom: 1rem;
}

body > main > aside > * {
    width: 100%;
    border-radius: 0.5rem;
    overflow: hidden;
}

body > main > aside > section[data-type="address"] {
    width: calc(-4rem + 100%);
    padding: 2rem;
    border-radius: 1rem;
    background-color: rgb(var(--section-bg-color));
}

body > footer {
    position: fixed;
    bottom: 0;
}

body > footer > *[data-type="social-group"] {
    width: 15rem;
    float: right;
    margin-bottom: 1rem;
}

body > footer > *[data-type="social-group"] > span[data-type="items"] > a {
    color: #F2F2F7;
}

body > footer > div.footerInfo {
    width: 100%;
    border-top: 1px solid #FFFFFF;
    padding: 0.5rem 0 2rem 0;
}

body > footer > div.footerInfo > div.license {
    max-width: calc(70%);
}

body > footer > div.footerInfo > div.license > a {
    margin-right: 1rem;
}

body > footer > div.footerInfo > div.aboutInfo {
    max-width: calc(-1rem + 30%);
    margin-left: 1rem;
    float: right;
    display: none;
}

body > footer > div#copyRight {
    width: 100%;
    margin: 1rem 0;
    border-top: 1px solid #FFFFFF;
}

body > footer > div#copyRight > span#poweredBy {
    height: 2rem;
    line-height: 2rem;
}

html[lang="en"] {
    font-family: sans-serif;
}

html[lang="en"] > body > header > span.logo {
    background-image: url("../images/logo_en.svg");
}

html[lang="zh-CN"] {
    font-family: sans-serif;
}

html[lang="zh-CN"] > body > header > span.logo {
    background-image: url("../images/logo_zhs.svg");
}

html[lang="zh-TW"] {
    font-family: sans-serif;
}

html[lang="zh-TW"] > body > header > span.logo {
    background-image: url("../images/logo_zht.svg");
}

html.admin > body > nav > span,
html.admin > body > nav > span > nav,
html.member > body > nav > span,
html.member > body > nav > span > nav {
    width: 100%;
}

html.admin > body > nav > span[data-type="items"] > nav[data-type="menu"] > a,
html.member > body > nav > span[data-type="items"] > nav[data-type="menu"] > a {
    width: 15rem;
    height: 3rem;
    line-height: 3rem;
    padding: 0;
    text-align: left;
}

html.admin > body > nav > span[data-type="items"] > nav[data-type="menu"] > a::before,
html.member > body > nav > span[data-type="items"] > nav[data-type="menu"] > a::before {
    width: 2rem;
    height: 2rem;
    padding: 0.5rem;
    color: #FFFFFF;
    font-size: 1.5rem;
}

html.admin > body > nav:hover > span[data-type="items"] > nav[data-type="menu"] > a,
html.member > body > nav:hover > span[data-type="items"] > nav[data-type="menu"] > a {
    width: 100%;
    color: #FFFFFF;
}

html.admin > body > nav > span[data-type="items"] > nav[data-type="menu"]:hover > a,
html.admin > body > nav > span[data-type="items"] > nav[data-type="menu"]:hover > a::before,
html.member > body > nav > span[data-type="items"] > nav[data-type="menu"]:hover > a,
html.member > body > nav > span[data-type="items"] > nav[data-type="menu"]:hover > a::before {
    color: #000000;
}

html.admin > body > main#content,
html.member > body > main#content {
    width: calc(-15rem + 100%);
    margin-left: 15rem;
    padding-bottom: 3rem;
}

html.member > body > main#content > section#banner > operator-button {
    width: min(20rem, calc(-3rem + 20%));
    position: fixed;
    top: 13rem;
    right: 0;
    z-index: 20;
}

html.member > body > main#content > section#banner > operator-button > a {
    width: calc(-2rem + 100%);
    height: 5rem;
    line-height: 5rem;
    box-shadow: 0 5px 10px rgba(var(--calendar-shadowbox));
    background-color: #FFFFFF;
    color: #404040;
    margin: 0 auto;
    font-size: 1.5rem;
    font-weight: bolder;
}

html.member > body > main#content > section#banner > operator-button > a:hover {
    background-color: rgb(136, 167,75);
    box-shadow: none;
    color: #FFFFFF;
}

html.member > body > main#content > aside {
    margin-top: 1rem;
    position: fixed;
    right: 0;
}

html.admin > body > main#content > aside > property-info,
html.member > body > main#content > aside > property-info {
    overflow: unset;
}

html.admin > body > main#content > aside > property-info > span,
html.member > body > main#content > aside > property-info > span {
    box-shadow: 0 5px 10px rgba(var(--calendar-shadowbox));
}

html.admin > body > main#content > article > calendar-element,
html.member > body > main#content > article > calendar-element {
    width: 100%;
    box-shadow: 0 5px 10px rgba(var(--calendar-shadowbox));
}

html.admin > body > footer,
html.member > body > footer {
    height: 4rem;
    position: fixed;
    padding: 0 3rem;
    bottom: 0;
}

html.member > body > footer {
    width: 15rem;
    background: transparent;
    padding: 0;
    height: auto;
}

html.admin > body > footer > div.footerInfo,
html.member > body > footer > div.footerInfo {
    width: calc(-1rem + 100%);
    min-height: 3rem;
    border-top: none;
    padding: 0.5rem;
}

html.admin > body > footer > div.footerInfo > div.license,
html.member > body > footer > div.footerInfo > div.license {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    float: left;
    padding: 0 0.5rem;
}

html.admin > body > footer > div.footerInfo > div.license > a,
html.member > body > footer > div.footerInfo > div.license > a {
    width: 100%;
    min-height: 1.5rem;
    line-height: 1.5rem;
    margin-right: 0;
    color: #404040;
    font-size: 0.8rem;
}

html > body > header > nav,
html > body > header > div#btn-group > nav  {
    display: none;
}

html.admin > body > header > div#btn-group > nav#accountMenu,
html.member > body > header > div#btn-group > nav#accountMenu {
    display: block;
}

body > div[data-type="dialog"] > span[data-type="message"] > resource-info {
    width: 30%;
    height: 100%;
    float: left;
}

body > div[data-type="dialog"] > span[data-type="message"] > resource-info > span[data-type="lazy"] {
    width: 100%;
    height: 0;
    padding: 0 0 100% 0;
    background-size: cover;
    background-color: transparent;
    border-radius: 50%;
}

body > div[data-type="dialog"] > span[data-type="message"] > property-info,
body > div[data-type="dialog"] > span[data-type="message"] > form-item {
    width: 70%;
    float: right;
}

body > div[data-type="dialog"] > span[data-type="message"] > form-item > span[data-type="form-item"] {
    width: calc(-4rem + 100%);
    padding: 1rem 2rem;
}

body > div[data-type="dialog"] > span[data-type="message"] > form-item > span[data-type="form-item"] > span[data-type="title"] {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: left;
}

body > header > a#logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-image: url("../images/logo.jpg");
    margin: 0.25rem;
    border-radius: 50%;
}

body > header > a#logo-icon::after {
    content: "Superfood Wonderland";
    width: max-content;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 1.25rem;
    font-weight: bolder;
    left: 3rem;
    right: auto;
    float: left;
}

div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="grid-list"] > span[data-type="list-record"]:hover > input[data-category="select-all"] + label,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="grid-list"] > span[data-type="list-record"] > span[data-category="preview"] {
    display: none;
}

div[data-type="grid"] > span[data-type="data-grid"].view-list > span[data-type="grid-list"] > span[data-type="list-record"] > a[data-category="main-title"],
div[data-type="grid"] > span[data-type="data-grid"].view-list > span[data-type="grid-list"] > span[data-type="list-record"] > span[data-category="properties"],
div[data-type="grid"] > span[data-type="data-grid"].view-list > span[data-type="grid-list"] > span[data-type="list-record"] > span[data-category="summary"] {
    width: calc(-2rem + 100%);
    max-width: calc(-2rem + 100%);
    padding-left: 1rem;
    margin: 0 0.5rem;
}

div[data-type="grid"] > span[data-type="data-grid"].text-list > span[data-type="grid-list"] > span[data-type="list-record"],
div[data-type="grid"] > span[data-type="data-grid"].view-list > span[data-type="grid-list"] > span[data-type="list-record"],
div[data-type="grid"] > span[data-type="data-grid"].text-list > span[data-type="grid-list"] > span[data-type="list-record"] > span[data-category="properties"],
div[data-type="grid"] > span[data-type="data-grid"].text-list > span[data-type="grid-list"] > span[data-type="list-record"] > span[data-category="properties"] > span[data-type="property"],
div[data-type="grid"] > span[data-type="data-grid"].view-list > span[data-type="grid-list"] > span[data-type="list-record"] > span[data-category="summary"] {
    height: auto;
    text-indent: 0;
}

div[data-type="grid"] > span[data-type="data-grid"].view-list > span[data-type="grid-list"] > span[data-type="list-record"] {
    padding-bottom: 2rem;
}

div[data-type="grid"] > span[data-type="data-grid"].view-list > span[data-type="grid-list"] > span[data-type="list-record"] > span[data-category="operators"] {
    width: calc(-2rem + 100%);
    left: 1.5rem;
    display: block;
}

span[data-type="calendar"][data-category="month"] > span > span:not([data-disabled="true"]).selected {
    background-color: rgba(var(--calendar-selected-bg-color));
}

span[data-type="calendar"] > span[data-type="content"] > span > span[data-type="schedule-item"] > span[data-type="operators"] > a[data-mock="button"] {
    background-color: rgba(var(--btn-bg-color), 0.4);
    border-color: rgb(var(--btn-bg-color));
}

body > header > div#btn-group > nav:hover > a,
body > header > div#btn-group > nav:hover > span[data-type="items"],
span[data-type="calendar"] > span[data-type="content"] > span > span[data-type="schedule-item"] > span[data-type="operators"] > a[data-mock="button"]:hover {
    background-color: rgb(var(--btn-bg-color));

}
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="batch-btn-group"] > i,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="pager"] > i,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="pager"] > span[data-type="items"] > i,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="global-btn-group"] > i,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="switch-btn-group"] > i,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="grid-list"] > span[data-type="list-record"] > span[data-category="operators"] > a,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="grid-list"] > span[data-type="list-record"] > span[data-category="operators"] > span[data-category="extra"] > a,
select > option,
div[data-type="dialog"] > button {
    background-color: rgba(var(--grid-btn-bg-color), 0.4);
    color: #404040;
}
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="batch-btn-group"] > i[data-checked="checked"],
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="batch-btn-group"] > i:hover,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="global-btn-group"] > i:hover,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="global-btn-group"] > i.current,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="switch-btn-group"] > i:hover,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="switch-btn-group"] > i.current,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="pager"] > i:hover,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="pager"] > select:focus,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="pager"] > span[data-type="items"] > i:hover,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="pager"] > span[data-type="items"] > i.current,
div[data-type="grid"] > span[data-type="data-grid"].text-list > span[data-type="grid-list"] > span[data-type="list-record"] > span[data-category="operators"] > a:hover,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="global-btn-group"] > i:hover,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="switch-btn-group"] > i:hover,
span[data-type="form-item"] > span > input[type="radio"] + label:hover,
span[data-type="form-item"] > span > input[type="checkbox"] + label:hover,
span[data-type="form-item"] > span > input[type="radio"]:checked + label,
span[data-type="form-item"] > span > input[type="checkbox"]:checked + label,
span[data-type="calendar"][data-category="month"] > span > span > span[data-type="confirm-item"] > span[data-type="container"] > span:hover,
span[data-type="calendar"][data-category="month"] > span > span > span[data-type="confirm-item"] > span[data-type="container"] > span.current,
span[data-type="calendar"][data-category="custom"] > span > span > span[data-type="confirm-item"] > span[data-type="container"] > span:hover,
span[data-type="calendar"][data-category="custom"] > span > span > span[data-type="confirm-item"] > span[data-type="container"] > span.current,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="grid-list"] > span[data-type="list-record"] > span[data-category="operators"] > a:hover,
div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="grid-list"] > span[data-type="list-record"] > span[data-category="operators"] > span[data-category="extra"] > a:hover,
select > option:hover,
div[data-type="dialog"] > button:hover {
    background-color: rgb(var(--grid-btn-bg-color));
    color: #FFFFFF;
}

select, input {
    border-bottom: 1px solid rgb(136, 167, 75);
}

html.admin > body > nav,
html.member > body > nav {
    width: 15rem;
    margin: 0 auto;
    position: fixed;
    left: 0;
    transition: all 300ms;
}

property-info.notifyDetails {
    width: max(calc(-23rem + 100%), calc(-3rem + 80%));
    margin: 1rem;
}

property-info.notifyDetails > span[data-type="property"]::after {
    color: #FF0000;
    white-space: pre-wrap;
}

    /* Media Query */
@media screen and (max-width: 576px) {
    body > footer {
        display: none;
    }
    html.index > body > header#topic {
        width: 100vw;
        height: 50vh;
        padding: 10vh 0 40vh 0;
        position: fixed;
        top: 0;
        left: 0;
    }
    html.index > body > main > section#banner {
        width: 100vw;
        height: auto;
        background: transparent;
        position: fixed;
        top: 40vh;
        left: 0;
        bottom: 0;
        z-index: 10;
        align-items: start;
    }
    html.admin > body > main#content,
    html.member > body > main#content {
        width: 100%;
        margin-left: 0;
    }
    html.admin > body > main#content > article,
    html.member > body > main#content > article {
        width: calc(-2rem + 100%);
        padding-bottom: 15rem;
        margin-top: 1rem;
    }
    html.admin > body > main#content > aside,
    html.member > body > main#content > aside {
        width: calc(-2rem + 100%);
        height: 6rem;
        min-height: 6rem;
        margin: 1rem;
        bottom: 4rem;
    }
    html.member > body > nav[data-type="menu"] {
        width: 100%;
        height: 3rem;
        margin: 0;
        padding: 0;
        position: fixed;
        top: auto;
        bottom: 0;
        z-index: 10;
    }
    html > body > nav[data-type="menu"] > span[data-type="items"] {
        width: 100%;
        display: flex;
    }
    html > body > nav[data-type="menu"] > span[data-type="items"] > nav {
        width: auto;
    }
    html.admin > body > nav > span[data-type="items"] > nav[data-type="menu"] > a,
    html.member > body > nav > span[data-type="items"] > nav[data-type="menu"] > a {
        width: auto;
        text-align: center;
        font-size: 1.2rem;
    }
    html.member > body > main#content > section#banner > operator-button {
        width: calc(-2rem + 100%);
        top: auto;
        bottom: 12rem;
        z-index: 10;
    }
    html.member > body > main#content > article > message-list > div[data-type="grid"] > span[data-type="data-grid"] > span[data-type="grid-list"] {
        border: 1px solid transparent;
    }
    span[data-type="form-item"] > calendar-element {
        width: 100%;
    }
    html.index > body > main > section#banner > form-info,
    html.index > body > main > section[id="banner"] > notification-details {
        width: 80vw;
        padding-left: 10vw;
        padding-right: 10vw;
    }
    html.index > body > main > section#banner > tabs-info > span,
    html.index > body > main > section#banner > tabs-info > span[data-type="tabs"] > span,
    html.index > body > main > section[id="banner"] > tabs-info > span[data-type="tabs"] > span[data-type="data-container"] > form-info > form {
        background: transparent;
    }
    div[data-type="dialog"] {
        width: 80vw;
        height: 60vh;
        padding: 20vh 10vw;
    }
    html.member > body > main > article > form-info > form > span[data-type="buttons"] {
        position: fixed;
        bottom: 12rem;
    }
    html.member > body > main > article > form-info > form > span[data-type="items"] > span[data-type="form-item"] > calendar-element > span[data-type="calendar"][data-category="custom"] > span {
        grid-template-columns: repeat(1, 1fr);
    }
    html.member > body > main > article > form-info > form > span[data-type="items"] > span[data-type="form-item"] > calendar-element > span[data-type="calendar"][data-category="custom"] > span[data-type="title"],
    html.member > body > main > article > form-info > form > span[data-type="items"] > span[data-type="form-item"] > calendar-element > span[data-type="calendar"][data-category="custom"] > span[data-type="header"] {
        display: none;
    }
    html.member > body > main > article > form-info > form > span[data-type="items"] > span[data-type="form-item"] > calendar-element > span[data-type="calendar"][data-category="custom"] > span > span::before {
        content: attr(data-month-content) " " attr(data-current) " " attr(data-day-of-week-content);
    }
    body > main > aside.freeze {
        top: unset;
    }
    property-info.notifyDetails {
        width: calc(-2rem + 100%);
        margin: 5rem 1rem 0 1rem;
    }
    property-info.notifyDetails > span[data-type="property"] {
        margin-bottom: 0;
    }
}