body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue";
    font-size: 11pt;
    font-weight: 400;
    color: #4d4d4d;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

#root,
body,
html {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
}

.menu {
    display: flex;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 5px;
    background: #4d4d4d url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wIFwoOBbfoDsQAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAKElEQVQI12P09fX9zwAFkpKSDEzInOfPn0MEYBwGBgYGJmQOAwMDAwBoBws5/u8fSwAAAABJRU5ErkJggg==);
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, .4);
    color: #fff
}

.menu .name {
    height: 100%;
    margin-top: 0
}

.menu .beta-wrapper {
    margin-left: 5px
}

.menu .beta-wrapper .beta {
    text-transform: uppercase;
    background: #f4e285;
    color: #4d4d4d;
    border-radius: 3px;
    padding: 2px 5px;
    font-size: 8pt;
    font-weight: 700;
    cursor: pointer
}

.menu .buttons {
    flex: 1 1;
    text-align: right;
    height: 100%
}

.menu .buttons .info {
    height: 100%;
    color: #fff;
    background: none;
    border: none;
    padding: 5px 10px;
    margin-right: -10px;
    font-size: 11pt;
    cursor: pointer
}

.menu .buttons .info:focus,
.menu .buttons .info:hover {
    background: hsla(0, 0%, 100%, .2)
}

.beta-content .react-tooltip-lite {
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, .1)
}

.beta-content .react-tooltip-lite .beta-content-wrapper {
    width: 400px;
    margin-left: 10px
}

.beta-content .react-tooltip-lite .beta-content-wrapper a {
    color: #e55b62
}

.beta-content .react-tooltip-lite .beta-content-wrapper a:focus,
.beta-content .react-tooltip-lite .beta-content-wrapper a:hover {
    color: #ec878c
}

.ads {
    position: relative
}

.modal-background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    overflow: auto;
    background: rgba(0, 0, 0, .3)
}

.modal-foreground {
    position: relative;
    top: 10%;
    left: auto;
    right: auto;
    bottom: auto;
    background: #fff;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 2px;
    outline: none;
    padding: 20px;
    z-index: 1001;
    box-sizing: border-box;
    width: 500px;
    max-width: 95%;
    margin: 0 auto;
    box-shadow: 0 0 1em grey
}

.modal {
    line-height: 1.4em
}

.modal h1 {
    font-size: 140%;
    margin: 0 0 40px
}

.modal a {
    color: #e55b62
}

.modal .modal-text {
    margin: 10px 0
}

.modal input.regular,
.modal textarea.regular {
    padding: 5px;
    border-radius: 2px;
    border: 1px solid #dadada;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px
}

.modal .modal-share .code {
    font-family: monospace
}

.modal input.error {
    color: #e55b62;
    border-color: #e55b62
}

.modal .error-message {
    color: #e55b62;
    margin: 10px 0
}

.modal .modal-action-menu {
    padding: 40px 0 0;
    text-align: right
}

.modal .modal-button {
    color: #4d4d4d;
    border-radius: 3px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue";
    font-size: 11pt;
    margin-left: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 2px;
    font-size: 14px;
    cursor: pointer;
    background: #dadada
}

.modal .modal-button:focus,
.modal .modal-button:hover {
    background: #e2e2e2
}

.modal .modal-button.left {
    margin-left: 0
}

.modal .modal-button:active,
.modal .modal-button:hover {
    background: #e6e6e6
}

.modal .modal-button.primary {
    background-color: #7fa360;
    color: #fff
}

.modal .modal-button.primary:active,
.modal .modal-button.primary:hover {
    background-color: #99b680
}

.modal .modal-button.full-width {
    width: 100%
}

.modal .modal-button.danger {
    background-color: #e55b62;
    color: #fff
}

.modal .modal-button.danger:active,
.modal .modal-button.danger:hover {
    background-color: #ec878c
}

.modal .modal-button.success {
    background-color: #82b483
}

.modal .modal-button.success:active,
.modal .modal-button.success:hover {
    background-color: #a2c7a3
}

.modal-foreground.info {
    width: 570px
}

.modal.modal-info p {
    margin: 0;
    padding: 0
}

.modal.modal-info h1 {
    padding: 0;
    margin: 0 0 .5em
}

