html {
    width      : 100%;
    height     : 100%;

    /* Height of the paste panel. Grows when the panel is expanded (see
       body.paste-open below) and #container shifts down to match. */
    --paste-h  : 28px;
}

body.paste-open {
    --paste-h: 190px;
}

body {
    margin     : 0;
    padding    : 0;
    overflow   : hidden;
    background : #F5F5F5;
    font-family: 'Roboto', 'Helvetica', sans-serif;
    font-size  : 14px;
    color      : #37474F;
    width      : 100%;
    height     : 100%;
}

/* The paste-a-bundle panel ------------------------------------------------- */

.paste-panel {
    position     : fixed;
    top          : 147px;
    left         : 3px;
    right        : 3px;
    height       : var(--paste-h);
    box-sizing   : border-box;
    display      : flex;
    flex-direction: column;
    background   : #FFF;
    border       : 1px solid #CFD8DC;
    border-radius: 3px;
    overflow     : hidden;
}

.paste-panel-header {
    flex       : 0 0 auto;
    display    : flex;
    align-items: center;
    gap        : 10px;
    padding    : 0 8px;
    height     : 26px;
    font-size  : 12px;
}

.paste-toggle {
    border     : none;
    background : none;
    padding    : 0;
    font       : inherit;
    font-weight: bold;
    color      : #00838F;
    cursor     : pointer;
    outline    : none;
}

.paste-toggle:before {
    content     : "";
    display      : inline-block;
    margin-right : 6px;
    width        : 0;
    height       : 0;
    border-width : 4px 0 4px 5px;
    border-style : solid;
    border-color : transparent transparent transparent currentColor;
    transition   : transform 0.15s ease;
}

body.paste-open .paste-toggle:before {
    transform: rotate(90deg);
}

.paste-hint {
    color: #90A4AE;
}

.paste-error {
    margin-left: auto;
    color      : #C62828;
    font-weight: bold;
    overflow   : hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.paste-open) .paste-panel-body {
    display: none;
}

.paste-panel-body {
    flex      : 1 1 auto;
    min-height: 0;
    display   : flex;
    gap       : 8px;
    padding   : 0 8px 8px 8px;
}

#paste-json {
    flex         : 1 1 auto;
    min-width    : 0;
    box-sizing   : border-box;
    resize       : none;
    border       : 1px solid #CFD8DC;
    border-radius: 3px;
    padding      : 6px 8px;
    font-family  : Menlo, monospace;
    font-size    : 12px;
    line-height  : 1.5;
    color        : #37474F;
    background   : #FFF;
    outline      : none;
    overflow     : auto;
}

#paste-json:focus {
    border-color: #00BCD4;
}

.paste-actions {
    flex          : 0 0 98px;
    display       : flex;
    flex-direction: column;
    align-items   : stretch;
    gap           : 6px;
}

.paste-btn {
    box-sizing   : border-box;
    height       : 26px;
    border-radius: 3px;
    border       : 1px solid #0097A7;
    background   : #00BCD4 linear-gradient(#00BCD4, #00ACC1);
    color        : #FFF;
    font         : inherit;
    font-weight  : 500;
    outline      : none;
    cursor       : pointer;
    box-shadow   : 0 1px 0 0 rgba(255, 255, 255, 0.3) inset;
}

