@charset "utf-8";

[v-cloak] {
    display: none;
}

html,
body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    cursor: default;
    user-select: none;
}

a {
    color: #555555;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    text-decoration: none;
    transition: all 0.25s ease-out;
}

a:hover {
    color: #198d44;
}

img {
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

#wiki {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.warning {
    color: #b36c6d !important;
}

.gray {
    color: #777777 !important;
}

.bold {
    font-weight: bold !important;
}

.normal {
    font-weight: normal !important;
}

.qrcode {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    color: #198d44;
}

.qrcode img {
    width: 12rem;
    margin-bottom: 1rem;
}

.default {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
}

.default_text {
    margin: 2rem;
}

.default_text p {
    margin-bottom: 1rem;
}

.default_text_left {
    width: 5.5rem;
}

.default_icon_flex {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.default_icon_mini {
    margin-right: 0.5rem;
    width: 24px;
    height: auto;
}

.title {
    position: fixed;
    z-index: 997;
    top: 0;
    width: 100%;
    height: 2.5rem;
    flex-shrink: 0;
    color: #333333;
    background-color: #ffffff;
    border-bottom: solid 1px #dddddd;
    font-size: 0.8rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.back {
    position: absolute;
    left: 0rem;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.back svg {
    width: 2rem;
    color: #acacac;
}

.tabbar {
    position: fixed;
    z-index: 998;
    background-color: #ffffff;
    border-top: solid 1px #dddddd;
    bottom: 0;
    width: 100%;
    height: 3.8rem;
    flex-shrink: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.router-link {
    width: 25vw;
    height: 100%;
    font-size: 0.7rem;
    color: #acacac;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.router-link svg {
    width: 1.6rem;
    height: auto;
}

.router-link-active {
    color: #07c160;
}

.main {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    min-height: 0;
    padding-top: 3rem;
    padding-bottom: 4.5rem;
    flex-grow: 1;
    overflow-y: auto;
}

.setting {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.setting_sub {
    margin-top: 1rem;
    padding-left: 1rem;
    font-size: 0.8rem;
    color: #acacac;
}

.setting_name {
    background-color: #eeeeee;
    padding: 0.3rem 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
}

.setting_name input {
    width: 30vw;
    margin-right: 1rem;
    text-align: center;
    outline: none;
    border: none;
    color: #555555;
    font-size: 0.9rem;
    height: 1.5rem;
    padding: 5px 0 5px 0;
    border-radius: 5px;
    background-color: #dddddd;
}

.setting_days {
    background-color: #eeeeee;
    padding: 0.3rem 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}

.setting_block {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.setting_block_sub {
    width: 4rem;
    margin: 0;
    padding-left: 1rem;
    text-align: left;
}

.setting_season {
    height: 3rem;
    flex-grow: 1;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: center;
    margin-right: 1rem;
}

.season_month {
    border-radius: 5px;
    text-align: center;
    margin: 0 0.3rem;
    padding: 0 0.5rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 5px;
    border: solid 1px transparent;
    transition: all 0.25s ease-out;
}

.season_0 {
    color: #ffffff;
    background-color: #00ad94;
}

.none_0 {
    color: #00ad94;
    background-color: #aad7d2aa;
}

.none_0:hover {
    background-color: #9ad1cb;
}

.season_1 {
    color: #ffffff;
    background-color: #45933a;
}

.none_1 {
    color: #45933a;
    background-color: #88c283aa;
}

.none_1:hover {
    background-color: #88c283;
}

.season_2 {
    color: #ffffff;
    background-color: #e28100;
}

.none_2 {
    color: #e28100;
    background-color: #efbb66aa;
}

.none_2:hover {
    background-color: #efbb66;
}

.season_3 {
    color: #ffffff;
    background-color: #308ece;
}

.none_3 {
    color: #308ece;
    background-color: #a7cae6aa;
}

.none_3:hover {
    background-color: #a7cae6;
}

.setting_arrow {
    margin: 0 20px 0 20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background-color: #999999;
    border-radius: 5px;
    transition: all 0.25s ease-out;
}

.setting_arrow:hover {
    background-color: #198d4480;
}

.setting_arrow:active {
    background-color: #198d44;
}

.setting_text {
    flex-grow: 0;
    display: flex;
    display: -webkit-flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
}

.setting_text input {
    width: 3rem;
    text-align: center;
    outline: none;
    border: none;
    color: #555;
    font-size: 1rem;
    background-color: transparent;
}

.flex_grow {
    flex-grow: 1;
}

.button {
    margin: 0.8rem 1rem 0.8rem 0;
    width: 5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    padding: 5px 10px;
    text-align: center;
    border-radius: 5px;
    transition: all 0.25s ease-out;
}

.btn_select {
    color: #ffffff;
    background-color: #198d44cc;
}

.btn_select:hover {
    background-color: #198d4499;
}

.btn_select:active {
    background-color: #198d44;
}

.btn_select_none {
    color: #3a4750;
    background-color: #e9ecef;
}

.btn_select_none:hover {
    color: #3a4750;
    background-color: #becddd;
}

.btn_select_none:active {
    color: #ffffff;
    background-color: #198d4499;
}

.list {
    width: 100%;
}

.list-title {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    padding: 0 0 0.2rem 1rem;
    color: #acacac;
    border-bottom: solid 1px #eeeeee;
}

.list-item {
    height: 3rem;
    line-height: 3rem;
    padding-left: 1rem;
    border-bottom: solid 1px #f3f3f3;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.list-item-title {
    flex-grow: 1;
}

.list-item-sub {
    font-size: 0.9rem;
    color: #acacac;
}

.list-item-svg {
    width: 2rem;
    color: #acacac;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.copyright {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-end;
    align-items: center;
    color: #bebebe;
    text-align: center;
    font-size: 0.7rem;
}

.cover {
    height: 10rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 0.5rem;
    border-radius: 0.5rem;
}

.cover img {
    max-width: none;
    max-height: 100%;
}

.menu {
    padding: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 3.5rem);
    place-content: start center;
    gap: 3px;
}

.menu_sub {
    border-bottom: solid 1px #eeeeee;
    margin: 0.5rem 1rem 0 1rem;
    padding: 0 0 0.2rem 0;
    font-size: 0.8rem;
    color: #acacac;
}

.item {
    color: #666666;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.item-icon {
    width: 2rem;
    height: 2rem;
    background-color: #eeeeee;
    border-radius: 10px;
    padding: 0.5rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.item-icon img {
    width: 2rem;
    height: 2rem;
}

.item-text {
    font-size: 0.8rem;
}

.menu-resident {
    padding: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, 3.8rem);
    place-content: start center;
    gap: 10px;
}

.resident {
    color: #666666;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.resident-icon {
    width: 3.8rem;
    height: 3.8rem;
    background-color: #eeeeee;
    border-radius: 10px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.resident-text {
    font-size: 0.8rem;
}

.search {
    height: 3rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.search_input {
    font-size: 0.9rem;
    flex-grow: 1;
    border-radius: 10px 0 0 10px;
    height: 2rem;
    text-align: center;
    outline: none;
    border: none;
    color: #3a4750;
    font-size: 1rem;
    background-color: #e9ecef;
}

.search_button {
    width: 12vw;
    max-width: 5rem;
    border-radius: 0 10px 10px 0;
    color: #a9bcc9;
    background-color: #e9ecef;
    border: none;
    height: 2rem;
    margin: 0;
    transition: all 0.25s ease-out;
}

.search_button:hover {
    color: #ffffff;
    background-color: #a9bcc9;
}

.filter_sub {
    margin-top: 1rem;
    padding-left: 0.5rem;
    color: #acacac;
}

.filter_item {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.filter_btn {
    margin: 0.2rem;
    height: 1.5rem;
    line-height: 1.5rem;
    padding: 0.3rem 0.8rem;
    text-align: center;
    border-radius: 5px;
    transition: all 0.25s ease-out;
}