.modal.modal-info h2 {
    display: block;
    font-size: 11pt;
    font-weight: 700;
    padding: 0;
    margin-top: 2em;
    margin-bottom: .3em
}

.app {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f5f5
}

.app .body {
    flex: 1 1;
    flex-direction: row;
    overflow: hidden;
    padding: 10px 12px 11px 10px
}

.app .body,
.app .body .contents-panel {
    display: flex;
    height: 100%;
    box-sizing: border-box
}

.app .body .contents-panel {
    flex: 1 1
}

.app .body .contents-panel .left-panel,
.app .body .contents-panel .right-panel {
    flex: 1 1;
    height: 100%;
    background: #fff;
    overflow: hidden;
    outline: 1px solid #f0f0f0
}

.app .body .contents-panel .left-panel {
    margin-right: 10px
}

.app .body .contents-panel .right-panel {
    margin-left: 10px
}

.app .body .contents-panel .center-panel {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column
}

.app .body .contents-panel .center-panel .empty-space-top {
    flex: 1 1
}

.app .body .contents-panel .center-panel .draggable-splitter {
    flex: 4 1;
    cursor: col-resize;
    border-radius: 3px;
    color: #a8a8a8;
    display: inline-flex;
    align-items: flex-end;
    font-size: 24px
}

.app .body .contents-panel .center-panel .draggable-splitter .draggable-splitter-icon {
    width: 100%;
    text-align: center
}

.app .body .contents-panel .center-panel .draggable-splitter:hover {
    background: rgba(0, 0, 0, .02);
    color: #707070
}

.app .body .contents-panel .center-panel .actions {
    display: flex;
    flex-direction: column
}

.app .body .contents-panel .center-panel .actions button {
    background: #dadada;
    border: none;
    color: #4d4d4d;
    border-radius: 3px;
    padding: 6px 8px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue";
    font-size: 11pt;
    margin-bottom: 10px
}

.app .body .contents-panel .center-panel .actions button:focus,
.app .body .contents-panel .center-panel .actions button:hover {
    background: #e2e2e2
}

.app .body {
    margin: 0 0 0 10px
}

.panel {
    width: 100%;
    height: 100%;
    flex-direction: column
}

.panel,
.panel .panel-menu {
    position: relative;
    display: flex
}

.panel .panel-menu {
    background: #D5DDF6;
    color: #606369
}

.panel .panel-menu .document-details {
    position: relative;
    white-space: nowrap
}

.panel .panel-menu .document-details .local-storage-error-icon {
    display: inline-block;
    padding: 10px;
    position: relative;
    color: #fff
}

.panel .panel-menu.wrap {
    flex-wrap: wrap
}

.panel .panel-menu.wrap .document-details {
    white-space: normal
}

.panel .panel-menu .unsaved-changes {
    display: inline-block;
    padding: 10px;
    color: hsla(0, 0%, 100%, .5);
    white-space: nowrap;
    visibility: hidden
}

.panel .panel-menu .unsaved-changes.visible {
    visibility: visible
}

.panel .panel-menu .unsaved-changes.menu-button {
    color: hsla(0, 0%, 100%, .5)
}

.panel .panel-menu .unsaved-changes.menu-button:focus,
.panel .panel-menu .unsaved-changes.menu-button:hover {
    color: #fff;
    text-decoration: underline
}

.panel .panel-menu .unsaved-changes button.save-now {
    background: none;
    border: none;
    padding: 0 2px;
    margin: 0;
    color: hsla(0, 0%, 100%, .5);
    font-size: 11pt
}

.panel .panel-menu .unsaved-changes button.save-now:focus,
.panel .panel-menu .unsaved-changes button.save-now:hover {
    color: #fff;
    text-decoration: underline
}

.panel .panel-menu .menu-button {
    background: #dadada;
    border: none;
    color: #4d4d4d;
    border-radius: 3px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue";
    font-size: 11pt;
    cursor: pointer;
    display: inline-block;
    background: transparent;
    color: #606369;
    border-radius: 0;
    margin: 0;
    padding: 10px
}

.panel .panel-menu .menu-button:focus,
.panel .panel-menu .menu-button:hover {
    background: #e2e2e2;
    background: hsla(0, 0%, 100%, .2)
}

.panel .panel-menu .menu-button:disabled {
    color: hsla(0, 0%, 100%, .5)
}

