h1, h2, h3, h4, h5, h6 {
    font-family: 'Ubuntu', sans-serif;
}
p, div {
    font-family: 'Ubuntu', sans-serif;
}

.lrg-msg {
    text-align: center;
    margin: 20px auto;
}

body .toast-message a {
    text-decoration: underline;
}
body .toast-message a:hover {
    text-decoration: underline;
}

[class^=col], svg {
    /* outline: 1px dotted red; */
}

/* Use all view port space like a native app. */
body.page-list .container {
    /*
    Enable 1080p - 4k monitors; very deep/wide trees.
    - Assume HD+ screens with OS level window manager.
    */
    
    /*
    Override max-width=1140.
    Do not use media query invoked bootstrap grid widths for different viewport sizes.
    @see https://v4-alpha.getbootstrap.com/layout/grid/#grid-options    
    */
    width: 4000px;
    max-width: 100%;

    /* Align to left of window (not center) */
    margin-left: 0;
    margin-right: 0;
}



body.page {
    /*
    Lock tree visual to 1080p resolution (1080x1920), with a 2:1 aspect ratio.
    - Two square contained/circle based trees side by side = 2:1 AR.
    - Simpler to debug/develop without having to consider the responsiveness.
    - In practise responsiveness is not used, min requirements = 1080p resolutions+.
    - "container" bootstrap class has 15px padding both sides.
    */
    /* max-width: 1950px; */
    min-width: 800px;
    font-size: 14px;

    /*
    Allow scrolling the end line to the top of the screen.
    Prevent scroll jumping around when the height of the content changes via hover over.
    */
    margin-bottom: 1080px;
}

.page-home .page-contain {
    margin-top: 80px;
}

button:hover {
    cursor: pointer;
}

.tree-contain{
    margin-top: 40px;
}

.drop-zone {
    border: 2px dashed grey;
    border-radius: 10px;
    height: 100%;
    width: 100%;
}

.node circle {
    stroke: tomato;
    stroke-width: 2px;
    fill: transparent;
}

.node text {
    font-size: 14px;
    pointer-events: none;
}

.node--internal circle {
    fill: transparent;
    stroke: lightgreen;
}

.node--internal text {
}

.link {
    fill: none;
    stroke: #555;
    stroke-opacity: 0.4;
    stroke-width: 1px;
    /*stroke-dasharray: 5 3;*/
}


.path-hover,
.path-clicked {
    stroke: red;
    stroke-opacity: 0.4;
    stroke-width: 8px;
    stroke-dasharray: none;
    transition: stroke-width 50ms;
}


.path-nav-contain {
    position: absolute;
    opacity: .7;
}
.path-nav {
    float: left;
    width: 300px;
}

.path-nav h4 {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

/* Make links clickable for all child elements */
.top .side *:hover .path-nav-contain {
    z-index: 1;
    opacity: 1;
    border-bottom: 2px dashed tomato;
    background: rgba(255, 255, 255, 0.9);
}



.icon-wrap {
    display: inline-block;
}



/* Page: Table */
#min, #max {
    width: 25px;
    font-size: 10px;
}



.page-list .nested-list-contain {
    overflow-y: scroll;
    height: 700px;
    font-size:14px;
    line-height: 16px;
    font-family: 'Droid Sans Mono', monospace;

    /*
    Incrase scroll on large lists from < 30FPS to 30 - 60 FPS.
    - Hints to the browser to place the scroll onto its own layer for GPU acceleration.
    */
    will-change: transform;
}

.nested-list-contain ul:first-child {
    padding-left: 0px;
}
.nested-list-contain ul:first-child {
    /* First node shows below the "Search" action link. */
    margin-top: 10px; 
    margin-bottom: 200px; 
}

.nested-list-contain ul {
    white-space: nowrap;
    list-style-type: none;
    border-left: 1px solid rgba(220, 220, 220, 0.25);
}
.nested-list-contain ul.hover {
    border-left: 1px solid lightgrey;
}

.nested-list-contain svg.icon {
    position: absolute;
    top: 0;
    left: 0;
}

.icon-contain {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height:  8px;
    margin-right: 8px;
}



