/**
 * @license BSD
 * @copyright 2014-2023 hizzgdev@163.com
 * 
 * Project Home:
 *   https://github.com/hizzgdev/jsmind/
 */

/* https://colors.artyclick.com/contrast-color-finder/ */

/* important section */
.jsmind-inner {
    position: relative;
    overflow: auto;
    width: 100%;
    height: 100%;
    outline: none;
}

/*box-shadow:0 0 2px #000;*/
.jsmind-inner {
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.jsmind-inner canvas {
    position: absolute;
}

/* z-index:1 */
svg.jsmind {
    position: absolute;
    z-index: 1;
}

canvas.jsmind {
    position: absolute;
    z-index: 1;
}

/* z-index:2 */
jmnodes {
    position: absolute;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0);
}

/*background color is necessary*/
jmnode {
    position: absolute;
    cursor: default;
    /* max-width: 400px; */
    padding: 10px;
    border-radius: 5px;
    box-shadow: 1px 1px 1px #666;
    font: 16px/1.125 Verdana, Arial, Helvetica, sans-serif;
}

jmnode>.jmnode-bg {
    border-radius: 5px;
    /* background-color: white; */
    /* color: black; */
}



jmexpander {
    position: absolute;
    width: 11px;
    height: 11px;
    display: block;
    overflow: hidden;
    line-height: 12px;
    font-size: 12px;
    text-align: center;
    border-radius: 6px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
}

.jmnode-overflow-wrap jmnodes {
    min-width: 420px;
}

.jmnode-overflow {
    overflow: hidden;
}

