.body {
    width: 100%; height: 100%; position: relative; overflow: hidden;
}




.top-frame {
    width: 100%; height: 50px; position: absolute; top: 0; left: 0; overflow: hidden; display: flex; flex-direction: row; background: orange;
}

.top-switch {
    width: 50px; height: 50px; background-color: transparent; background-image: url('../image/menu.png'); background-size: 40px 40px; background-repeat: no-repeat; background-position: center;
}

.top-title {
    width: auto; height: 50px; line-height: 50px; font-size: 1.125rem; color: white; background-color: transparent; flex-grow: 1;
}

.top-me {
    width: auto; height: 50px; padding: 0 8px; font-size: 1.125rem; color: white; background-color: transparent;
}




.default-info-title {
    width: 100%; height: 30px; display: block; line-height: 30px; margin-top: 20px; font-size: 1.125rem; color: #aaaaaa; padding: 0 8px;
}

.default-info-value {
    width: 100%; height: 30px; display: block; line-height: 30px; font-size: 1.125rem; color: #59a2da; border-bottom: #59a2da 1px solid; border-left: 8px solid transparent; border-right: 8px solid transparent;
}




.default-edit-title {
    width: 100%; height: 30px; display: block; line-height: 30px; margin-top: 20px; font-size: 1rem; color: #aaaaaa; padding: 0 8px;
}

.default-edit-value {
    width: 100%; height: 30px; font-size: 1.25rem; display: block; border-left: 8px solid transparent; border-right: 8px solid transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.default-edit-value[type=range] {
    width: 100%; height: 6px; display: block; margin: 8px 0 12px 0;
    -webkit-appearance: none; appearance: none; -moz-appearance: none; background: orange; border-left: white 8px solid; border-right: white 8px solid;
}

textarea.default-edit-value {
    width: 100%; height: 150px; font-size: 1rem; display: block; border-left: 8px solid transparent; border-right: 8px solid transparent;
}




.menu-frame {
    transition: right 400ms ease 0ms, visibility 400ms ease 0ms;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    visibility: hidden;
}

.menu-frame-show {
    transition: right 400ms ease 0ms, visibility 400ms ease 0ms;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    right: -100%;
    background-color: rgba(0, 0, 0, 0.6);
    visibility: visible;
}

.menu-contain {
    width: 30%; height: 100%; position: absolute; top: 0; left: 0;
}

.menu-switch {
    width: 100%; height: 50px; position: absolute; top: 0; left: 0; background-color: orange; display: flex; flex-direction: row;
}

.menu-switch-title {
    width: auto; height: 50px; flex-grow: 1; line-height: 50px; padding-left: 8px; font-size: 1.125rem; color: white;
}

.menu-switch-button {
    width: 50px; height: 50px; background-color: transparent; background-image: url('../image/back.png'); background-size: 40px 40px; background-repeat: no-repeat; background-position: center;
}

.menu-list {
    width: 100%; height: auto; position: absolute; top: 50px; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; background-color: white;
}

.menu-item-active {
    width: 100%; height: 50px; line-height: 50px; background-color: transparent; text-align: left; padding: 0 8px; font-size: 1.125rem; color: #59a2da; display: block;
}

.menu-item-inactive {
    width: 100%; height: 50px; line-height: 50px; background-color: #eeeeee; text-align: left; padding: 0 8px; font-size: 1.125rem; color: #59a2da; display: block
}




.operation-frame {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); display: none;
}

.operation-contain {
    width: auto; height: auto; position: absolute; top: 10%; right: 10%; bottom: 10%; left: 10%; border-radius: 10px; background-color: white;
}

.operation-top {
    width: 100%; height: 50px; position: absolute; top: 0; left: 0; border-radius: 10px 10px 0 0; background-color: orange; display: flex; flex-direction: row;
}

.operation-title {
    width: auto; height: 50px; flex-grow: 1; line-height: 50px; padding-left: 8px; font-size: 1.125rem; color: white;
}

.operation-close {
    width: 50px; height: 50px; background-color: transparent; background-image: url('../image/close.png'); background-size: 40px 40px; background-repeat: no-repeat; background-position: center;
}

.operation-list {
    width: 100%; height: auto; position: absolute; top: 50px; right: 0; bottom: 0; left: 0;  border-radius: 0 0 10px 10px; overflow-x: hidden; overflow-y: auto; background-color: white; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; align-content: flex-start;
}

.operation-item {
    width: 80px; height: 80px; background-color: transparent; border: #59a2da 2px solid; border-radius: 40px; color: #59a2da; font-size: 1rem; margin: 8px;
}




.time-selection-frame {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); display: none; flex-direction: row; justify-content: center; align-items: center; align-content: center;
}

.time-selection-contain {
    width: 80%; height: auto; border-radius: 10px; background-color: white;
}

.time-selection-top {
    width: 100%; height: 50px; border-radius: 10px 10px 0 0; background-color: orange; display: flex; flex-direction: row;
}

.time-selection-title {
    width: auto; height: 50px; flex-grow: 1; line-height: 50px; padding-left: 8px; font-size: 1.125rem; color: white;
}

.time-selection-close {
    width: 50px; height: 50px; background-color: transparent; background-image: url('../image/close.png'); background-size: 40px 40px; background-repeat: no-repeat; background-position: center;
}

.time-selection-main {
    width: 100%; height: auto; overflow: hidden; padding-bottom: 30px; background-color: white;
}

.time-selection-main-title {
    width: 100%; height: 30px; display: block; line-height: 30px; margin-top: 20px; font-size: 1rem; color: #aaaaaa; padding: 0 8px;
}