.node {
    /* position: relative; */
    display: inline-flex;
    align-items: center;
    height: 16px;
}
.node.hasActions {
    /*
    onMouseEnter, onMouseLeave JSX synthetic events do not work well with thin elements.
    - Making the mouse area larger prevents a false mouse out/in toggle.
    */
    position: relative;

    /* Extend mouse over area to keep showing btns on the right */
    border-right: 10px solid transparent;
}

#side-right .node {
    /* Points on left side of text; clearer/shorter lines. */
    flex-direction: row-reverse;
}

.highlight-subtree .isSelectedRoot .node {
    background-color: yellow;
}


.diff .isSelected,
.related-paths-contain .one-node.isSelected .label {
    background-color: yellow;
}

.actions {
    display: inline-flex;
    align-items: baseline;
    margin-right: 4px;
    position: absolute;
    left: calc(100% + 6px);
    background: yellow;
    padding: 4px;
}


.actions button {
    cursor: pointer;
    height: 24px;
    font-size: 18px;
    padding: 0 10px;
    overflow: hidden;
}



.node {
    /* Nodes are "selectable" on click */
    cursor: pointer;
}

.li-desc-target {
    height: 32px;
    border-left: 2px dotted black;
    font-size: 28px;
    list-style-type: none;
}


.points {
    display: inline-flex;
    align-items: center;
}

.points .point, .path .tree-name {
    font-family: Times;   /* Unicode cirlce &#9679; is not center aligned in Droid Sans Mono font. @see https://snag.gy/B5kC19.jpg */
}

.points .point {
    display: inline-block;
    cursor: pointer;
    font-size: 18px;
    

    /* On hover (=enlarge font/icon), keep horizontal line space so that the following elements do not shift. */
    width: 16px;
    text-align: center;
}

.point.unprocessed {
    font-size: 12px;
    /*transform: scale(0.6); slow on scroll, lots of rendering; 10-20FPS */
}

.points .point:hover,
.one-node:hover .point {
    /* font-size is alot faster than transform: scale(3) for some reason. */
    font-size: 34px;
}
.point.hover {
    font-size: 34px;
}

.point.originPath {
    color: tomato;
}

.point.equal {
    color: dodgerblue;
}
.point.unprocessed {
    color: grey;
}

.point.copy-animate {
    transform: scale(1.6);
    transition: all 120ms;
}


/* Immutable */
/* .point[data-type="s"] {
    color: indigo;
} */



/*
Using UTF8 symbol, erase right (&#9679;).
Circle point is about 8px in diameter. (-4px === center rotation of arrow on point).
*/
.remove-point {
    font-family: Times;
    position: absolute;
    transform: translateX(-14px) rotate(50deg) translateX(-8px);
    transform-origin: right 50%;
    color: lightgrey;
    background: white;
    opacity: 0;
    font-weight: bold;
    font-size: 20px;
}
.remove-point:hover {
    color: red;
}
.path:hover .remove-point {
    opacity: 0.5;
}
.one-node:hover .remove-point {
    opacity: 1;
}

.related-paths-contain {
    margin-top: 10px;
    margin-bottom: 30px;
}
.node-meta {
    background-color: white;
}

.related-paths-contain h5 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0px;
}

.related-paths-contain .title h5 {
    text-align: center;
}

.related-paths-contain .divider {
    font-style: italic;
    font-size: 12px;
    border-top: 1px dashed grey;
    padding-top: 5px;
    margin-top: 5px;
}

.related-paths-contain .div-bar {
    width: 50%;
}

.node-meta table tr th:first-child {
    width: 100px;
}

.path {
    position: relative; /* Allow z-index. https://stackoverflow.com/questions/7814282/why-is-my-z-index-being-ignored */
    overflow: hidden;
    height: 40px;
}
.path:hover {
    overflow: visible;
    z-index: 1;
    background-color: white;
}
.path:hover + .path {
    opacity: 0.2;
}

.path:last-child {
    overflow: visible;
}


.path .chains {
    position: absolute;
    display: inline-block;
    height: 15px;
    left: 45px;
    line-height: 13px;
    font-size: 10px;
    text-align: center;
    /* outline: 1px solid blue; */
    z-index: 3;
    pointer-events: none;
}
.path .chains .one {
    display: inline-block;
    border-bottom: 2px solid tomato;
    margin-right: 30px;
    color: grey;
    font-style: italic;
    font-family: Times;
}
.path .chains .one:last-child {
    margin-right: 0px;
}