.paste-btn:hover {
    background-image: linear-gradient(#26C6DA, #00BCD4);
}

.paste-btn:active {
    background-image: linear-gradient(#0097A7, #00ACC1);
    box-shadow      : 0 1px 1px 0 rgba(0, 0, 0, 0.3) inset;
}

.paste-btn:focus {
    border-color: #006064;
}

.paste-btn-secondary {
    background  : #ECEFF1 linear-gradient(#FFF, #ECEFF1);
    border-color: #CFD8DC;
    color       : #546E7A;
}

.paste-btn-secondary:hover {
    background-image: linear-gradient(#FFF, #CFD8DC);
}

.paste-shortcut {
    margin-top: auto;
    font-size : 10px;
    color     : #B0BEC5;
    text-align: center;
}

#container {
    position     : fixed;
    top          : calc(151px + var(--paste-h));
    right        : 3px;
    bottom       : 3px;
    left         : 3px;
    border       : 1px solid #CFD8DC;
    border-radius: 3px;
    overflow     : hidden;
    display      : flex;
    flex-direction: column;
}

.editor-pane {
    flex      : 1 1 50%;
    min-height: 0;
    position  : relative;
    overflow  : hidden;
}

.pane-splitter {
    flex      : 0 0 6px;
    position  : relative;
    cursor    : row-resize;
    background: #ECEFF1;
    border-top: 1px solid #CFD8DC;
    border-bottom: 1px solid #CFD8DC;
    touch-action: none;
}

.pane-splitter:hover,
.pane-splitter:active {
    background: #B0BEC5;
}

.pane-splitter:after {
    content   : "";
    position  : absolute;
    top       : 50%;
    left      : 50%;
    width     : 30px;
    height    : 2px;
    background: #78909C;
    transform : translate(-50%, -50%);
    box-shadow: 0 4px 0 #78909C, 0 -4px 0 #78909C;
}

.human-pane {
    flex         : 1 1 50%;
    min-height   : 0;
    overflow     : auto;
    box-sizing   : border-box;
    padding      : 10px 14px;
    border-top   : 1px solid #CFD8DC;
    background   : #FFF;
    font-family  : Menlo, monospace;
    font-size    : 13px;
    line-height  : 1.6;
    white-space  : pre-wrap;
    word-break   : break-word;
}

.human-pane .hr-key {
    color      : #a31515;
    font-weight: bold;
}

.human-pane .hr-colon {
    color: #666;
}

.human-pane .hr-str {
    color: #0451a5;
}

.human-pane .hr-num {
    color: #098658;
}

.human-pane .hr-bool {
    color: #0000ff;
}

.human-pane .hr-null {
    color      : #808080;
    font-style : italic;
}

.human-pane .hr-bracket {
    color: #999;
}

.human-pane .hr-children {
    padding-left: 18px;
    border-left : 1px dotted #ddd;
    margin-left : 4px;
}

.human-pane .hr-unsupported {
    color     : #999;
    font-style: italic;
}

.human-pane .fhir-cards {
    font-family: sans-serif;
    white-space: normal;
}

.human-pane .fhir-cards-summary {
    font-weight  : bold;
    color        : #546E7A;
    margin-bottom: 10px;
}

.human-pane .fhir-card {
    background   : #FAFAFA;
    border       : 1px solid #CFD8DC;
    border-radius: 6px;
    margin-bottom: 12px;
    overflow     : hidden;
}

.human-pane .fhir-card-header {
    display     : flex;
    align-items : center;
    flex-wrap   : wrap;
    gap         : 8px;
    padding     : 8px 12px;
    background  : #E0F7FA;
    border-bottom: 1px solid #B2EBF2;
}

.human-pane .fhir-card-badge {
    display        : inline-block;
    padding        : 2px 8px;
    border-radius  : 10px;
    background     : #00BCD4;
    color          : white;
    font-size      : 11px;
    font-weight    : bold;
    text-transform : uppercase;
    letter-spacing : 0.03em;
}

.human-pane .fhir-card-title {
    font-weight: bold;
    color      : #37474F;
}

.human-pane .fhir-card-status {
    padding       : 1px 7px;
    border-radius : 10px;
    background    : #ECEFF1;
    color         : #546E7A;
    font-size     : 11px;
    text-transform: capitalize;
}

.human-pane .fhir-card-id {
    margin-left: auto;
    font-size  : 11px;
    color      : #78909C;
    font-family: Menlo, monospace;
}

.human-pane .fhir-card-body {
    padding: 8px 12px;
}

.human-pane .fhir-card-field {
    display      : flex;
    padding      : 4px 0;
    border-bottom: 1px dotted #ECEFF1;
    gap          : 12px;
}

.human-pane .fhir-card-field:last-child {
    border-bottom: none;
}

.human-pane .fhir-card-field-label {
    flex     : 0 0 140px;
    color    : #78909C;
    font-size: 12px;
}

.human-pane .fhir-card-field-value {
    flex       : 1 1 auto;
    font-family: Menlo, monospace;
    font-size  : 12px;
    white-space: pre-wrap;
    word-break : break-word;
}

.human-pane .fhir-card-empty {
    color     : #90A4AE;
    font-style: italic;
}

.input-wrap {
    position     : absolute;
    top          : 117px;
    left         : 70px;
    right        : 100px;
    height       : 26px;
    border-radius: 3px 0 0 3px;
}

.input-wrap:before {
    content    : "FHIR Url";
    position   : absolute;
    left       : -65px;
    top        : 5px;
    font-weight: bold;
}

.fhir-servers-info {
    position     : fixed;
    top          : 3px;
    left         : 3px;
    right        : 3px;
    height       : 110px;
    box-sizing   : border-box;
    padding      : 4px 10px;
    background   : #FFF;
    border       : 1px solid #CFD8DC;
    border-radius: 3px;
    font-size    : 12px;
    line-height  : 1.5;
    overflow     : auto;
}

.fhir-servers-info ul {
    list-style : none;
    margin     : 4px 0 0 0;
    padding    : 0;
}

.fhir-servers-info li {
    line-height: 1.6;
}

.fhir-servers-info a {
    color          : #00BCD4;
    text-decoration: none;
}

.fhir-servers-info a:hover {
    text-decoration: underline;
}

.input-wrap input {
    display      : block;
    width        : 100%;
    border       : 1px solid #CFD8DC;
    border-radius: 3px 0 0 3px;
    box-sizing   : border-box;
    margin       : 0;
    height       : 26px;
    font         : inherit;
    outline      : none;
    padding      : 0 10px;
    z-index      : 1;
    position     : relative;
}

.input-wrap input:focus {
    z-index     : 2;
    border-color: #00BCD4;
}

.btn {
    position     : absolute;
    top          : 117px;
    right        : 3px;
    width        : 98px;
    height       : 26px;
    box-sizing   : border-box;
    border-radius: 0 3px 3px 0;
    border       : 1px solid #0097A7;
    background   : #00BCD4 linear-gradient(#00BCD4, #00ACC1);
    color        : #FFF;
    font         : inherit;
    font-weight  : 500;
    text-shadow  : none;
    outline      : none;
    cursor       : pointer;
    box-shadow   : 0 1px 0 0 rgba(255, 255, 255, 0.3) inset;
}

.btn:hover {
    background-image: linear-gradient(#26C6DA, #00BCD4);
}

.btn:active {
    background-image: linear-gradient(#0097A7, #00ACC1);
    box-shadow      : 0 1px 1px 0 rgba(0, 0, 0, 0.3) inset;
}

.btn:focus {
    border-color: #006064;
}

.btn:after {
    content            : "";
    display            : inline-block;
    margin-left        : 1ch;
    width              : 0;
    height             : 0;
    border-width       : 5px 0 5px 5px;
    border-style       : inset inset inset solid;
    border-top-color   : transparent;
    border-bottom-color: transparent;
}

.message {
    background       : #FFC;
    border           : 1px solid #CC9;
    padding          : 1em 2em;
    position         : absolute;
    top              : 50%;
    left             : 50%;
    border-radius    : 3px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform   : translate(-50%, -50%);
    -ms-transform    : translate(-50%, -50%);
    transform        : translate(-50%, -50%);
}

/* Starting the dark theme -------------------------------------------------- */

body.dark {
    background: #263238;
    color     : #CFD8DC;
}

body.dark .message {
    background  : rgb(182, 118, 0);
    border-color: orange;
    color       : white;
    text-shadow : 0px 1px 0px rgba(0, 0, 0, 0.3); 
}

body.dark .input-wrap {
    box-shadow: 0 0 0 1px #37474F;
}

body.dark .input-wrap:before {
    text-shadow: 0 0 1px #000;
}

body.dark .fhir-servers-info {
    background  : #37474F;
    border-color: #546E7A;
    color       : #CFD8DC;
}

body.dark .fhir-servers-info a {
    color: #4DD0E1;
}

body.dark #container {
    border-color: #546E7A;
}

body.dark .paste-panel {
    background  : #37474F;
    border-color: #546E7A;
}

body.dark .paste-toggle {
    color: #4DD0E1;
}

body.dark .paste-hint {
    color: #78909C;
}

body.dark .paste-error {
    color: #EF9A9A;
}

body.dark #paste-json {
    background  : #2e2e2e;
    border-color: #777;
    color       : #CCC;
}

body.dark #paste-json:focus {
    border-color: #777;
    box-shadow  : 0px 0px 0 1px orange;
}

body.dark .paste-btn {
    background  : #333 linear-gradient(#555, #333);
    border-color: #777;
    text-shadow : 0 0 1px #000;
    color       : #CCC;
}

body.dark .paste-btn:hover {
    background-image: linear-gradient(#666, #444);
}

body.dark .paste-btn:active {
    background-image: linear-gradient(#111, #333);
    border-color    : #000;
}

body.dark .paste-btn:focus {
    box-shadow: 0px 0px 0 1px orange;
}

body.dark .paste-shortcut {
    color: #607D8B;
}

body.dark .human-pane {
    background  : #1e1e1e;
    color       : #ccc;
    border-top-color: #546E7A;
}

body.dark .human-pane .hr-key {
    color: #9cdcfe;
}

body.dark .human-pane .hr-str {
    color: #ce9178;
}

body.dark .human-pane .hr-num {
    color: #b5cea8;
}

body.dark .human-pane .hr-bool {
    color: #569cd6;
}

body.dark .human-pane .hr-null {
    color: #808080;
}

body.dark .human-pane .hr-bracket {
    color: #808080;
}

body.dark .human-pane .hr-children {
    border-left-color: #444;
}

body.dark .human-pane .hr-unsupported {
    color: #888;
}

body.dark .human-pane .fhir-cards-summary {
    color: #90A4AE;
}

body.dark .human-pane .fhir-card {
    background  : #2a2a2a;
    border-color: #546E7A;
}

body.dark .human-pane .fhir-card-header {
    background      : #2d3b40;
    border-bottom-color: #546E7A;
}

body.dark .human-pane .fhir-card-badge {
    background: #4DD0E1;
    color     : #1e1e1e;
}

body.dark .human-pane .fhir-card-title {
    color: #eee;
}

body.dark .human-pane .fhir-card-status {
    background: #37474F;
    color     : #CFD8DC;
}

body.dark .human-pane .fhir-card-id {
    color: #90A4AE;
}

body.dark .human-pane .fhir-card-field {
    border-bottom-color: #37474F;
}

body.dark .human-pane .fhir-card-field-label {
    color: #90A4AE;
}

body.dark .human-pane .fhir-card-empty {
    color: #78909C;
}

body.dark .pane-splitter {
    background: #37474F;
    border-color: #546E7A;
}

body.dark .pane-splitter:hover,
body.dark .pane-splitter:active {
    background: #455A64;
}

body.dark .pane-splitter:after {
    background: #888;
    box-shadow: 0 4px 0 #888, 0 -4px 0 #888;
}

body.dark .input-wrap input {
    background  : #2e2e2e;
    border-color: #777;
    color       : #CCC;
}

body.dark .input-wrap input:focus {
    box-shadow: 0px 0px 0 1px orange;
}

body.dark .btn {
    background  : #333 linear-gradient(#555, #333);
    border-color: #777;
    text-shadow : 0 0 1px #000;
    color       : #CCC;
    box-shadow  : 0px 0px 0 1px #333;
}

body.dark .btn:hover {
    background-image: linear-gradient(#666, #444);
}

body.dark .btn:active {
    background-image: linear-gradient(#111, #333);
    box-shadow      : 0px 0px 0 1px #000, 0 1px 1px 0 #000 inset;
    border-color    : #000;
}

body.dark .btn:focus {
    box-shadow: 0px 0px 0 1px orange;
}