.panel .panel-menu .menu-button:disabled:focus,
.panel .panel-menu .menu-button:disabled:hover {
    background: none;
    cursor: default
}

.panel .panel-menu .menu-button.name {
    text-align: center
}

.panel .panel-menu .menu-button.name svg.fa-cloud {
    margin-right: .5em
}

.panel .panel-menu .menu-button.name svg.fa-edit {
    margin-left: .5em;
    visibility: hidden;
    font-weight: 400
}

.panel .panel-menu .menu-button.name:focus:not(:disabled),
.panel .panel-menu .menu-button.name:hover:not(:disabled) {
    background: hsla(0, 0%, 100%, .2) !important
}

.panel .panel-menu .menu-button.name:focus:not(:disabled) svg.fa-edit,
.panel .panel-menu .menu-button.name:hover:not(:disabled) svg.fa-edit {
    visibility: visible
}

.panel .panel-menu .menu-button.name.unnamed svg.fa-edit {
    margin-left: 0;
    visibility: visible
}

.panel .panel-menu .menu-button.schema.error {
    color: #e55b62
}

.panel .buttons {
    flex: 1 1;
    display: inline-block;
    white-space: nowrap;
    text-align: right
}

.panel .buttons .dropdown-button {
    position: relative
}

.panel .buttons .dropdown-button .dropdown-menu {
    display: none;
    position: absolute;
    white-space: normal;
    top: 100%;
    right: 0;
    z-index: 100;
    width: 180px;
    background: #7fa360;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2)
}

.panel .buttons .dropdown-button .dropdown-menu.wide {
    width: 230px
}

.panel .buttons .dropdown-button .dropdown-menu button.dropdown-menu-button {
    background: #dadada;
    border: none;
    border-radius: 3px;
    padding: 10px 15px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue";
    font-size: 11pt;
    color: #4d4d4d;
    background: #fff;
    width: 100%;
    text-align: left
}

.panel .buttons .dropdown-button .dropdown-menu button.dropdown-menu-button:focus,
.panel .buttons .dropdown-button .dropdown-menu button.dropdown-menu-button:hover {
    background: #e2e2e2
}

.panel .buttons .dropdown-button .dropdown-menu button.dropdown-menu-button svg {
    margin-right: 10px
}

.panel .buttons .dropdown-button .dropdown-menu button.dropdown-menu-button:focus,
.panel .buttons .dropdown-button .dropdown-menu button.dropdown-menu-button:hover {
    background: #f2f2f2
}

.panel .buttons .dropdown-button:focus .dropdown-menu,
.panel .buttons .dropdown-button:hover .dropdown-menu {
    display: inline-block
}

.panel .panel-contents {
    flex: 1 1;
    position: relative;
    overflow: hidden
}

.panel .panel-contents .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .05);
    z-index: 99;
    text-align: center;
    padding-top: 30%;
    -webkit-transition: all 1s ease;
    transition: all 1s ease
}

.panel .panel-contents .overlay .loading-error {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    color: #e55b62
}