.NOjmnode-overflow-hidden jmnode {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.jmnode-overflow-cont {
    overflow: hidden;
}



/* default theme, danger */
jmnodes jmnode {
    color: #fff;
    color: #999;
    background-color: currentColor;
    border-color: currentColor;
}

jmnodes jmnode .jmnode-bg {
    background-color: black;
}

jmnodes jmnode:hover .jmnode-bg {
    box-shadow: 2px 2px 8px #000 !important;
    background-color: #ebebeb;
    color: #333;
}

jmnode.selected {
    /* background-color: #11f; */
    /* color: #fff; */
    box-shadow: 2px 2px 8px #000;
}



jmnode.root {
    font-size: 24px;
}

/*
jmnode.root:hover::before {
    content: "";
    height: 100%;
    background-color: red;
    position: absolute;
    left: -20px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    width: 20px;
    height: 20px;
}

jmnode.root:hover::after {
    content: "";
    height: 100%;
    background-color: red;
    position: absolute;
    right: -20px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    width: 20px;
    height: 20px;
}
*/

jmexpander {
    border-color: gray;
}

jmexpander:hover {
    border-color: #000;
}

@media screen and (max-device-width: 1024px) {
    jmnode {
        padding: 5px;
        border-radius: 3px;
        font-size: 14px;
    }

    jmnode.root {
        font-size: 21px;
    }
}

/* primary theme */
jmnodes.theme-primary jmnode {
    color: #fff;
    color: #000;
}

jmnodes.theme-primary jmnode .jmnode-bg {
    background-color: #428bca;
}


/*
jmnodes.theme-primary jmnode.root {}
jmnodes.theme-primary jmexpander {}
jmnodes.theme-primary jmexpander:hover {}
*/

/* warning theme */
jmnodes.theme-warning jmnode {
    color: darkred;
}

jmnodes.theme-warning jmnode .jmnode-bg {
    background-color: #f0ad4e;
}

/*
jmnodes.theme-warning jmnode.root {}
jmnodes.theme-warning jmexpander {}
jmnodes.theme-warning jmexpander:hover {}
*/

/* danger theme */
jmnodes.theme-danger jmnode {
    color: #fff;
}

jmnodes.theme-danger jmnode .jmnode-bg {
    background-color: #d9534f;
}


/*
jmnodes.theme-danger jmnode.root {}
jmnodes.theme-danger jmexpander {}
jmnodes.theme-danger jmexpander:hover {}
*/

/* success theme */
jmnodes.theme-success jmnode {
    color: #000;
}

jmnodes.theme-success jmnode .jmnode-bg {
    background-color: #5cb85c;
}

/*
jmnodes.theme-success jmnode.root {}
jmnodes.theme-success jmexpander {}
jmnodes.theme-success jmexpander:hover {}
*/

/* info theme */
jmnodes.theme-info jmnode {
    color: #000;
}

jmnodes.theme-info jmnode .jmnode-bg {
    background-color: #5dc0de;
}


/*
jmnodes.theme-info jmnode.root {}
jmnodes.theme-info jmexpander {}
jmnodes.theme-info jmexpander:hover {}
*/

/* greensea theme */
jmnodes.theme-greensea jmnode {
    color: #000;
}

jmnodes.theme-greensea jmnode .jmnode-bg {
    background-color: #1abc9c;
}



/*
jmnodes.theme-greensea jmnode.root {}
jmnodes.theme-greensea jmexpander {}
jmnodes.theme-greensea jmexpander:hover {}
*/

/* nephrite theme */
jmnodes.theme-nephrite jmnode {
    color: #000;
}

jmnodes.theme-nephrite jmnode .jmnode-bg {
    background-color: #2ecc71;
}



/*
jmnodes.theme-nephrite jmnode.root {}
jmnodes.theme-nephrite jmexpander {}
jmnodes.theme-nephrite jmexpander:hover {}
*/

/* belizehole theme */
jmnodes.theme-belizehole jmnode {
    color: #fff;
}

jmnodes.theme-belizehole jmnode .jmnode-bg {
    background-color: #3498db;
}



/*
jmnodes.theme-belizehole jmnode.root {}
jmnodes.theme-belizehole jmexpander {}
jmnodes.theme-belizehole jmexpander:hover {}
*/

/* wisteria theme */
jmnodes.theme-wisteria jmnode {
    color: #fff;
}

jmnodes.theme-wisteria jmnode .jmnode-bg {
    background-color: #9b59b6;
}



/*
jmnodes.theme-wisteria jmnode.root {}
jmnodes.theme-wisteria jmexpander {}
jmnodes.theme-wisteria jmexpander:hover {}
*/

/* asphalt theme */
jmnodes.theme-asphalt jmnode {
    color: #fff;
}

jmnodes.theme-asphalt jmnode .jmnode-bg {
    background-color: #34495e;
}



/*
jmnodes.theme-asphalt jmnode.root {}
jmnodes.theme-asphalt jmexpander {}
jmnodes.theme-asphalt jmexpander:hover {}
*/



/* orange theme */
jmnodes.theme-orange jmnode {
    color: #4b1e83;
}

jmnodes.theme-orange jmnode .jmnode-bg {
    background-color: #f1c40f;
}



/*
jmnodes.theme-orange jmnode.root {}
jmnodes.theme-orange jmexpander {}
jmnodes.theme-orange jmexpander:hover {}
*/



/* pumpkin theme */
jmnodes.theme-pumpkin jmnode {
    color: #000;
}

jmnodes.theme-pumpkin jmnode .jmnode-bg {
    background-color: #e67e22;
}



/*
jmnodes.theme-pumpkin jmnode.root {}
jmnodes.theme-pumpkin jmexpander {}
jmnodes.theme-pumpkin jmexpander:hover {}
*/

/* pomegranate theme */
jmnodes.theme-pomegranate jmnode {
    color: #fff;
}

jmnodes.theme-pomegranate jmnode .jmnode-bg {
    background-color: #e74c3c;
}


/*
jmnodes.theme-pomegranate jmnode.root {}
jmnodes.theme-pomegranate jmexpander {}
jmnodes.theme-pomegranate jmexpander:hover {}
*/

/* clouds theme */
jmnodes.theme-clouds jmnode {
    color: #333;
}

jmnodes.theme-clouds jmnode .jmnode-bg {
    background-color: #ecf0f1;
}


/*
jmnodes.theme-clouds jmnode.root {}
jmnodes.theme-clouds jmexpander {}
jmnodes.theme-clouds jmexpander:hover {}
*/

/* asbestos theme */
jmnodes.theme-asbestos jmnode {
    color: #000;
}

jmnodes.theme-asbestos jmnode .jmnode-bg {
    background-color: #95a5a6;
}


/*
jmnodes.theme-asbestos jmnode.root {}
jmnodes.theme-asbestos jmexpander {}
jmnodes.theme-asbestos jmexpander:hover {}
*/

/* From fc4i.css */
jmnodes jmnode {
    padding: 10px;
    max-width: 150px;
    max-height: 94px;
    /* Try to handle overlfow in .jmnode-text */
    display: grid;
    grid-template-rows: 1fr;
    width: max-content;
}

jmnodes jmnode.root {
    max-height: 150px;
}

/*
jmnodes jmnode.text-overflow div.jmnode-text {
    NObackground-color: cyan;
}
*/

jmnodes jmnode div.jmnode-overflow-indicator {
    position: absolute;
    bottom: 0;
    right: 40px;
    background-color: deepskyblue;
    line-height: 80%;
    padding: 0;
    font-size: 12px;
    border-radius: 4px;
    padding: 2px;
    display: none;
}

jmnodes jmnode.text-overflow div.jmnode-overflow-indicator {
    display: unset;
}

jmnodes jmnode .jmnode-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    background-repeat: no-repeat;
    background-size: cover;
    /* background-color: green; */
}

