#app {
    background-color: #f5faf9;
    color: #242e2c;
    font-size: 14px;
    height: 100%;
    overflow: hidden;
}

#app {
    display: table;
    width: 100%;
    height: 100%;
    table-layout: fixed;
}
#toolbar {
    background: #f5faf9;
    border-bottom: 1px solid #cfdedb;
    padding: 6px 12px;
    display: table-row;
    height: 38px;
}
#toolbar-inner {
    display: table-cell;
    vertical-align: middle;
}
#panels {
    display: table-row;
}

#panel-left, #panel-right {
    display: table-cell;
    vertical-align: top;
    overflow: hidden;
}
#panel-left  { border-right: 1px solid #cfdedb; }

#divider {
    width: 5px;
    background: #e9f1f0;
    cursor: col-resize;
    vertical-align: middle;
    border-left: 1px solid #cfdedb;
    border-right: 1px solid #cfdedb;
}

#divider-grip {
    margin: auto;
    width: 3px;
    height: 40px;
    background: #879290;
    border-radius: 2px;
    zoom: 1;
}

.panel-header {
    background: #f5faf9;
    color: #57606a;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 12px;
    border-bottom: 1px solid #cfdedb;
}

#editArea {
    width: 100%;
    height: 100%;
    background: #ffffff;
    color: #242e2c;
    font-family: "Consolas", "Monaco", "Menlo", "Courier New", "Noto Sans Mono", "BIZ UDPGothic", monospace;
    font-size: 13px;
    line-height: 1.6;
    border: none;
    padding: 14px;
    resize: none;
    outline: none;
    box-sizing: border-box;
}

#editArea:focus { background: #ffffff; }

#viewArea {
    height: 100%;
    overflow-y: auto;
    background: #ffffff;
}
#viewBody {
    padding: 20px 28px;
    color: #242e2c;
    line-height: 1.7;
    max-width: 860px;
    font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'Hiragino Sans', 'Noto Sans CJK JP', 'Noto Sans JP', 'Noto Sans Japanese', 'Source Han Sans', 'BIZ UDPGothic', 'Segoe UI', 'Yu Gothic UI', 'Meiryo UI', sans-serif;
}

#viewBody h1 {
    font-size: 28px;
    font-weight: 600;
    color: #242e2c;
    border-bottom: 2px solid #cfdedb;
    padding-bottom: 10px;
    margin: 0 0 16px 0;
}
#viewBody h2 {
    font-size: 21px;
    font-weight: 600;
    color: #242e2c;
    border-bottom: 1px solid #cfdedb;
    padding-bottom: 6px;
    margin: 24px 0 12px 0;
}
#viewBody h3 { font-size: 18px; font-weight: 600; color: #242e2c; margin: 20px 0 8px 0; }
#viewBody h4 { font-size: 14px;    font-weight: 600; color: #242e2c; margin: 16px 0 6px 0; }
#viewBody h5 { font-size: 12px; font-weight: 600; color: #242e2c; margin: 16px 0 6px 0; }
#viewBody h6 { font-size: 10px;  font-weight: 600; color: #242e2c; margin: 16px 0 6px 0; }
#viewBody p  { margin: 0 0 12px 0; color: #242e2c;}
#viewBody blockquote p  { color: #57606a;}
#viewBody ul, #viewBody ol { margin: 0 0 12px 24px; padding: 0; }
#viewBody li { margin-bottom: 4px; }
#viewBody blockquote {
    margin: 12px 0;
    padding: 10px 16px;
    border-left: 4px solid #05ccae;
    background: #f5faf9;
    color: #57606a;
    font-style: italic;
    border-radius: 0 4px 4px 0;
}
#viewBody pre {
    background: #242e2c;
    border-radius: 6px;
    padding: 14px;
    font-family: "Consolas", "Monaco", "Menlo", "Courier New", "Noto Sans Mono", "BIZ UDPGothic", monospace;
    font-size: 13px;
    overflow-x: auto;
    margin: 0 0 14px 0;
}
#viewBody code {
    background: #f0f4f3;
    font-family: "Consolas", "Monaco", "Menlo", "Courier New", "Noto Sans Mono", "BIZ UDPGothic", monospace;
    font-size: 13px;
    padding: 2px 6px;
    color: #242e2c;
    border-radius: 4px;
}
#viewBody pre code {
    background: #242e2c;
    padding: 0;
    color: #f5faf9;
    border-radius: 0;
}
#viewBody table { border-collapse: collapse; margin: 0 0 16px 0; width: 100%; }
#viewBody th {
    background: #f5faf9;
    border: 1px solid #cfdedb;
    padding: 7px 12px;
    font-weight: 600;
    color: #242e2c;
    text-align: left;
}
#viewBody td {
    border: 1px solid #cfdedb;
    padding: 7px 12px;
}
#viewBody hr {
    border: none;
    border-top: 1px solid #cfdedb;
    margin: 24px 0;
}
#viewBody del { color: #576b68; }
#viewBody a { color: #485fc7; text-decoration: none; }
#viewBody a:hover { text-decoration: underline; }

.tb-label {
    color: #576b68;
    font-size: 14px;
    margin-right: 6px;
}
.tb-file-btn {
    background: #f5faf9;
    color: #232e2d;
    border: 1px solid #d1dedc;
    padding: 7px 10px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
}
.tb-file-btn:hover { background: #e2e9e8; }
#fileInput { display: none; }

.md-toolbar {
    background: #f5faf9;
    border-bottom: 1px solid #cfdedb;
    padding: 4px 8px;
}
.md-tb-btn {
    background: #f5faf9;
    color: #232e2d;
    border: 1px solid #d1dedc;
    padding: 3px;
    margin-right: 4px;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
    border-radius: 3px;
    width: 24px;
    height: 24px;
}
.md-tb-btn:hover { background: #e2e9e8; }

#viewArea::-webkit-scrollbar { width: 6px; }
#viewArea::-webkit-scrollbar-track { background: #ffffff; }
#viewArea::-webkit-scrollbar-thumb { background: #c1cdcb; border-radius: 3px; }