.panel .file-drop,
.panel .file-drop>.file-drop-target {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.panel .file-drop>.file-drop-target {
    box-sizing: border-box;
    z-index: 100;
    background-color: hsla(0, 0%, 100%, .7);
    border: 2px dashed #707070;
    color: #4d4d4d;
    text-align: center;
    padding-top: 40%;
    display: none
}

.panel .file-drop>.file-drop-target.file-drop-dragging-over-frame {
    display: block;
    font-weight: 700
}

.panel .file-drop>.file-drop-target.file-drop-dragging-over-frame .drag-text,
.panel .file-drop>.file-drop-target.file-drop-dragging-over-frame .drop-text {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    content: "TEST"
}

.panel .file-drop>.file-drop-target.file-drop-dragging-over-frame.file-drop-dragging-over-target {
    border-color: #1e90ff;
    box-shadow: 0 0 20px 0 rgba(30, 144, 255, .7);
    color: #1e90ff
}

.panel .jsoneditor .jsoneditor-values {
    border-radius: 3px
}

.panel .jsoneditor .jsoneditor-values.diff-added .jsoneditor-separator,
.panel .jsoneditor .jsoneditor-values.diff-added .jsoneditor-tree:not(:first-child) {
    background: rgba(140, 193, 82, .3)
}

.panel .jsoneditor .jsoneditor-values.diff-changed .jsoneditor-separator,
.panel .jsoneditor .jsoneditor-values.diff-changed .jsoneditor-tree:not(:first-child) {
    background: rgba(255, 165, 0, .3)
}

.panel .jsoneditor .jsoneditor-values.diff-removed .jsoneditor-separator,
.panel .jsoneditor .jsoneditor-values.diff-removed .jsoneditor-tree:not(:first-child) {
    background: rgba(233, 87, 63, .3)
}

.panel .jsoneditor tr.jsoneditor-expandable.jsoneditor-collapsed>td>table.jsoneditor-values.diff-child-changed .jsoneditor-separator,
.panel .jsoneditor tr.jsoneditor-expandable.jsoneditor-collapsed>td>table.jsoneditor-values.diff-child-changed .jsoneditor-tree:not(:first-child) {
    background: rgba(255, 165, 0, .3)
}

.modal-foreground.open-url-prompt,
.modal-foreground.save-url-prompt {
    width: 700px
}

.local-storage-error-wrapper {
    display: inline-block
}

.local-storage-error .react-tooltip-lite {
    max-width: 400px !important
}

.jsoneditor-react-container {
    width: 100%;
    height: 100%
}

div.jsoneditor,
div.jsoneditor-menu {
    border: none
}

div.jsoneditor-menu {
    background-color: #bfbfbf
}

div.jsoneditor-menu button.mode-toggle {
    width: auto;
    background: none;
    padding: 0 5px;
    opacity: 1;
    margin-left: 0;
    margin-right: 0;
    border: 1px solid hsla(0, 0%, 100%, .2);
    border-right: none;
    border-left: none
}

div.jsoneditor-menu button.mode-toggle:first-child {
    border-left: 1px solid hsla(0, 0%, 100%, .2);
    margin-left: 3px
}

div.jsoneditor-menu button.mode-toggle.border-right {
    border-right: 1px solid hsla(0, 0%, 100%, .2)
}

div.jsoneditor-menu button.mode-toggle.selected {
    background: hsla(0, 0%, 100%, .2);
    border: 1px solid hsla(0, 0%, 100%, .3)
}

div.jsoneditor button {
    border-radius: 0
}

div.jsoneditor-navigation-bar {
    border-bottom-color: #ebebeb
}

div.jsoneditor-statusbar {
    border-top-color: #ebebeb
}

.jsoneditor-modal .pico-modal-header {
    background-color: #f4a259
}

.jsoneditor-modal .jsoneditor-jmespath-label {
    color: #4d4d4d
}

.jsoneditor-modal .selectr-selected .selectr-tag,
.selectr-option.active {
    background-color: #4d4d4d;
    color: #fff
}

.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {
    background-color: #4d4d4d;
    border-color: #4d4d4d
}

.notification-list {
    position: absolute;
    width: 0;
    top: -2px;
    left: 50%;
    z-index: 9999;
    overflow: visible
}

.notification-list.size-160 {
    left: calc((100% - 180px)/2)
}

.notification-list.size-300 {
    left: calc((100% - 320px)/2)
}

.notification-list .notification-list-items {
    position: absolute;
    overflow: visible;
    margin-left: -250px;
    width: 500px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.notification-list .notification-list-items .notification {
    display: inline-block;
    position: relative;
    margin: 5px 0;
    padding: 6px 10px;
    min-width: 250px;
    background-color: #f4e285;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    text-align: center;
    line-height: 1.3em
}

.notification-list .notification-list-items .notification.closable {
    padding-right: 20px
}

.notification-list .notification-list-items .notification .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    padding-top: 4px
}

.notification-list .notification-list-items .notification.error {
    background-color: #e55b62;
    color: #fff
}

.notification-list .notification-list-items .notification.error .parse-error {
    text-align: left
}

.notification-list .notification-list-items .notification.error .parse-error pre {
    background: hsla(0, 0%, 100%, .05);
    padding: 5px;
    border-radius: 3px;
    margin: 10px 0 5px
}

.notification-list .notification-list-items .notification.error .close:hover {
    color: #fff
}

.notification-list .notification-list-items .notification button.action {
    border: none;
    background: transparent;
    color: #e55b62;
    text-decoration: underline;
    font-size: 11pt;
    cursor: pointer;
    display: inline;
    padding: 0;
    margin: 0
}

.notification-list .notification-list-items .notification button.action:focus,
.notification-list .notification-list-items .notification button.action:hover {
    color: #e2454d
}

@media (max-width:600px) {
    .notification-list {
        width: 100%;
        left: 0
    }
    .notification-list.size-160,
    .notification-list.size-300 {
        left: 0
    }
    .notification-list .notification-list-items {
        margin-left: 0;
        left: 20px;
        right: 20px;
        width: auto
    }
}

.modal.modal-open h1 {
    font-size: 14pt;
    font-weight: 700
}

.modal.modal-open .search-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center
}