.path .chains .one[data-width="1"] {
    width: calc(30px * 0);
    position: relative;
    left: -0.2em;
}
.path .chains .one[data-width="2"] {
    width: calc(30px * 1);
}

.path .chains .one[data-width="3"] {
    width: calc(30px * 2);
}
.path .chains .one[data-width="4"] {
    width: calc(30px * 3);
}
.path .chains .one[data-width="5"] {
    width: calc(30px * 4);
}
.path .chains .one[data-width="6"] {
    width: calc(30px * 5);
}
.path .chains .one[data-width="7"] {
    width: calc(30px * 6);
}
.path .chains .one[data-width="8"] {
    width: calc(30px * 7);
}
.path .chains .one[data-width="9"] {
    width: calc(30px * 8);
}
.path .chains .one[data-width="10"] {
    width: calc(30px * 9);
}
.path .chains .one[data-width="11"] {
    width: calc(30px * 10);
}
/* @todo create these rules with JS/ calc(attr(data-width)) */


.path .one-node {
    display: flex;
    align-items: center;

    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;

    cursor: pointer;
}
.one-node .point {
    width: 30px;
}
.one-node .label {
    line-height: 20px;
}

.n-path .path {
    display: inline-block;
    float: right;
}

.one-node.tree-name {
    font-style: italic;
    position: relative;
    right: -8px;
}

.one-node:not(.tree-name) {
    transform: rotate(40deg);
}

/* @see https://stackoverflow.com/questions/1703183/css-do-not-wrap-contents-of-div */
.one-node .label {
    position: absolute;
    left: 25px;
    white-space: nowrap;
    font-size: 14px;
    padding-right: 20px;
    background-color: white;
}

.one-node:hover {
    /* Label on top to show cut off words from sibling labels. */
    z-index: 1;
}
.one-node:hover .label {
    text-decoration: underline;
}



.div-bar-contain {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: grey;
}
.div-bar-contain h6 {
    margin: 0;
    font-size: 12px;
}
.div-bar-contain .title {
    /* display: inline-block; */
    margin-right: 5px;
    text-align: right;
}

.div-bar {
    display: inline-flex;
    width: 100%;
}
.div-bar .one {
    display: inline-block;
    height: 4px;
    margin: 15px 0;
    cursor: pointer;
    opacity: 0.7;
}
.div-bar .one:hover {
    opacity: 1;
}


.div-bar .one .text {
    position: relative;
    display: block;
    top: -15px;
    text-align: center;
    font-style: italic;
}



.del-meta {
    font-size: 10px;
}

.drop {
    cursor: pointer;
    font-size: 20px;
    border-radius: 5px;
    text-align: center;
    background: lightgrey;
    font-weight: bold;
    color: white;
    height:  16px;
    width: 16px;
    display: inline-block;
    /* display: none; */
}
.drop-no-wrap, .add-contain {
    opacity: 0.15;
}
.drop-no-wrap:hover, .add-contain:hover {
    opacity: 1;
}

.drop.equal {
    margin-left: 6px;
}
.drop.equal:hover {
    background-color: dodgerblue;
}

.add-contain {
    position: absolute;
    left: -20px;
    height: 16px;
    display: inline-block;
    top: calc(-8px + -5px);
    /* display: none; */
}
.add-contain .circle {
    display: inline-block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;

  border-left: 10px solid transparent;
}
.add-contain .add {
    position: relative;
    top: -2px;
    margin-right: 4px;
}

.add-contain:hover .add {
    background-color: tomato;
}
.add-contain:hover .circle {
    border-left-color: tomato;

}





.empty-actions {
    float: right;
}

/* Show scroll bar one div */
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

.react-tabs [role=tablist] {
    position: absolute;
    top: -40px;
}
.drop-zone-tabs {
    display: inline-block;
    margin: 0 10px;
}


.diff{
    margin-top: 70px;
}

a.lrg-center-action {
    display: block;
    font-size: 48px;
    text-align: center;
}

.process-meta {
    position: absolute;
    top: -50px;
    left: 0;
    display: flex;
    align-items: center;
    margin-left: 10px;
}
.process-meta .div-bar-contain {
    width: 300px;
}

