html, body { height: 100%; background: #f5f5f5; }
body { min-width: 320px; }
[hidden] { display: none !important; }
.navbar { margin-bottom: 15px; border-radius: 0; }
.navbar-brand { cursor: default; }
.auth-actions { float: right; margin: 14px 8px 0 0; }
.auth-actions .btn + .btn { margin-left: 3px; }
.status-line { margin-right: 15px; }
.status-line.connected { color: #8fd18f; }
.status-line.loading { color: #f0d98c; }
.status-line .glyphicon { margin-right: 4px; }
.status-line.loading .glyphicon { animation: status-spin .8s linear infinite; }

@keyframes status-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .status-line.loading .glyphicon { animation-duration: 1.8s; }
}

.app-container { height: calc(100% - 66px); }
.app-row, .sidebar-column, .editor-column { height: 100%; }
.notes-panel, .editor-panel { height: calc(100% - 5px); margin-bottom: 0; overflow: hidden; }
.notes-panel { display: flex; flex-direction: column; }
.panel-title { line-height: 22px; }
.search-panel { padding: 10px; border-bottom: 1px solid #ddd; }
.folder-tree { max-height: 190px; margin-bottom: 0; overflow-y: auto; border-bottom: 1px solid #bbb; }
.folder-tree .folder-item { margin: 0; padding-top: 7px; padding-bottom: 7px; border-width: 0 0 1px; border-radius: 0; text-align: left; }
.folder-tree .folder-item:last-child { border-bottom: 0; }
.folder-tree .folder-item.disabled { color: #999; cursor: not-allowed; background: #f5f5f5; }
.folder-tree .glyphicon { margin-right: 6px; }
.notes-heading { border-top: 0; }
.note-list { flex: 1; margin-bottom: 0; overflow-y: auto; }
.note-list .list-group-item { margin: 0; border-width: 0 0 1px; border-radius: 0; cursor: pointer; }
.note-list .list-group-item.active { color: #fff; background-color: #337ab7; border-color: #2e6da4; }
.note-title, .note-excerpt { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.note-excerpt { margin-top: 5px; color: #777; font-size: 12px; font-weight: normal; }
.list-group-item.active .note-excerpt { color: #d9edf7; }
.empty-list { padding: 30px 15px; color: #777; text-align: center; }

.welcome { margin-bottom: 0; padding: 15px; border: 1px solid #ddd; background: #fff; }
.welcome .btn { margin-left: 5px; }
.editor-panel { display: flex; flex-direction: column; }
.editor-panel > .panel-heading { min-height: 52px; line-height: 30px; }
.editor-panel > .panel-body { flex: 1; min-height: 0; }
.editor-body { display: flex; flex-direction: column; }
.editor-tabs { flex: 0 0 auto; }
.tab-button { padding: 10px 15px; border: 0; color: #337ab7; background: transparent; }
.nav-tabs > li.active > .tab-button { margin-bottom: -1px; color: #555; background: #fff; border: 1px solid #ddd; border-bottom-color: transparent; border-radius: 4px 4px 0 0; }
.tab-pane-wrap { flex: 1; min-height: 0; padding-top: 15px; }
#edit-pane { display: flex; flex-direction: column; }
.code-editor { display: flex; flex: 1; min-height: 260px; overflow: hidden; }
#line-numbers, #content { margin: 0; font: 14px/1.6 Menlo, Monaco, Consolas, monospace; }
#line-numbers { flex: 0 0 auto; min-width: 3.5em; padding: 6px 8px; overflow: hidden; border: 1px solid #ccc; border-right: 0; border-radius: 4px 0 0 4px; color: #999; background: #f5f5f5; text-align: right; user-select: none; }
#content { flex: 1; min-width: 0; min-height: 260px; resize: none; border-radius: 0 4px 4px 0; white-space: pre; overflow: auto; }
.markdown-body { overflow-y: auto; line-height: 1.65; word-wrap: break-word; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin-top: 20px; padding-bottom: 8px; border-bottom: 1px solid #eee; }
.markdown-body pre { overflow: auto; }
.markdown-body img { max-width: 100%; height: auto; }
.markdown-body table { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.markdown-body th, .markdown-body td { padding: 8px; border: 1px solid #ddd; }
.markdown-empty { color: #999; }

.login-dialog { width: min(430px, calc(100% - 30px)); padding: 0; border: 0; background: transparent; }
.login-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.login-dialog .panel { margin: 0; }
.toast { position: fixed; z-index: 1100; right: 20px; bottom: 10px; display: none; min-width: 220px; box-shadow: 0 3px 12px rgba(0,0,0,.2); }
.toast.show { display: block; }

@media (max-width: 767px) {
  .navbar { margin-bottom: 8px; }
  .navbar-header { float: left; }
  .navbar-right { float: right; }
  .navbar-text { margin-left: 10px; margin-right: 10px; }
  .app-container { height: auto; }
  .app-row, .sidebar-column, .editor-column { height: auto; }
  .notes-panel { height: 260px; margin-bottom: 10px; }
  .editor-panel { height: 620px; }
}