.time-selection-main-value {
    width: 100%; height: 30px; font-size: 1.25rem; display: block; border-left: 8px solid transparent; border-right: 8px solid transparent;
}

.time-selection-confirm-contain {
    width: 100%; height: 50px; border-radius: 0 0 10px 10px; background-color: #59a2da;
}

.time-selection-confirm-button {
    width: 100%; height: 100%; border-radius: 0 0 10px 10px; font-size: 1.125rem; background-color: transparent;
}




.selection-frame {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); display: none;
}

.selection-contain {
    width: auto; height: auto; position: absolute; top: 10%; right: 10%; bottom: 10%; left: 10%; border-radius: 10px; background-color: white;
}

.selection-top {
    width: 100%; height: 50px; position: absolute; top: 0; left: 0; border-radius: 10px 10px 0 0; background-color: orange; display: flex; flex-direction: row;
}

.selection-title {
    width: auto; height: 50px; flex-grow: 1; line-height: 50px; padding-left: 8px; font-size: 1.125rem; color: white;
}

.selection-close {
    width: 50px; height: 50px; background-color: transparent; background-image: url('../image/close.png'); background-size: 40px 40px; background-repeat: no-repeat; background-position: center;
}

.selection-list {
    width: 100%; height: auto; position: absolute; top: 50px; right: 0; bottom: 0; left: 0;  border-radius: 0 0 10px 10px; overflow-x: hidden; overflow-y: auto; background-color: white; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; align-content: flex-start;
}

.selection-item-active {
    width: 100%; height: 50px; background-color: transparent; color: #59a2da; font-size: 1rem; padding: 0 8px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.selection-item-inactive {
    width: 100%; height: 50px; background-color: #eeeeee; color: #59a2da; font-size: 1rem; padding: 0 8px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}




.message-frame {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); display: none; flex-direction: row; justify-content: center; align-items: center; align-content: center;
}

.message-contain {
    width: 80%; height: auto; border-radius: 10px; background-color: white;
}

.message-top {
    width: 100%; height: 50px; border-radius: 10px 10px 0 0; background-color: orange; display: flex; flex-direction: row;
}

.message-title {
    width: auto; height: 50px; flex-grow: 1; line-height: 50px; padding-left: 8px; font-size: 1.125rem; color: white;
}

.message-close {
    width: 50px; height: 50px; background-color: transparent; background-image: url('../image/close.png'); background-size: 40px 40px; background-repeat: no-repeat; background-position: center;
}

.message-text {
    width: 100%; height: auto; min-height: 100px; border-radius: 0 0 10px 10px; padding: 8px; background-color: transparent; word-wrap: break-word; word-break: normal;
}




.confirm-frame {
    width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); display: none; flex-direction: row; justify-content: center; align-items: center; align-content: center;
}

.confirm-contain {
    width: 80%; height: auto; border-radius: 10px; background-color: white;
}

.confirm-top {
    width: 100%; height: 50px; border-radius: 10px 10px 0 0; background-color: orange;
}

.confirm-title {
    width: auto; height: 50px; flex-grow: 1; line-height: 50px; padding-left: 8px; font-size: 1.125rem; color: white;
}

.confirm-text {
    width: 100%; height: auto; min-height: 100px; padding: 8px; background-color: transparent; word-wrap: break-word; word-break: normal;
}

.confirm-buttons {
    width: 100%; height: 50px; border-radius: 0 0 10px 10px; background-color: #59a2da; display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center;
}

.confirm-cancel {
    width: auto; height: 100%; flex-grow: 1; border-radius: 0 0 10px 10px; font-size: 1.125rem; background-color: transparent;
}

.confirm-division {
    width: 1px; height: 100%; border: none; background-color: white;
}

.confirm-sure {
    width: auto; height: 100%; flex-grow: 1; border-radius: 0 0 10px 10px; font-size: 1.125rem; background-color: transparent;
}




.loading-frame {
    transition: opacity 0ms ease-out 0ms, visibility 0ms ease 0ms;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    visibility: hidden;
    opacity: 0;
}

.loading-show {
    transition: opacity 800ms ease-out 400ms, visibility 0ms ease 0ms;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    visibility: visible;
    opacity: 1;
}




.toast-frame {
    transition: bottom 800ms ease 200ms, opacity 1s ease 0ms;
    width: 100%;
    height: 120px;
    position: absolute;
    bottom: -120px;
    left: 0;
    background-color: transparent;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    opacity: 0;
}

.toast-show {
    transition: bottom 600ms ease 0ms, opacity 600ms ease 0ms;
    width: 100%;
    height: 120px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: transparent;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    opacity: 1;
}

.toast-text {
    width: auto; height: auto; min-width: 100px; max-width: 80%; max-height: 100px; overflow: hidden; padding: 8px; background-color: rgba(0, 0, 0, 0.6); border-radius: 10px; color: #eeeeee; word-wrap: break-word; word-break: normal; text-align: center;
}



.stage {
    width: auto;
    height: auto;
    position: absolute;
    top: 50px;
    right: 0;
    bottom: 0;
    left: 0;
    background: white;
    overflow: auto;
    visibility: hidden;
    opacity: 0;
}

.stage-show {
    transition: opacity 500ms ease-out 0ms, visibility 0ms ease 0ms;
    width: auto;
    height: auto;
    position: absolute;
    top: 50px;
    right: 0;
    bottom: 0;
    left: 0;
    background: white;
    overflow: auto;
    visibility: visible;
    opacity: 1;
}