@charset "UTF-8";
/* ------------------------------------------------------------
 * EssayLoggerTS Default Cascading Style Sheets
 * -----------------------------------------------------------*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', 'Segoe UI', 'Arial', 'Verdana', 'Yu Gothic', 'YuGothic', '游ゴシック', 'メイリオ', 'Meiryo', 'Noto Sans CJK JP', 'Noto Sans JP', '源ノ角ゴシック', '源ノ角ゴシック JP', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
    font-weight: normal;
}

*:lang(ja),
*:lang(ja) ::placeholder,
input:lang(ja),
textarea:lang(ja) {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', 'Arial', 'Segoe UI', 'Verdana', 'Yu Gothic', 'YuGothic', '游ゴシック', 'メイリオ', 'Meiryo', 'Noto Sans CJK JP', 'Noto Sans JP', '源ノ角ゴシック', '源ノ角ゴシック JP', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
}

*:lang(zh),
*:lang(zh) ::placeholder,
*:lang(zh-CN) ::placeholder,
input:lang(zh),
input:lang(zh-CN),
textarea:lang(zh),
textarea:lang(zh-CN) {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', 'Arial', 'Segoe UI', 'Verdana', 'PingFang SC', 'Microsoft YaHei UI', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif;
}

*:lang(zh-TW),
*:lang(zh-TW) ::placeholder,
input:lang(zh-TW),
textarea:lang(zh-TW) {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', 'Arial', 'Segoe UI', 'Verdana', 'PingFang TC', 'Microsoft JhengHei UI', 'Noto Sans TC', 'Noto Sans CJK TC', system-ui, sans-serif;
}

*:lang(zh-HK),
*:lang(zh-HK) ::placeholder,
input:lang(zh-HK),
textarea:lang(zh-HK) {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', 'Arial', 'Segoe UI', 'Verdana', 'PingFang HK', 'Microsoft JhengHei UI', 'Noto Sans HK', 'Noto Sans CJK HK', system-ui, sans-serif;
}

*:lang(ko),
*:lang(ko) ::placeholder,
input:lang(ko),
textarea:lang(ko) {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', 'Arial', 'Segoe UI', 'Verdana', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', system-ui, sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    background-color: #5673a4;
    color: #202020;
}

textarea {
    display: block;
    margin: 0;
    padding: 1rem;
    line-height: 1.7rem;
    border: solid 1px transparent;
    background-color: #fcfcfc;
    color: #202020;
}

textarea:hover {
    border: solid 1px #afbfdf;
}

textarea:focus {
    border: solid 1px #cfaf8f;
}

input {
    border: solid 1px transparent;
    background-color: #fcfcfc;
}

button,
input:focus {
    border: solid 1px #afbfdf;
}

button,
input[type="button"],
input[type="submit"] {
    padding: 0.25rem 0.5rem;
    border: solid 1px #cfcfcf;
    background-color: #dfdfdf;
    border-radius: 4px;
}

button:disabled,
input[type="button"]:disalbed,
input[type="submit"]:disalbed {
    border: solid 1px #dfdfdf;
    background-color: #efefef;
    color: #afafaf;
}

button:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled) {
    border: solid 1px #afbfdf;
    background-color: #cfdfff;
    cursor: pointer;
}

button:active:not(:disabled),
input[type="button"]:active:not(:disabled),
input[type="submit"]:active:not(:disabled) {
    background-color: #bfbfbf;
}

input[type="text"],
input[type="password"] {
    border-radius: 4px;
}

select {
    padding: 0.25rem;
    border: solid 1px #cfcfcf;
    border-radius: 4px;
}

img {
    border: 0;
    vertical-align: middle;
}

button:disabled img {
    opacity: 0.5;
}

main {
    display: flex;
    flex-direction: column;
    position: relative;
    height: calc(100vh - 2.025rem);
    background-color: #e6e6e6;
}

#text-panel {
    display: flex;
    flex-direction: row;
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100vh;
}

#main-panel {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: calc(100% - 0.5px);
}

#side-panel {
    display: block;
    position: absolute;
    top: 0;
    right: 1px;
    width: calc(30% - 1px);
    height: 100%;
    border-left: solid 1px #cfcfcf;
}

#side-panel::after {
    content: " ";
    position: absolute;
    left: -2px;  /* 2px = Resize Border */
    width: 2px;  /* 2px = Resize Border */
    height: 100%;
    background-color: transparent;
    cursor: w-resize;
}

.top-row {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
}

.bottom-row {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    border-top: solid 1px #cfcfcf;
}