.process-meta .div-bar-contain .one {
    margin-bottom: 0;
}
.process-meta .next-path {
    text-align: center;
    cursor: pointer;
    margin-right: 20px;
}

#side-right .links {
    position: absolute;
    top: 0;
    right: 30px;
}
#side-left .links {
    position: absolute;
    top: 0;
    left: 10px;
}
.links:hover {
    opacity: 1;
    background-color: white;
}
.links {
    opacity: 0.4;
    display: flex;
    flex-direction: column;
}
.secondary {
    display: flex;
    flex-direction: column;
    
    visibility: hidden;
    height: 0;
    opacity: 0;
    transition: visibility 0s, opacity 300ms linear;
}
.links:hover .secondary {
    visibility: visible;
    height: auto;
    opacity: 0.3;
}
.links .secondary:hover {
    opacity: 1;
} 



ul {
    /* outline: 1px dotted grey; */
}
li span {
    /* outline: 1px dotted red; */
}

li {
    /* outline: 1px dotted grey; */
    display:list-item;
    padding: 1px;
    /* white-space: nowrap; */
}
svg.lines {
    /*
    Allow overlaying over HTML.
    Disable pointer-events for all SVG shapes by default to allow the lower HTML layers to handle pointer-events.
    */
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
/*     outline: 1px dashed blue; */

    /* Match the padding of the side-left and side-right bootstrap cols so that the SVG lines attach to the HTML points */
    padding-left: 15px;
    padding-right: 15px;
}

svg.top {
    z-index: 1;
}

svg .hide {
    visibility: hidden;
}

svg .show {
    visibility: visible;
}

svg .lines path {
    pointer-events: visible;
    stroke-width: 2;
    opacity: 0.6;
}

svg .lines path[data-type="originPath"] {
    stroke: tomato;
}

svg .lines path[data-type="equal"] {
    stroke: dodgerblue;
}


svg .lines path:hover,
svg .lines path[data-path].hover {
    cursor: pointer;
    stroke-width: 6;
}
svg .lines path:not(.hover) {
    opacity: 0.25;
}

/* .page-search */
input {
    font-family: Ubuntu;
}
.fix-top{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}

input.top-bar {
    border: none;
    border-bottom: 1px solid lightgrey;
    width: 100%;
    padding: 20px;
    font-size: 18px;
    outline: none;
}
.path-input {
    width: 100%;
    display: block;
    border: none;
    outline: none;
    padding: 0 20px;
    color: grey;
}
.path-input:hover {
    color: black;
}
.path-input::-webkit-input-placeholder{
    font-style: italic;
    font-size: 12px;
    color: lightgrey;
}

.page-search .results {
    display: flex;

    /* Clear fixed top bar */
    margin-top: 110px; 
}
.page-search .results .one-level {
    border-left: 1px solid lightgrey;
    padding: 10px;
}
.page-search .results .one-level h5 {
    display: inline-block;
    margin-right: 10px;
}
.page-search .count {
    font-size: 12px;
    font-style: italic;
    font-family: Times;
}
.page-search .fix-top .count {
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px;
}


.page-search .results .one-level > ul {
    padding: 0;
    padding-left: 20px;

}
.page-search .results .one-level > ul li {
    margin: 0;
    padding: 0;
    line-height: 18px;
    cursor: pointer;
}
 
li.isAncest,
li.isDesc {
    background-color: lightyellow;
}

.page-search .results .one-level > ul li:hover,
li.isEq,
li.hover-ancest {
    background-color: yellow;
}
li.hover-ancest {
    transition: all 250ms;
}


.license .card .card-footer .btn {
    width: 100%;
    text-transform: uppercase;
    margin-top: 5px;
}
.license .plan, .license .price {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
}
.license .plan small {
    font-size: 12px;
    font-weight: normal;
    color: grey;
}


.license .icon-current {
    position: absolute;
    top: -20px;
    left: -15px;
    background-color: white;
}
.license .icon-current .icon-wrap > svg {
    width: 40px;
    height: 40px;
    color: #00E676;
}

.projects > table {
}

.intro button {
    margin: 20px auto 40px auto;
    font-size: 32px;
}

.intro ul {
    font-size: 18px;
}