/********************************************************************************
* Author: Omid Ghavami Zeitooni                                                 *
* Created: 2020-11-19                                                           *
*                                                                               *
* (C) Copyright 2020 Whispr Group International Holding AB. All Rights Reserved *
********************************************************************************/


/*******************************************************************************
 * Common                                                                      */

@import 'akkurat-fonts.css';

:root {
    --whispr-black: black;
    --whispr-white: white;

    --whispr-dark-blue: #132533;
    --whispr-red: #D61016;
    --whispr-light-grey: #DBDFE1;
    --whispr-dark-grey: #5B5F61;
    --whispr-darker-grey: #4B4F51;

    --whispr-teal: #07737F;
    --whispr-corporate-blue: #005282;
    --whispr-bright-blue: #8dd5ff;
    --whispr-purple-blue: #27306E;
    --whispr-purple-red: #62254A;
    --whispr-darker-red: #7C2438;
    --whispr-dark-red: #A6193C;
    --whispr-yellow: #FFB86E;
    --whispr-lighter-yellow: #FFBF7D;
    --whispr-darker-yellow: #CC9360;
    --whispr-green: #556B2F;

    --whispr-teal-85: #33868F;

    --whispr-panel-background: #404040;
    --whispr-tab-background: #505050;

    --title-bar-height: 0px;

    --side-menu-width: 43px;
    --side-menu-width-small-icons: 25px;

    --status-bar-height: 14px;
    --status-bar-padding: 1px;
    --status-bar-border-width: 1px;

    --login-view-inner-width: 350px;
    --login-view-font-size: 16px;

    --domain-tree-row-height: 20px;

    --domain-tree-animation-duration: 0.2s;
    --domain-tree-animation-max-delay: 0.1s;

    --animation-duration: 1s;

    /* NOTE(jan): Solarized dark. */
    --base03: #002b36;
    --base02: #073642;
    --base01: #586e75;
    --base00: #657b83;
    --base0: #839496;
    --base1: #93a1a1;
    --base2: #eee8d5;
    --base3: #fdf6e3;
    --yellow: #b58900;
    --orange: #cb4b16;
    --red: #dc322f;
    --magenta: #d33682;
    --violet: #6c71c4;
    --blue: #268bd2;
    --cyan: #2aa198;
    --green: #859900;
}

::-webkit-scrollbar {
    background-color: rgba(0, 0, 0, 0);
    height: 21px;
    width: 21px;
}

::-webkit-scrollbar-corner {
    background-color: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
    background-color: var(--whispr-dark-grey);
}

::-webkit-scrollbar-button:horizontal {
    width: 21px;
    height: 21px;
}

::-webkit-scrollbar-button:vertical {
    width: 21px;
    height: 25px;
}

#_render-timing {
    display: none;
    font-family: Courier, monospace;
    position: absolute;
    right: 1em;
    top: 1em;
    color: magenta;
    z-index: 100000;
}

#_render-timing.show {
    display: block;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.rotating {
    display: inline-block;
    animation: rotation 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

input,
textarea,
select {
    font-family: 'Akkurat Pro';
    font-size: 12px;
    border: 0;
    padding: 5px;
}

@font-face {
    font-family: 'Untitled1';
    src: url("/Untitled1.ttf");
}

.whispr-icon {
    font-style: normal;
    font-family: 'Untitled1';
    font-size: 12px;
}

.varys-main {
    font-family: 'Akkurat Pro', sans-serif;
    font-size: 12px;
    font-weight: normal;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--whispr-dark-blue);
}

.disabled {
    color: #909090 !important;
}

.disabled {
    color: #909090 !important;
}

.dimmed {
    color: #909090 !important;
}

.button.dimmed {
    pointer-events: none;
}

.table-view {
    background-color: #202020;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: var(--whispr-light-grey);
    overflow: auto;
}

.table-view .table-view-content {
    background: var(--whispr-tab-background);
    border-collapse: collapse;
    width: 100%;
}

.table-view .table-view-content th,
.table-view .table-view-content td {
    border: 1px solid var(--whispr-dark-blue);
    border-top: none;
}

.table-view .table-view-content th {
    text-transform: uppercase;
    white-space: nowrap;
    background-color: var(--whispr-dark-blue);
    padding: 5px 10px;
    border-bottom: none;
}

.table-view .table-view-content td {
    padding: 5px 10px;
}

.table-view .table-view-bottom-controls {
    text-align: center;
    padding: 10px 0px;
}

.body-container {
    box-sizing: border-box;
    padding: 0.5em;
    overflow-y: auto;
    overflow-x: hidden;
}

.right-aligned {
    color: var(--whispr-light-grey);
    font-size: 80%;
    font-style: italic;
    text-align: right;
}


/* /Common
 *******************************************************************************/

/*******************************************************************************
 * Controls                                                                    */

input {
    /* font: 400 12px 'Akkurat Pro'; */
}

.button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    font-family: 'Akkurat Pro', sans-serif;
    background: #606060;
    color: white;
    border: 1px solid #303030;
    padding: 7px;
    text-align: center;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    text-shadow: 1px 1px 2px black;
    text-decoration: none;
    user-select: none;
}

.button[disabled] {
    cursor: not-allowed;
    color: var(--whispr-dark-grey);
}

.button.error {
    background-color: var(--whispr-red);
}

.button.processing {
    background-color: var(--whispr-yellow);
}

.button.on {
    background-color: var(--whispr-corporate-blue);
}

.button.success {
    background-color: green;
}

.button .icon {
    margin-left: 1em;
}

.button-container {
    display: flex;
}

.button-container .button {
    margin-right: 5px;
}