.bottom-row::before {
    content: " ";
    position: absolute;
    top: -2px; /* 2px = Resize Border */
    width: 100%;
    height: 2px; /* 2px = Resize Border */
    background-color: transparent;
    cursor: n-resize;
}

.resizable .text-content {
    margin: 0;
    position: absolute;
    top: 3rem;
    bottom: 0;
    left: 0;
    right: 0;
}

.resizable div.text-content:first-of-type {
    top: 2rem;
}

.resizable textarea {
    resize: none;
    width: 100%;
    height: calc(100% - 0.5px);
}

#side-panel .text-content textarea {
    border-left-width: 0;
}

#side-panel .text-content textarea:focus,
#side-panel .text-content textarea:hover {
    padding-left: calc(1rem - 1px);
    border-left-width: 1px;
}

main > ul:first-of-type {
    margin: 0;
    background-color: #2d579a; /* 5673a4 */
    white-space: nowrap;
}

ul li img {
    vertical-align: -0.1rem;
}

li#save-menu,
li#text-length-item {
    display: inline-block;
    margin: 0;
    margin-left: 0.5rem;
    padding: 0.5rem 0;
    border: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'MS UI Gothic', sans-serif;
    font-weight: normal;
    white-space: nowrap;
    user-select: none;
}

li#save-menu:lang(zh),
li#save-menu:lang(zh) input,
li#save-menu:lang(zh) button,
li#save-menu:lang(zh) ::placeholder,
li#text-length-item:lang(zh),
li#save-menu:lang(zh-CN),
li#save-menu:lang(zh-CN) input,
li#save-menu:lang(zh-CN) button,
li#save-menu:lang(zh-CN) ::placeholder,
li#text-length-item:lang(zh-CN) {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei UI', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif;
}

li#save-menu:lang(zh-TW),
li#save-menu:lang(zh-TW) input,
li#save-menu:lang(zh-TW) button,
li#save-menu:lang(zh-TW) ::placeholder,
li#text-length-item:lang(zh-TW) {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei UI', 'Noto Sans TC', 'Noto Sans CJK TC', system-ui, sans-serif;
}

li#save-menu:lang(zh-HK),
li#save-menu:lang(zh-HK) input,
li#save-menu:lang(zh-HK) button,
li#save-menu:lang(zh-HK) ::placeholder,
li#text-length-item:lang(zh-HK) {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang HK', 'Microsoft JhengHei UI', 'Noto Sans HK', 'Noto Sans CJK HK', system-ui, sans-serif;
}

li#save-menu:lang(ko),
li#save-menu:lang(ko) input,
li#save-menu:lang(ko) button,
li#save-menu:lang(ko) ::placeholder,
li#text-length-item:lang(ko) {
    font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', system-ui, sans-serif;
}

li#save-menu:lang(ja),
li#save-menu:lang(ja) input,
li#save-menu:lang(ja) button,
li#save-menu:lang(ja) ::placeholder,
li#text-length-item:lang(ja) {
    font-family: -apple-system, BlinkMacSystemFont, 'Yu Gothic UI', 'Meiryo UI', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, 'MS UI Gothic', sans-serif;
}

li#save-menu input,
li#text-length-item input {
    margin-left: 0.5rem;
    padding: 0.15rem 0.4rem;
    border-width: 1px;
    white-space: nowrap;
    user-select: none;
    color: #606060;
    font-weight: bold;
}

li#save-menu button {
    margin-left: 0.5rem;
    color: #606060;
    font-weight: bold;
}

li#text-length-item {
    margin-left: 3rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid #f8f8f8;
    color: #f8f8f8;
    font-weight: bold;
}

@media screen and (max-width: 719px) {
    main > ul:first-of-type,
    li#save-menu {
        white-space: normal;
    }

    li#save-menu + li#text-length-item {
        margin-left: 1rem;
        margin-bottom: 0.5rem;
        white-space: normal;
    }

    li#save-menu input#save-id-item {
        max-width: 7em;
    }

    li#save-menu input#save-name-item {
        max-width: 10em;
    }
}

@media screen and (max-width: 679px) {
    li#save-menu input#save-id-item {
        max-width: 5.5em;
    }

    li#save-menu input#save-name-item {
        max-width: 9em;
    }
}

ul.tab {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 1rem;
    overflow: hidden;
    white-space: nowrap;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none; /* IE 10+ */
    -moz-user-select: -moz-none;
    user-select: none;
}