.modal.modal-open .search-box .label {
    margin-right: 10px
}

.modal.modal-open .search-box .search-text {
    flex: 1 1;
    font-size: 11pt
}

.modal.modal-open .info {
    color: #a8a8a8;
    font-size: 8pt;
    text-align: right
}

.modal.modal-open .recent-files {
    max-height: 250px;
    overflow: auto;
    border: 1px solid #dadada;
    border-radius: 3px
}

.modal.modal-open .recent-files .recent-file {
    display: flex;
    flex-direction: row
}

.modal.modal-open .recent-files .recent-file button.open {
    background: #dadada;
    border: none;
    color: #4d4d4d;
    border-radius: 3px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue";
    font-size: 11pt;
    flex: 1 1;
    margin: 0;
    padding: 10px;
    text-align: left;
    background: transparent
}

.modal.modal-open .recent-files .recent-file button.open:focus,
.modal.modal-open .recent-files .recent-file button.open:hover {
    background: #e2e2e2
}

.modal.modal-open .recent-files .recent-file button.open .updated {
    color: #a8a8a8;
    font-size: 8pt;
    margin-top: 5px
}

.modal.modal-open .recent-files .recent-file button.remove {
    background: #dadada;
    border: none;
    color: #4d4d4d;
    border-radius: 3px;
    padding: 10px 15px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue";
    font-size: 11pt;
    margin: 0;
    color: #a8a8a8;
    background: transparent
}

.modal.modal-open .recent-files .recent-file button.remove:focus,
.modal.modal-open .recent-files .recent-file button.remove:hover {
    background: #e2e2e2;
    color: #fff;
    background: #e55b62
}

.modal.modal-open .recent-files .recent-file:hover {
    background: #dadada
}

.modal.modal-open .recent-files .recent-file:hover .open .updated {
    color: #707070
}

.modal.modal-open .recent-files .recent-file.deleting {
    background: #f5f5f5
}

.modal.modal-open .recent-files .recent-file.deleting .open,
.modal.modal-open .recent-files .recent-file.deleting .remove {
    background: transparent;
    color: #a8a8a8;
    cursor: default
}

.modal.modal-open .recent-files .no-files {
    margin: 10px
}

.modal-foreground.schema {
    width: 800px
}

.modal.modal-schema h1 {
    font-size: 14pt;
    font-weight: 700
}

.modal.modal-schema .contents {
    min-height: 300px
}

.modal.modal-schema .contents .config {
    margin: 40px 0 10px
}

.modal.modal-schema .contents .config.cloud-document {
    display: flex;
    flex-direction: row
}

.modal.modal-schema .contents .config.cloud-document .list-column {
    flex: 2 1;
    margin-right: 10px
}

.modal.modal-schema .contents .config.cloud-document .preview-column {
    flex: 3 1
}

.modal.modal-schema .contents .config.cloud-document .recent-files {
    height: 400px;
    overflow: auto;
    border: 1px solid #dadada;
    border-radius: 3px;
    margin-top: 10px;
    display: flex;
    flex-direction: column
}

.modal.modal-schema .contents .config.cloud-document .recent-files button.recent-file {
    background: #dadada;
    border: none;
    color: #4d4d4d;
    border-radius: 3px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue";
    font-size: 11pt;
    margin: 0;
    padding: 10px;
    text-align: left;
    background: transparent;
    border-radius: 0
}

.modal.modal-schema .contents .config.cloud-document .recent-files button.recent-file:focus,
.modal.modal-schema .contents .config.cloud-document .recent-files button.recent-file:hover {
    background: #e2e2e2
}

.modal.modal-schema .contents .config.cloud-document .recent-files button.recent-file .updated {
    color: #a8a8a8;
    font-size: 8pt;
    margin-top: 5px
}