.button.hidden {
    visibility: collapse;
}

.button-container .button.dimmed {
    cursor: default;
}

.button-container .button.right-align {
    margin-left: auto;
}

.save-button {
    /* background: #285299; */
    background: #285277;
}

.danger-button {
    background: var(--whispr-darker-red);
}

.tiny-button {
    font-size: 10px;
    padding: 2px;
    border-radius: 1px;
}

.make-multi-button {
    cursor: pointer;
    text-align: right;
    vertical-align: middle;
    font-size: 16px;
    margin-left: 5px;
    /* width: 10px; */
}

.add-value-button {
    font-size: 10px;
    padding: 2px;
}


.tab-button-container {
    display: flex;
    position: absolute;
    width: 100%;
    z-index: 300000;
    background-color: var(--whispr-panel-background);
}

.tab-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: 'Akkurat Pro', sans-serif;
    background: #303030;
    color: white;
    border: 1px solid #303030;
    margin-left: -1px; /* NOTE(omid): Compensate for 1px border on the left */
    border-bottom: 0px;
    padding: 7px;
    text-align: center;
    border-radius: 4px 4px 0px 0px;
    cursor: pointer;
    text-shadow: 1px 1px 2px black;
    text-decoration: none;
    overflow: hidden;

    display: flex;
}

.tab-button.selected {
    background: var(--whispr-tab-background);
    margin-bottom: -2px; /* NOTE(omid): Push down to overlap and hide top border of tab content */
}

.tab-button.hidden {
    visibility: collapse;
}

.tab-button:after {
    content: '\00a0';
}

.tab-button span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-button span:last-child {
    flex-shrink: 0;
    margin-left: 2px;
}

.tab-button.cursive {
    font-style: italic;
}

.tab-content-container {
    position: absolute;
    top: 31px;
    bottom: 0;
    left: 0;
    right: 0;
}

.tab-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--whispr-tab-background);
    color: var(--whispr-white);
    border-top: 1px solid #303030;
    margin-top: -1px;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    overflow-y: auto;
}

.tab-content[data-if="selectedTab=Node"] {
    overflow-y: hidden;
}


/* /Controls
 *******************************************************************************/


/*******************************************************************************
 * App Container                                                               */

.title-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--title-bar-height);
    padding-top: 2px;
    background: var(--whispr-dark-blue);
    color: var(--whispr-light-grey);
    text-align: center;
    font-size: 10px;
    border-bottom: 1px solid black;
}

.status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--status-bar-height);
    padding-top: var(--status-bar-padding);
    background: var(--whispr-dark-blue);
    color: var(--whispr-light-grey);
    text-align: center;
    font-size: 10px;
    border-top: var(--status-bar-border-width) solid black;
    z-index: 10000;
}

.disabled-pane {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    background-image: repeating-linear-gradient(-45deg, rgba(255,255,255, 0.25), rgba(255,255,255, 0.25) 1px, transparent 1px, transparent 6px);
    background-size: 8px 8px;

    padding: 2em;

    color: var(--whispr-light-grey);
    font-weight: bold;
    font-size: 200%;
}

.loading-pane {
    position: absolute;
    background: var(--whispr-dark-blue);
    color: var(--whispr-red);
    opacity: 0.7;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    animation: fadein 1s;
    z-index: 10000;
}

.loading-pane i {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 0.7; }
}

.data-graph-editor-blocker {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: var(--whispr-light-grey);
    opacity: 0.75;
    font-size: 400%;
    text-align: center;
    font-style: italic;
    color: var(--whispr-dark-grey);
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
}



/* /App Container
 *******************************************************************************/



/*******************************************************************************
 * Message Box                                                                 */

.message-box-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadein 0.2s;
    z-index: 1000000;
}