ul.tab li {
    display: inline-block;
    margin: 0;
    margin-left: 2px;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px 4px 0 0;
    background-color: #fcfcfc;
    color: #7f8b9e;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'MS UI Gothic', sans-serif;
    font-weight: bold;
    white-space: nowrap;
}

ul.tab li:lang(zh),
ul.tab li:lang(zh-CN) {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei UI', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif;
}

ul.tab li:lang(zh-TW) {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei UI', 'Noto Sans TC', 'Noto Sans CJK TC', system-ui, sans-serif;
}

ul.tab li:lang(zh-HK) {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang HK', 'Microsoft JhengHei UI', 'Noto Sans HK', 'Noto Sans CJK HK', system-ui, sans-serif;
}

ul.tab li:lang(ko) {
    font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', system-ui, sans-serif;
}

ul.tab li:lang(ja) {
    font-family: -apple-system, BlinkMacSystemFont, 'Yu Gothic UI', 'Meiryo UI', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, 'MS UI Gothic', sans-serif;
}

ul.tab li:first-of-type {
    margin-left: 0;
}

ul.tab li#save-menu,
ul.tab li#text-length-item,
ul.tab li.title-form {
    background-color: transparent;
}

ul.tab li.title-form {
    padding: 0;
}

ul.tab li.title-form input {
    margin: 0;
    margin-left: 1rem;
    padding: 0.1rem 0.4rem;
    font-size: 107%;
    font-weight: normal;
    white-space: nowrap;
    color: #606060;
}

ul.tab li#save-menu input,
ul.tab li#save-menu button {
    margin-top: -0.25rem;
    margin-left: 0.5rem;
    white-space: nowrap;
    font-size: 100%;
}

ul.tab li#save-menu input[type="button"],
ul.tab li#save-menu button {
    padding: 0.2rem 0.5rem 0.05rem 0.5rem;
    border-radius: 2px;
}

div.title-form {
    position: absolute;
    top: 0;
    left: 0;
    margin: 1.5px 1px;
    padding: 1rem;
    padding-right: 0.5rem;
    width: calc(100% - 1.5rem);
    border-bottom: solid 0px #cfcfcf;
    background-color: transparent;
}

div.title-form input {
    margin: 0 2rem 0 0;
    padding: 0.5rem;
    width: 100%;
    border: solid 1px #cfcfcf;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: bold;
    white-space: nowrap;
    color: #606060;
}

div.title-form input:focus {
    padding: 0.5rem;
    border: solid 1px #afbfdf;
    box-shadow: 0 0 10px 0 #afbfdfc0;
}

div.title-form input::placeholder {
    font-weight: normal;
}

div.text-content,
div.title-form {
    background-color: #fcfcfc;
}

div.text-content div.title-form + textarea {
    margin-top: 0.5px;
    padding-top: 4.5rem;
}

#status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 2rem;
    background-color: #2d579a;
    color: #efefef;
}

#status-bar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 2rem;
    overflow: hidden;
}

#status-bar ul#text-info {
    position: absolute;
    left: 1.25em;
}

#status-bar li {
    display: inline-block;
    margin: 0 1rem;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'MS UI Gothic', sans-serif;
    font-weight: normal;
}

#status-bar li:lang(zh),
#status-bar li:lang(zh-CN) {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei UI', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif;
}

#status-bar li:lang(zh-TW) {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei UI', 'Noto Sans TC', 'Noto Sans CJK TC', system-ui, sans-serif;
}

#status-bar li:lang(zh-HK) {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang HK', 'Microsoft JhengHei UI', 'Noto Sans HK', 'Noto Sans CJK HK', system-ui, sans-serif;
}

#status-bar li:lang(ko) {
    font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans CJK KR', system-ui, sans-serif;
}

#status-bar li:lang(ja) {
    font-family: -apple-system, BlinkMacSystemFont, 'Yu Gothic UI', 'Meiryo UI', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, 'MS UI Gothic', sans-serif;
}

#status-bar li:nth-of-type(-n+2) {
    margin-left: 0;
}

#status-bar li:not(#text-length-item):not(#notification-item) {
    display: none;
}

div.admin,
#login-panel {
    display: none;
}

div.app-menu > :not(#ui-language) {
    display: none;
}

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    * {
        font-weight: 500;
    }
}

/* ------------------------------------------------------------
 * Loading UI Style
 * -----------------------------------------------------------*/
.loading-overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(45, 45, 45, 0.5);
    z-index: 10000;
}

.loading-panel {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    background-color: transparent;
    -webkit-transform: translateY(-60%) translateX(-50%);
    transform: translateY(-60%) translateX(-50%);
}