.modal.modal-schema .contents .config.cloud-document .recent-files button.recent-file:hover {
    background: #dadada
}

.modal.modal-schema .contents .config.cloud-document .recent-files button.recent-file:hover .updated {
    color: #707070
}

.modal.modal-schema .contents .config.cloud-document .recent-files button.recent-file.selected {
    background: #707070;
    color: #fff
}

.modal.modal-schema .contents .config.cloud-document .recent-files button.recent-file.selected .updated {
    color: #dadada
}

.modal.modal-schema .contents .config.cloud-document .recent-files button.recent-file.selected:hover {
    background: #8a8a8a;
    color: #fff
}

.modal.modal-schema .contents .config.cloud-document .recent-files .no-files {
    margin: 10px
}

.modal.modal-schema .contents .config.config-jsoneditor {
    border-bottom: 1px solid #dadada
}

.modal.modal-schema .contents .config.config-jsoneditor .jsoneditor-react-container {
    height: 400px
}

.modal.modal-schema .contents .config .schema-panel-preview,
.modal.modal-schema .contents .config .schema-url-preview {
    height: 300px;
    overflow: auto;
    border: 1px solid #dadada;
    box-sizing: border-box;
    border-radius: 3px
}

.modal.modal-schema .contents .config .schema-panel-preview .info,
.modal.modal-schema .contents .config .schema-url-preview .info {
    color: #a8a8a8;
    width: 100%;
    text-align: center;
    padding-top: 135px
}

.modal.modal-schema .contents .config .error {
    color: #e55b62
}

.modal.modal-schema .contents button.fix-panel {
    background: #dadada;
    border: none;
    color: #4d4d4d;
    border-radius: 3px;
    padding: 10px 15px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue";
    font-size: 11pt
}

.modal.modal-schema .contents button.fix-panel:focus,
.modal.modal-schema .contents button.fix-panel:hover {
    background: #e2e2e2
}

.modal.modal-schema .contents .toggle {
    display: flex;
    width: 100%
}

.modal.modal-schema .contents .toggle button {
    flex: 1 1
}

.modal.modal-schema .modal-action-menu {
    padding-top: 10px
}

.toggle {
    white-space: nowrap;
    overflow: auto
}

.toggle button {
    background: #fff;
    color: #4d4d4d;
    border-radius: unset;
    border: 1px solid #dadada;
    border-left-width: 0;
    padding: 5px 20px;
    margin: 0
}

.toggle button:first-child {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    border-left-width: 1px
}

.toggle button:last-child {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px
}

.toggle button:hover {
    background: #f5f5f5
}

.toggle button.selected {
    background: #707070;
    border-color: #707070;
    color: #fff
}

.toggle button.selected:hover {
    background: #8a8a8a;
    border-color: #8a8a8a
}

.cloud-document-schema-preview .preview {
    margin-top: 10px;
    border: 1px solid #dadada;
    height: 400px;
    border-radius: 3px
}

.cloud-document-schema-preview .preview .error,
.cloud-document-schema-preview .preview .info,
.cloud-document-schema-preview .preview .loading {
    margin: 10px
}

.cloud-document-schema-preview .preview .info {
    color: #a8a8a8
}

.modal.modal-document-properties table.properties {
    border-collapse: collapse
}

.modal.modal-document-properties table.properties td,
.modal.modal-document-properties table.properties th {
    padding: 5px 0;
    vertical-align: top
}

.modal.modal-document-properties table.properties th {
    color: #a8a8a8;
    font-weight: 400;
    text-align: left
}

.modal.modal-document-properties table.properties td {
    padding-left: 20px
}

.modal-foreground.share {
    width: 600px
}

.modal.modal-share .share-contents {
    display: flex
}

.modal.modal-share .share-contents .url-contents {
    flex: 1 1;
    font-size: 11pt;
    color: #4d4d4d;
    background-color: transparent;
    border: 1px solid #dadada;
    padding: 5px 10px;
    border-radius: 3px
}

.react-tooltip-lite {
    background: #3d3d3d;
    color: #3a87ad;
    border-radius: 3px
}

.react-tooltip-lite-arrow {
    border-color: #4d4d4d
}

/*# sourceMappingURL=main.fd3a687c.chunk.css.map */