.message-box-veil {
    position: fixed;
    background: var(--whispr-black);
    opacity: 0.4;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.message-box {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid;
    border-radius: 5px;
    background: var(--whispr-light-grey);
    max-width: 400px;
    max-height: 600px;
}

.message-box-header {
    font-size: 20px;
    color: var(--whispr-white);
    background: var(--whispr-dark-blue);
    padding: 10px;
    box-sizing: border-box;
}

.message-box-body {
    font-size: 16px;
    padding: 20px;
    background: var(--whispr-white);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: auto;
}

.message-box .button-container {
    border-top: 1px solid black;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
}

/* /Message Box
 *******************************************************************************/



/*******************************************************************************
 * Login View                                                                  */

.login-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-view {
    display: grid;
    place-items: center;
    background: var(--whispr-white);
    color: #202020;
    border: 2px solid var(--whispr-corporate-blue);
    border-radius: 5px;
    padding: 20px;
    font-size: var(--login-view-font-size);
}

.login-view input {
    width: var(--login-view-inner-width);
    font-size: 16px;
    margin-bottom: 10px;
}

.login-title {
    font-size: 18px;
}

.login-view button {
    margin-top: 10px;
    width: 100%;
    font-size: 16px;
}

button.login-button {
    background: var(--whispr-teal);
    border-color: var(--whispr-teal-85);
}

button.register-button {
    background: var(--whispr-corporate-blue);
    border-color: var(--whispr-purple-blue);
}

button.cancel-button {
    background: var(--whispr-dark-red);
    border-color: var(--whispr-red);
}

.forgot-password-link {
    display: block;
    margin-bottom: 10px;
    color: black;
}

.whispr-logo {
    align-self: center center;
}

.whispr-logo-group {
    font-weight: bold;
}

.whispr-logo-icon path{
    fill: var(--whispr-red);
}

.varys-title {
    /* font-family: 'Tiempos Headline'; */
    font-size: 14px;
    text-align: center;
    color: var(--whispr-corporate-blue);
}

.login-mode-form-container {
    margin-top: 20px;
}


.login-error {
    color: var(--whispr-dark-red);
    width: var(--login-view-inner-width);
    max-height: calc(var(--login-view-font-size) * 3 + 12px);
    overflow-wrap: break-word;
    overflow-y: auto;
}

.login-success {
    color: var(--whispr-teal);
    width: var(--login-view-inner-width);
    max-height: calc(var(--login-view-font-size) * 3 + 12px);
    overflow-wrap: break-word;
    overflow-y: auto;
}


/* /Login View
 *******************************************************************************/



/*******************************************************************************
 * Tree                                                                        */

:root {
    --tree-indent: 20px;
    --tree-row-height: 20px;
    --tree-padding: 7px;
    --tree-div-height: 30px;
}

.tree-view {
    background: var(--whispr-panel-background);
    color: var(--whispr-light-grey);
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/* .tree-view .button-container { */
/*     margin-top: 0px; */
/* } */

:root {
    --tree-padding: 7px;
    --tree-div-height: 30px;
}

/* .tree-view > div { */
/*     padding-left: 10px; */
/*     padding-top: var(--tree-padding); */
/* } */

.tree-view .search-container {
    height: var(--tree-div-height);
}

.tree-view .search-container input {
    width: calc(100% - 2em - 10px);
}

.concept-view-tree {
    box-sizing: border-box;
    overflow: auto;
    width: 100%;
    position: absolute;
    top: 70px;
    bottom: 0px;
}

.tree-node {
    position: relative;
    animation: fadein-node var(--tree-animation-duration) linear;
    animation-fill-mode: both;
}

/* START OF GENERATED ANIMATION DELAYS */
/*
Item animation delays generated at
https://observablehq.com/@mast4461/css-staggered-entering-animations
on Tue Mar 16 2021 16:37:14 GMT+0100 (Central European Standard Time)
with settings:
{
  "minPerceivableDuration": 0.001,
  "animationDuration": 0.2,
  "itemCount": 100,
  "maxAnimationDelay": 0.1,
  "rateScaleFactor": 7.88132894597177,
  "easing": "exponential"
}
*/
.tree-node-child-container .tree-node:nth-child(1) { animation-delay: calc(0 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(2) { animation-delay: calc(0.0866181588105947 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(3) { animation-delay: calc(0.16660803638347776 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(4) { animation-delay: calc(0.24047684867393496 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(5) { animation-delay: calc(0.30869299795146066 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(6) { animation-delay: calc(0.3716890429393781 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(7) { animation-delay: calc(0.42986444167046967 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(8) { animation-delay: calc(0.48358808445106966 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(9) { animation-delay: calc(0.5332006329951503 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(10) { animation-delay: calc(0.5790166805608521 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(11) { animation-delay: calc(0.6213267467868918 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(12) { animation-delay: calc(0.6603991198781047 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(13) { animation-delay: calc(0.6964815578214272 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(14) { animation-delay: calc(0.72980285941973 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(15) { animation-delay: calc(0.7605743151054326 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(16) { animation-delay: calc(0.7889910467335086 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(17) { animation-delay: calc(0.8152332448495145 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(18) { animation-delay: calc(0.839467311278157 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(19) { animation-delay: calc(0.8618469142775587 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(20) { animation-delay: calc(0.8825139629499543 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(21) { animation-delay: calc(0.9015995070875601 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(22) { animation-delay: calc(0.9192245681595372 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(23) { animation-delay: calc(0.9355009067093425 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(24) { animation-delay: calc(0.9505317310285321 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(25) { animation-delay: calc(0.9644123516007214 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(26) { animation-delay: calc(0.9772307854655297 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node:nth-child(27) { animation-delay: calc(0.9890683143347844 * var(--tree-animation-max-delay)); }
.tree-node-child-container .tree-node { animation-delay: var(--tree-animation-max-delay); }
/* END OF GENERATED ANIMATION DELAYS */

@keyframes fadein-node {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tree-row {
    color: var(--whispr-light-grey);
    height: var(--tree-row-height);
    display: table;
    width: 100%;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    text-decoration: none;
}

.tree-row:hover {
    background: var(--whispr-darker-grey);
}

.tree-row-selected {
    background: var(--whispr-dark-grey);
    color: white !important;
    /* transition: all 0.2s; */
}

.tree-row-selected:hover {
    background: #0e437c;
    /* transition: all 0.2s; */
}

.tree-row-highlighted {
    font-style: italic;
}

.tree-row-drop-active,
.tree-row-selected.tree-row-drop-active {
    color: var(--whispr-black);
    background-color: var(--whispr-yellow);
}

.tree-cell {
    display: table-cell;
    vertical-align: middle;
    width: auto;
}

.tree-expand {
    width: 5px;
    padding-left: 5px;
}

.tree-icon {
    width: 5px;
    padding-left: 5px;
}

.tree-name {
    padding-left: 5px;
    white-space: nowrap;
}

.tree-indent-guide {
    border-left: 1px solid #606060;
    margin-left: 7px;
    position: absolute;
    left: 0;
    top: var(--tree-row-height);
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

.tree-node[data-depth="2"] .tree-indent-guide {
    left: calc(var(--tree-indent) * 1);
}

.tree-node[data-depth="3"] .tree-indent-guide {
    left: calc(var(--tree-indent) * 2);
}

.tree-node[data-depth="4"] .tree-indent-guide {
    left: calc(var(--tree-indent) * 3);
}

.tree-node[data-depth="5"] .tree-indent-guide {
    left: calc(var(--tree-indent) * 4);
}

.tree-node[data-depth="6"] .tree-indent-guide {
    left: calc(var(--tree-indent) * 5);
}

.tree-node[data-depth="7"] .tree-indent-guide {
    left: calc(var(--tree-indent) * 6);
}

.tree-node[data-depth="2"] .tree-row {
    padding-left: calc(var(--tree-indent) * 1);
}

.tree-node[data-depth="3"] .tree-row {
    padding-left: calc(var(--tree-indent) * 2);
}

.tree-node[data-depth="4"] .tree-row {
    padding-left: calc(var(--tree-indent) * 3);
}

.tree-node[data-depth="5"] .tree-row {
    padding-left: calc(var(--tree-indent) * 4);
}

.tree-node[data-depth="6"] .tree-row {
    padding-left: calc(var(--tree-indent) * 5);
}

.tree-node[data-depth="7"] .tree-row {
    padding-left: calc(var(--tree-indent) * 6);
}

/* Tree View                                                                   *
 *******************************************************************************/




/*******************************************************************************
 * Domain Tree View                                                            */


.domain-tree-view {
    color: var(--whispr-light-grey);
    /* overflow: hidden; */
    /* position: absolute; */
    /* left: 0; */
    /* right: 0; */
    /* top: 0; */
    /* bottom: 0; */
}

.domain-tree-view.processing {
    cursor: wait !important;
}

.domain-tree-view .domain-tree-view-tree.processing {
    pointer-events: none;
}

.domain-tree-view .button-container.processing {
    pointer-events: none;
}

.domain-tree-view .button.add-root-domain {
    color: #909090 !important;
}

.domain-tree-view-title {
    font-size: 20px;
    padding-left: 10px;
    padding-top: 5px;
}

.domain-tree-view .button-container {
    margin-top: 0px;
}

:root {
    --domain-tree-padding: 7px;
    --domain-tree-div-height: 30px;
}

.domain-tree-view > div {
    padding-left: 10px;
    padding-top: var(--domain-tree-padding);
}

.domain-tree-view .search-container {
    height: var(--domain-tree-div-height);
}

.domain-tree-view .search-container input {
    width: calc(100% - 2em - 10px);
}

.show-more-search-features-toggle {
    padding: 0;
    text-align: center;
    cursor: pointer;
    text-decoration: underline;
}

.domain-tree-view-tree {
    box-sizing: border-box;
    height: calc(100% - calc(4 * (var(--domain-tree-div-height) + var(--domain-tree-padding))));
    position: absolute;
    bottom: 0px;
    overflow: auto;
    width: 100%;
}

.domain-tree-view .domain-tree-view-context {
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    background-color: var(--whispr-panel-background);
    border: 1px solid var(--whispr-white);
    z-index: 1;
}

.domain-tree-view .domain-tree-view-context-move,
.domain-tree-view .domain-tree-view-context-sort {
    position: fixed;
    top: 0;
    left: 0;
    padding-left: 0;
    padding-top: 0;
    background-color: var(--whispr-panel-background);
    border: 1px solid var(--whispr-white);
    z-index: 100000;
}

.domain-tree-view .domain-tree-view-context-move {
    height: 500px;
    width: 300px;
}

.domain-tree-view .domain-tree-view-context-option {
    cursor: default;
    padding: 10px;
    user-select: none;
}

.domain-tree-view .domain-tree-view-context-option:hover {
    background-color: var(--whispr-white);
    color: var(--whispr-dark-blue);
}

.domain-tree-view .domain-tree-view-context-move .domain-tree-view {
    position: unset;
    height: 500px;
}

.domain-tree-view .domain-tree-view-context-move .domain-tree-view-tree {
    position: absolute;
    top: 25px;
    bottom: 25px;
    height: 450px;
    width: 300px;
}

.domain-tree-view .domain-tree-view-context-move .button {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.domain-tree-node {
    position: relative;
    /* animation: fadein-node var(--domain-tree-animation-duration) linear; */
    /* animation-fill-mode: both; */
}

.domain-tree-node.filtered {
    display: none;
}

/* START OF GENERATED ANIMATION DELAYS */
/*
Item animation delays generated at
https://observablehq.com/@mast4461/css-staggered-entering-animations
on Tue Mar 16 2021 16:37:14 GMT+0100 (Central European Standard Time)
with settings:
{
  "minPerceivableDuration": 0.001,
  "animationDuration": 0.2,
  "itemCount": 100,
  "maxAnimationDelay": 0.1,
  "rateScaleFactor": 7.88132894597177,
  "easing": "exponential"
}
*/

/*
.domain-tree-node-child-container .domain-tree-node:nth-child(1) { animation-delay: calc(0 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(2) { animation-delay: calc(0.0866181588105947 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(3) { animation-delay: calc(0.16660803638347776 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(4) { animation-delay: calc(0.24047684867393496 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(5) { animation-delay: calc(0.30869299795146066 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(6) { animation-delay: calc(0.3716890429393781 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(7) { animation-delay: calc(0.42986444167046967 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(8) { animation-delay: calc(0.48358808445106966 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(9) { animation-delay: calc(0.5332006329951503 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(10) { animation-delay: calc(0.5790166805608521 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(11) { animation-delay: calc(0.6213267467868918 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(12) { animation-delay: calc(0.6603991198781047 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(13) { animation-delay: calc(0.6964815578214272 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(14) { animation-delay: calc(0.72980285941973 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(15) { animation-delay: calc(0.7605743151054326 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(16) { animation-delay: calc(0.7889910467335086 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(17) { animation-delay: calc(0.8152332448495145 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(18) { animation-delay: calc(0.839467311278157 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(19) { animation-delay: calc(0.8618469142775587 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(20) { animation-delay: calc(0.8825139629499543 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(21) { animation-delay: calc(0.9015995070875601 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(22) { animation-delay: calc(0.9192245681595372 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(23) { animation-delay: calc(0.9355009067093425 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(24) { animation-delay: calc(0.9505317310285321 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(25) { animation-delay: calc(0.9644123516007214 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(26) { animation-delay: calc(0.9772307854655297 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node:nth-child(27) { animation-delay: calc(0.9890683143347844 * var(--domain-tree-animation-max-delay)); }
.domain-tree-node-child-container .domain-tree-node { animation-delay: var(--domain-tree-animation-max-delay); }
*/
/* END OF GENERATED ANIMATION DELAYS */

@keyframes fadein-node {
    from { opacity: 0; }
    to   { opacity: 1; }
}


.domain-tree-row {
    color: var(--whispr-light-grey);
    height: var(--domain-tree-row-height);
    display: table;
    width: 100%;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    text-decoration: none;
}

.domain-tree-row .searchable-text span {
    white-space: nowrap;
}

.domain-tree-row:hover {
    background: var(--whispr-darker-grey);
    /* color: var(--whispr-dark-blue) !important; */
    /* transition: all 0.2s; */
}

.domain-tree-row-selected {
    /* background: var(--whispr-darker-red); */
    /* background: #0e639c; */
    background: var(--whispr-dark-grey);
    color: white !important;
    /* transition: all 0.2s; */
}

.domain-tree-row-selected:hover {
    background: #0e437c;
    /* transition: all 0.2s; */
}


.domain-tree-row-root-domain {
    font-weight: bold;
}

.domain-tree-row-highlighted {
    font-style: italic;
}

.domain-tree-row-drop-active,
.domain-tree-row-selected.domain-tree-row-drop-active {
    color: var(--whispr-black);
    background-color: var(--whispr-yellow);
}

.domain-tree-cell {
    display: table-cell;
    vertical-align: middle;
    width: auto;
    white-space: nowrap;
}

.domain-tree-expand {
    width: 5px;
    padding-left: 5px;
}

.domain-tree-icon {
    width: 5px;
    padding-left: 5px;
}

.domain-tree-name {
    padding-left: 5px;
    white-space: nowrap;
}

.domain-tree-tag {
    background-color: #62254A;
    border-radius: 10%;
    text-align: center;
}

.domain-tree-tag-module {
    background-color: var(--whispr-teal);
}

.domain-tree-tag.Reports {
    background-color: #E55BBF;
}

.domain-tree-tag.Pages {
    background-color: #E887CD;
}

.domain-tree-tag.Elements {
    background-color: #ECBADE;
}

.domain-tree-tag.Help {
    background-color: #E5AE5B;
}

.domain-tree-indent-guide {
    border-left: 1px solid #606060;
    margin-left: 7px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

/* /Domain Tree View
 *******************************************************************************/




/*******************************************************************************
 * Dividers                                                                    */

cmp-divider {
    background: var(--whispr-light-grey);

    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 100000;

    width: 3px;

    cursor: ew-resize;
    user-select: none;
}

cmp-divider .divider {
    height: 100%;
}

cmp-divider.collapsed {
    width: 0;
}

/* /Dividers                                                                    *
 *******************************************************************************/




/*******************************************************************************
 * Varys App Panes                                                             */

.varys-main > div > .left-pane {
    position: absolute;
    top: 0;
    bottom: calc(var(--status-bar-height) + var(--status-bar-padding) + var(--status-bar-border-width));
    left: var(--side-menu-width);
    /* width: 200px; */
    background: #404040;
    overflow: hidden;
}

.varys-main > div > .left-pane.small-icons {
    left: var(--side-menu-width-small-icons);
}

.varys-main > div > .left-pane ::-webkit-scrollbar-button:vertical,
.varys-main > div > .right-pane ::-webkit-scrollbar-button:vertical {
    display: none;
}

.varys-main > div > .left-pane ::-webkit-scrollbar-button:horizontal,
.varys-main > div > .right-pane ::-webkit-scrollbar-button:horizontal {
    display: none;
}

.varys-main > div > .middle-pane {
    position: absolute;
    left: var(--side-menu-width);
    right: 0;
    top: var(--title-bar-height);
    bottom: calc(var(--status-bar-height) + var(--status-bar-border-width) + var(--status-bar-padding));
}

.varys-main > div > .middle-pane.right-menu-hidden {
    right: 0 !important;
}

.varys-main > div > cmp-divider {
    bottom: calc(var(--status-bar-height) + var(--status-bar-border-width) + var(--status-bar-padding));
}

.varys-main > div > cmp-divider#varys-main-right-divider.right-menu-hidden {
    display: none;
}

.varys-main > div > .right-pane {
    position: absolute;
    right: var(--side-menu-width);
    top: 0;
    bottom: calc(var(--status-bar-height) + var(--status-bar-padding) + var(--status-bar-border-width));
    background: #404040;
    overflow: hidden;
    z-index: 10000;
}

.varys-main > div > .right-pane.small-icons {
    right: var(--side-menu-width-small-icons);
}

.varys-main > div > .right-pane.hidden {
    opacity: 0;
    pointer-events: none;
}

.varys-main > div > .right-menu {
    position: absolute;
    right: 0;
    top: 0;
    width: var(--side-menu-width);
    bottom: calc(var(--status-bar-height) + var(--status-bar-padding) + var(--status-bar-border-width));
    background: #404040;
    overflow: hidden;
    z-index: 10000;
}

.varys-main > div > .right-menu.small-icons {
    width: var(--side-menu-width-small-icons);
}

.varys-main > div > .right-menu.hidden {
    width: 0;
}

/* /Varys App Panes
 ********************************************************************************/




/*******************************************************************************
 * Side Menu                                                                   */

.widget-title {
    background: var(--whispr-dark-blue);
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    padding: 5px;
    
    position: absolute;
    z-index: 300000;
    width: 100%;
}

.widget-container-content {
    display: grid;
    position: absolute;
    padding-top: 6px;
    top: 24px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

/* .widget-container-content div { */
/*     height: 100% */
/* } */

/* .widget-container-content { */
/*     transition: all 0.2s; */
/* } */

.side-menu {
    background: var(--whispr-dark-blue);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
}

.side-menu.small-icons {
    width: var(--side-menu-width-small-icons);
}

.side-menu-item {
    color: var(--whispr-dark-grey);
    padding: 5px;
    text-align: center;
    user-select: none;
    cursor: pointer;
    transition: all 0.2s;

    position: relative;
}

.side-menu-item:hover {
    color: var(--whispr-white);
}

.side-menu-item-open {
    /* background: #505050; */
    color: var(--whispr-white);
    border-left: 2px solid var(--whispr-white);
}

.side-menu-item-icon  {
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    font-size: 24px;
}

.side-menu-item-icon.small-icons {
    font-size: 12px;
}

.side-menu-item-icon-notifications {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;

    z-index: 10001;
}

.side-menu-item-icon.small-icons .side-menu-item-icon-notification {
    height: 10px;
    width: 10px;
}

.side-menu-item-icon-notification {
    height: 20px;
    width: 20px;
    background-color: magenta;
    border-radius: 50%;
    user-select: none;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 8px;
    color: white;
}

.help-link-button a:link {
    color: var(--whispr-light-grey);
    text-decoration: none;
    font-size: 18px;
    padding: 5px;
    margin-left: 7px;
    border: 2px solid #ddd;
    border-radius: 0.3em;
}

.help-link-button a:visited {
    color: var(--whispr-light-grey);
    text-decoration: none;
    font-size: 18px;
    padding: 5px;
    margin-left: 7px;
    border: 2px solid #ddd;
    border-radius: 0.3em;
}


.help-shortcuts {
    padding: 0 10px;
    color: var(--whispr-light-grey);
}

.help-shortcuts ul {
    padding-left: 15px;
}

.help-shortcuts ul li {
    margin-bottom: 10px;
}

.help-shortcuts kbd {
    color: var(--whispr-dark-grey);
    background-color: #ddd;
    border-radius: 0.3em;
    padding: 0.2em .3em;
    margin: 0 .2em;
    border: 1px solid #ddd;
    font-family: monospace;
    vertical-align: middle;
    box-shadow: inset 0 -1px 0 #555;
    line-height: 200%;
}

/* /Side Menu
 *******************************************************************************/


/*******************************************************************************
 * Data File                                                                   */

.data-file-upload-progress-container .progress-bar-container {
    height: 20px;
}

.data-file-upload-progress-container .data-file-upload-progress-value {
    font-size: 14px;
    text-align: center;
    width: 100%;
    height: 100%;
    margin-top: 2px;
    float: left;
}

/* /Data File
 *******************************************************************************/


/*******************************************************************************
 * Node Editor                                                                 */

.node-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.node-editor .body-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* /Node Editor                                                                 
 *******************************************************************************/


/*******************************************************************************
 * Metadata                                                                    */

.concept-editor .tab-content {
    overflow-x: hidden;
}

.concept-tree-view {
    display: grid;
    grid-template-rows: 40px 1fr;
    min-height: 0;
}

.concept-tree-view .domain-tree-view-tree {
    height: calc(100% - 45px);
}

.concept-tree-view .concept-tree-row-drop-active {
    color: var(--whispr-black);
    background-color: var(--whispr-yellow);
}

.concept-tree-view .search-container {
    padding-left: 5px;
    padding-right: 5px;
}

.trait-list {
    display: table;
    width: 100%;
    border-spacing: 0px 5px;
}

.trait-list .trait {
    background: var(--whispr-teal-85);
    display: table-row;
    width: 100%;
}

.trait-list .trait > div {
    display: table-cell;
    padding: 5px;
}

.trait-list .trait .trait-name {
    background: var(--whispr-teal-85);
    color: white;
    text-shadow: 1px 1px 2px black;
}

.trait-adder {
    width: 100%;
    display: table;
}

.trait-adder > div {
    display: table-cell;
}

.trait-name {
    color: #4ec9b0;
}

.property-tree-row-drop-active {
    color: var(--whispr-black);
    background-color: var(--whispr-yellow);
}

.concept-info-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: #202020;
}

.property-pane-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #202020;
}

.concept-info-container .domain-tree-view-tree {
    height: calc(100% - 30px);
}

.concept-property-editor-body {
    overflow-x: hidden;
    overflow-y: auto;
}

.concept-info {
    /* background: var(--whispr-panel-background); */
    color: var(--whispr-light-grey);
}

.concept-info-container .button-container {
    padding: 5px
}

.concept-info-container .concept-info .domain-tree-indent-guide {
    display: none;
}

.concept-property-editor .button-container {
    border-bottom: 1px solid #202020;
    padding-bottom: 5px;
    margin: 0;
}

.concept-editor .button-container {
    padding-bottom: 5px;
    margin: 0;
}

.concept-property-designer .button-container {
    padding: 5px;
    margin-top: 0px;
}

.concept-property-designer .property-table {
    padding: 5px;
    box-sizing: border-box;
}

.concept-info .property-pane {
    position: relative;
    box-sizing: border-box;
}


.property-pane-container .property-label {
    display: flex;
    align-items: center;
}

.display-name {
    font-weight: bold;
}

/* /Metadata
 *******************************************************************************/



/*******************************************************************************
 * Searchable text                                                             */

.searchable-text {
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

/* .searchable-text span { */
/*     white-space: pre-wrap; */
/* } */

.searchable-text span.highlight {
    color: var(--whispr-yellow);
}

/* /Searchable text
 *******************************************************************************/




/*******************************************************************************
 * Text Editor                                                                 */

.text-editor {
    height: 200px;
}

/* /Text Editor
 *******************************************************************************/




/*******************************************************************************
 * Toolbar                                                                     */

.toolbar {
    padding: 0.5em;
    z-index: 10001;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
}

.toolbar .button {
    /* margin-right: 0.5em; */
    position: relative;
    display: inline-block;
}

.toolbar .button.on {
    background-color: var(--whispr-teal);
}

.toolbar .scale-factor {
    color: var(--whispr-white);
    padding-right: 0.5em;
    width: 2.5em;
    display: inline-block;
    text-align: right;
}

.toolbar span {
    user-select: none;
}

.toolbar span i {
    user-select: none;
}

/* /Toolbar
 *******************************************************************************/



/*******************************************************************************
 * Fullscreen View                                                             */

.fullscreen-view-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

.fullscreen-view-container .text-editor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
}

/* Fullscreen View                                                             *
 *******************************************************************************/




/*******************************************************************************
 * Tooltip                                                                     */

:root {
    --tooltip-z: 100001;
}

.has-tooltip:before {
    border-radius: 10px;
    content: attr(data-text);
    position: absolute;
    display: none;
    background-color: var(--whispr-teal);
    color: var(--whispr-white);
    padding: 1em;
    width: 100px;
    left: 50%;
    transform: translateX(-50%);
    top: 110%;
    z-index: var(--tooltip-z);
}

.has-tooltip:after {
    content: "";
    position:absolute;

    left: 50%;
    transform: translate(-50%, -10px);

    border: 10px solid var(--whispr-teal);
    border-color: transparent transparent var(--whispr-teal) transparent;

    display:none;
    z-index: 100001;
}

.has-tooltip.left:before {
    transform: translateX(-100%);

    left: -15px;
    top: -25%;
    width: unset;

    padding: 1ex;
}

.has-tooltip.left:after {
    border-color: transparent transparent transparent var(--whispr-teal);

    left: -10px;
    top: 50%;
}

.has-tooltip-left:before {
    text-align: left;
    transform: translateX(-20px);
    width: unset;
}

.has-tooltip-right:before {
    text-align: right;
    /* transform: translateX(-100px); */
    width: unset;
}


.has-tooltip:hover:before {
    display: block;
    pointer-events: none;
}

.has-tooltip:hover:after {
    display: block;
    pointer-events: none;
}

.has-tooltip:last-child {
    margin-right: 0;
}

.tooltip-indicator {
    top: 0;
    font-size: 75%;
    cursor: pointer;
    text-decoration: underline;
    vertical-align: super;
    color: var(--whispr-bright-blue);
}

/* /Tooltip                                                                    *
 *******************************************************************************/



/*******************************************************************************
 * Settings                                                                    */

.varys-main-widget .settings {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 1em;
}

/* Settings                                                                    *
 *******************************************************************************/



/*******************************************************************************
 * Chat view                                                                   */

:root {
    --chat-input-height: 50px;
}

.chat-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    overflow: hidden;

    font-size: 110%;
}

.chat-history {
    border: 1px solid var(--whispr-panel-background);
    opacity: 0.99;

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: var(--chat-input-height);

    overflow-y: scroll;

    padding: 1em 2ex;
}

.chat-history p {
    color: var(--whispr-light-grey);

    margin: 0.1em 0;

    opacity: 1;
}

.chat-container .chat-input-container {
    display: flex;
    flex-direction: row;

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--chat-input-height);
}

.chat-container textarea {
    background: var(--whispr-panel-background);
    color: var(--whispr-white);

    flex-grow: 1;

    border: 1px solid var(--whispr-dark-grey);
    box-sizing: border-box;
    padding: 0;
}

.chat-container textarea:focus-visible {
    border-color: var(--whispr-light-grey);

    outline: none;
}

.chat-container .button {
    border: 0;
    border-radius: 0;

    flex-grow: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    max-width: var(--chat-input-height);
}

/* Chat view                                                                   *
 *******************************************************************************/




/*******************************************************************************
 * Property Editor                                                             */

.property-editor {
    /* font-family: 'Akkurat Pro', sans-serif; */
    color: #E0E0E0;
}

.property-editor select:focus-visible {
    border-color: var(--whispr-light-grey);

    outline: none;
}

.domain-property-pane {
    color: var(--whispr-white);
}

/* /Property Editor                                                            *
 *******************************************************************************/

/*******************************************************************************
 * Render Error Modal                                                          */

.render-error-modal.message-box {
    max-width: 800px;
}

.render-error-modal-error,
.render-error-modal-log {
    font-size: 70%;
}

/* /Render Error Modal                                                         *
 *******************************************************************************/

/*******************************************************************************
 * Module Documentation Viewer                                                 */

.module-documentation-viewer {
    padding: 1em;
}

.module-documentation-viewer .md code {
    white-space: pre;
}

.module-documentation-viewer .md table.table tr:nth-child(even) {
    background: unset;
}

.module-documentation-viewer h1 {
    font-size: 200%;
    margin-top: 0;
    margin-bottom: 15px;
}

.module-documentation-viewer h2 {
    font-size: 150%;
    margin-top: 30px;
    margin-bottom: 15px;
}

.module-documentation-viewer h3 {
    font-size: 125%;
    margin-top: 10px;
    margin-bottom: 5px;
}

.module-documentation-viewer h4 {
    font-size: 112%;
    margin-top: 10px;
    margin-bottom: 5px;
}

.module-documentation-viewer h5 {
    font-size: 106%;
    margin-top: 10px;
    margin-bottom: 5px;
}

.module-documentation-viewer h1.markdeep-container .md p {
    margin: 0;
}

/* NOTE(jan): Heading level 1. */
.module-documentation-viewer .markdeep-container-1 .md h1 {
    font-size: 150%;
}

.module-documentation-viewer .markdeep-container-1 .md h2 {
    font-size: 125%;
}

.module-documentation-viewer .markdeep-container-1 .md h3 {
    font-size: 112%;
}

.module-documentation-viewer .markdeep-container-1 .md h4 {
    font-size: 106%;
}

.module-documentation-viewer .markdeep-container-1 .md h5 {
    font-size: 100%;
}

/* NOTE(jan): Heading level 2. */
.module-documentation-viewer .markdeep-container-2 .md h1 {
    font-size: 125%;
}

.module-documentation-viewer .markdeep-container-2 .md h2 {
    font-size: 112%;
}

.module-documentation-viewer .markdeep-container-2 .md h3 {
    font-size: 106%;
}

.module-documentation-viewer .markdeep-container-2 .md h4,
.module-documentation-viewer .markdeep-container-2 .md h5 {
    font-size: 100%;
}

/* NOTE(jan): Heading level 3. */
.module-documentation-viewer .markdeep-container-3 .md h1,
.module-documentation-viewer .markdeep-container-3 .md h2,
.module-documentation-viewer .markdeep-container-3 .md h3,
.module-documentation-viewer .markdeep-container-3 .md h4,
.module-documentation-viewer .markdeep-container-3 .md h5 {
    font-size: 100%;
}

.module-documentation-viewer .module-documentation-inputs-container,
.module-documentation-viewer .module-documentation-outputs-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.module-documentation-viewer .module-documentation-input-container,
.module-documentation-viewer .module-documentation-output-container {
    background-color: #303030;
    border: 1px solid gray;

    padding: 0 1em;

    flex-grow: 1;
    /* min-width: 300px; */

    overflow: auto;
}

.module-documentation-viewer .module-documentation-input-container svg,
.module-documentation-viewer .module-documentation-output-container svg {
    background-color: white;
}

.module-documentation-viewer .module-documentation-schema-input {
    margin-top: 1em;
}

.module-documentation-viewer .module-documentation-schema-input-name {
    color: var(--blue);
    font-weight: bold;

    cursor: pointer;
}

.module-documentation-viewer .module-documentation-schema-input-element-type {
    color: var(--cyan);

    cursor: pointer;
}

.module-documentation-viewer .module-documentation-schema-input-type {
    color: var(--magenta);

    cursor: pointer;
}

.module-documentation-viewer .module-documentation-schema-input-name-type-separator {
    padding-right: 1em;

    cursor: pointer;
}

.module-documentation-viewer .module-documentation-schema-input-toggle {
    cursor: pointer;

    color: var(--base0);

    display: inline-block;
    transform: rotate(180deg);
    transition: transform 0.3s ease;

    position: relative;
    left: -0.25ex;
}

.module-documentation-viewer .module-documentation-schema-input.collapsed .module-documentation-schema-input-toggle {
    transform: rotate(90deg);
}

.module-documentation-viewer .module-documentation-schema-input.collapsed .module-documentation-schema-input-children {
    display: none;
}

/* Module Documentation Viewer                                                 */
/*******************************************************************************

/******************************************************************************************/
/* Highlight.js colours.                                                                  */
/* Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com> */

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #002b36;
  color: #839496;
}

.hljs-comment,
.hljs-quote {
  color: #586e75;
}

/* Solarized Green */
.hljs-keyword,
.hljs-selector-tag,
.hljs-addition {
  color: #859900;
}

/* Solarized Cyan */
.hljs-number,
.hljs-string,
.hljs-meta .hljs-meta-string,
.hljs-literal,
.hljs-doctag,
.hljs-regexp {
  color: #2aa198;
}

/* Solarized Blue */
.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
  color: #268bd2;
}

/* Solarized Yellow */
.hljs-attribute,
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-class .hljs-title,
.hljs-type {
  color: #b58900;
}

/* Solarized Orange */
.hljs-symbol,
.hljs-bullet,
.hljs-subst,
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-link {
  color: #cb4b16;
}

/* Solarized Red */
.hljs-built_in,
.hljs-deletion {
  color: #dc322f;
}

.hljs-formula {
  background: #073642;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

/* \Highlight.js                                                                          */
/******************************************************************************************/

/******************************************************************************************/
/* Autocomplete                                                                           */

.varys-main .autocomplete-options {
    z-index: 200000;
}

/* /Autocomplete                                                                          */
/******************************************************************************************/

/******************************************************************************************/
/* Time Report Widget                                                                     */

.time-report-widget {
    display: flex;
    flex-direction: column;

    padding-left: 1em;
}

.time-report-widget a,
.time-report-widget a:visited {
    color: var(--whispr-dark-blue);
    font-size: 300%;

    margin-bottom: 1em;
}

.time-report-widget a:hover {
    color: var(--whispr-corporate-blue);
}

/* /Time Report Widget                                                                    */
/******************************************************************************************/