/*
jmnodes jmnode .jmnode-bg:not([class*='jsmind-shape-']) {
    NObackground-color: transparent;
}
*/

/* .jsmind_container jmnodes jmnode .jmnode-text { */
jmnodes jmnode .jmnode-text {
    position: relative;
    /* Otherwise it will be behind jmnode-bg??? */
    padding: 0px;
    height: 100%;

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

    /* https://blog.logrocket.com/guide-css-word-wrap-overflow-wrap-word-break/ */

    /*
        - white-space: initial; causes the root node to be out of place???
        - Also setting overflow-wrap: anywhere causes the root to be much more out of place.
        - Setting white-space this way seems to set white-space-collapse,
          which is marked as "experimental".
          https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
          https://developer.mozilla.org/en-US/docs/Web/CSS/white-space-collapse (experimental 2023-11)
          https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap (experimental 2023-11)
        - white-space: normal; shows the same problem as "inital".
        - white-space: nowrap; makes averything ok.
        - white-space: break-spaces; shows the same problem as "initial".
    */
    overflow-wrap: anywhere !important;
    overflow: hidden !important;
    /*
    white-space: initial;
    white-space: normal;
    white-space: nowrap;
    white-space: break-spaces;
    */
    /* Since white-space is a shorthand for white-space-collapse and text-wrap try them one by one: */
    text-wrap: wrap !important;

    /*
    NOoverflow: hidden;
    NOtext-overflow: ellipsis;
    NOposition: absolute;
    NOtop: 0;
    NOleft: 0;
    NObottom: 0;
    NOright: 0;
    NO-webkit-text-stroke: 1px green;
    */
    outline: 1px dashed red;
    /* black does not work??? */
    /* text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black, 0 0 2px black; */
    -webkit-text-stroke: 0.3px black;
}

/* .jsmind_container jmnodes jmnode[nodeid='root'] { */
/*
.jsmind_container jmnodes jmnode.root {
    overflow: hidden;
    overflow: visible;
    for the wavy to be visible
}
*/

.jsmind_container jmnodes jmnode.root div.jmnode-text {
    /* text-decoration: wavy underline; */
    /* text-underline-position: under; */
    /* line-height: 2; */
    /* for the wavy to be visible */
    /* border-bottom: 14px double currentColor; */
    border-bottom: 4px solid currentColor;
    margin-bottom: 4px;
    font-size: 32px;
}

/* https://css-tricks.com/almanac/properties/t/touch-action/ */
jmnodes {
    touch-action: manipulation;
}



/********************/
/* Dragging */

.jsmind-inner {
    --shsize: 20px;
    --shup: 0px;
}

/*
  :hover is not set for dragging 
  And there seems to be a bug in Android on Pixel 7:
  https: //bugs.chromium.org/p/chromium/issues/detail?id=1384181#c11
*/



/* jsmind-drag-* moved to mm4i.html for debugging */

#jsmind-drag-status {
    position: fixed;
    top: 0;
    left: 0;
    font-size: 15px;
    display: none;
    z-index: 1000;
}

#jsmind-drag-status>div {
    background-color: orange;
    color: black;
    border: 1px solid black;
    padding: 2px;
}