div.methods-map {
    display: inline-block;
    /*display: block;*/
    position: relative;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

svg#methods_map.hidden {
    display: none;
}
svg#methods_map {
    font-size: 14px;
    font-family: Arial, SansSerif, sans-serif;
    /*display: inline-block;*/
    display: block;
    width: 100%;
    height: 100%;
    /*min-height: 500px;*/
}
text {
    cursor: default;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
text.child, circle.child, text.parent, circle.parent, text.sibling, circle.sibling, #history g circle, #history g text, #definition_xlink tspan, #view_more_rect {
    cursor: pointer;
}
text#definition_link {
    font-style: normal;
    font-weight: bold;
    line-height: 125%;
    font-family: sans-serif;
    letter-spacing: 0px;
    word-spacing: 0px;
    text-anchor: middle;
    fill0: #0000ff;
    fill: #006ACC;
    fill-opacity: 1;
    stroke: none;
    stroke-width: 1px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-opacity: 1;
}
line.term-bubble-connector {
    display: none;
}
text.centered {
    text-anchor: middle;
}
text#definition_text {
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: 125%;
    font-family: sans-serif;
    letter-spacing: 0px;
    word-spacing: 0px;
    fill: #000000;
    fill-opacity: 1;
    stroke: none;
    stroke-width: 1px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-opacity: 1;
}
text#definition_header {
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: 125%;
    font-family: sans-serif;
    letter-spacing: 0px;
    word-spacing: 0px;
    text-anchor: middle;
    fill0: #008000;
    fill: #008563;
    fill-opacity: 1;
    stroke: none;
    stroke-width: 1px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-opacity: 1;
}
text#definition_term {
    font-size: 19px;
    font-style: normal;
    font-weight: normal;
    line-height: 125%;
    font-family: sans-serif;
    letter-spacing: 0px;
    word-spacing: 0px;
    text-anchor: middle;
    fill0: #008000;
    fill: #008563;
    fill-opacity: 1;
    stroke: none;
    stroke-width: 1px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-opacity: 1;
}
.circle-text {
    text-anchor: middle;
}
text#click_for_more {
    font-size: 48px;
}
g#history > text {
    font-size: 24px; /* adjust this scale(2) to match other scale(3), 16/.6667 */
    font-style: normal;
    font-weight: normal;
    line-height: 125%;
    letter-spacing: 0px;
    word-spacing: 0px;
    fill: #333333;
    fill-opacity: 1;
    stroke: none;
    stroke-width: 1px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-opacity: 1;
}
g#history .node > a > text {
    font-style: normal;
    font-weight: normal;
    line-height: 125%;
    letter-spacing: 0px;
    word-spacing: 0px;
    text-anchor: middle;
    fill: #333333;
    fill-opacity: 1;
    stroke: none;
    stroke-width: 1px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-opacity: 1;
}
g#main > g.circle-group > text {
    font-weight: bold;
    font-family: sans-serif;
    text-anchor: middle;
    fill: #ffffff;
}
/* hidden */
svg .hidden {
    display: none;
    -webkit-transition: display 1s ease-in;
    transition: display 1s ease-in;
}
svg .invisible {
    visibility: hidden;
}
g#broader, g#narrower, g#related {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
g.hidden-bubble {
    pointer-events: none;
    cursor: default;
    opacity: 0 !important;
    -webkit-transition: opacity 1s ease-in !important;
    transition: opacity 1s ease-in !important;
}
.node-ring, .text-ring {
    fill: transparent;
    stroke: transparent;
    stroke: yellow;
    stroke-width: 2px;
}
/*.node-gradient {*/
/*fill: #ffffff;*/
/*stroke: yellow;*/
/*mask: url(#node_gradient_mask);*/
/*}*/
.bubble .circle-text {
    font-size: 16px;
}
svg.mobile .bubble .circle-text {
    font-size: 22px;
}
svg.mobile .bubble.selected .circle-text {
    font-size: 16px;
}
/* main */
svg.expanded g#main {
    cursor: pointer;
}
g#main text {
    pointer-events: none;
}
#main > g.circle-group > text {
    fill: #8c379e;
    font-weight: bold;
    pointer-events: none;
}
#main.hover > g.circle-group > text, svg.expanded #broader > g.circle-group > text, #broader.selected > g.circle-group > text {
    fill: #ffffff;
}
#main_circle {
    fill0: #2d8719;
    stroke0: #499e37;
    fill: rgb(0, 103, 77);
    stroke: rgb(0, 133, 99);
    stroke-width: 12px;
}
/* NOTE: id overwritten by json id */
#main_circle_text {
    /*font-size: 16px;*/
    font-family: sans-serif;
    /* fill: #2d8719; */
}
/* definition */
#definition > line {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
svg.expanded #definition > line {
    opacity: 0;
}
/* view more */
#view_more {
    opacity: 0;
    -webkit-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#view_more.active {
    opacity: 1;
}
svg.expanded #view_more.active {
    opacity: 0;
}
#view_more_text {
    pointer-events: none;
    font-style: normal;
    font-weight: normal;
    font-size: 40px;
    line-height: 125%;
    font-family: sans-serif;
    letter-spacing: 0px;
    word-spacing: 0px;
    fill0: #8b0000;
    fill: #97267e;
    fill-opacity: 1;
    stroke: none;
    stroke-width: 1px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-opacity: 1
}
#view_more_rect {
    opacity: 1;
    fill0: #f2f2f2;
    fill: #ffffff;
    fill-opacity: 1;
    stroke0: #8b0000;
    stroke: #97267e;
    stroke-width: 1.37039423;
    stroke-linecap: butt;
    stroke-linejoin: round;
    stroke-miterlimit: 4;
    stroke-dasharray: none;
    stroke-opacity: 1;
}
#view_more_rect:hover {
    fill: #f4e9f2;
}
#view_more_line {
    stroke0: #a31850;
    stroke:rgb(115, 24, 95);
    stroke-width: 1px;
    opacity: .5;
}
/* back */
#back {
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
svg.expanded #back {
    opacity: 1;
    pointer-events: all;
    -webkit-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
#back_rect {
    cursor: pointer;
    opacity: 1;
    fill0: #f2f2f2;
    fill: #ffffff;
    fill-opacity: 1;
    stroke0: #8b0000;
    stroke: #97267e;
    stroke-width: 1.37039423;
    stroke-linecap: butt;
    stroke-linejoin: round;
    stroke-miterlimit: 4;
    stroke-dasharray: none;
    stroke-opacity: 1
}
#back_rect:hover {
    fill: #f4e9f2;
}
#back_text {
    pointer-events: none;
    font-style: normal;
    font-weight: normal;
    font-size: 40px;
    line-height: 125%;
    font-family: sans-serif;
    letter-spacing: 0px;
    word-spacing: 0px;
    fill0: #8b0000;
    fill: #97267e;
    fill-opacity: 1;
    stroke: none;
    stroke-width: 1px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-opacity: 1
}
#back_line {
    stroke0: #a31850;
    stroke:rgb(115, 24, 95);
    stroke-width: 1px;
    opacity: .5;
}
/* main line */
#main_line {
    stroke0: #009933;
    stroke: rgb(0, 133, 99);
}
/* broader */
#broader > g.circle-group > circle, svg.expanded #broader.inactive > g.circle-group > circle {
    fill0: #ffffff !important;
    fill: rgb(233, 252, 255) !important;
    stroke-width: 3px;
    cursor: pointer;
}
#broader.hover > g.circle-group > circle, svg.expanded #broader > g.circle-group > circle, #broader.selected > g.circle-group > circle, svg.mobile #broader.selected g.mobile-node-box > circle {
    fill0: #6a0c7e !important;
    fill: rgb(0, 100, 117) !important;
    stroke-width: 7px;
}
#broader > g.circle-group > text {
    fill0: #8c379e;
    fill: #333;
    font-weight: bold;
    pointer-events: none;
}
#broader.hover > g.circle-group > text, svg.expanded #broader > g.circle-group > text, #broader.selected > g.circle-group > text {
    fill0: #ffffff;
    fill: rgb(233, 252, 255);
}
#broader_circle {
    fill0: #ffffff;
    fill: rgb(233, 252, 255);
    stroke0: #8c379e;
    stroke: rgb(102, 180, 194);
    stroke-width: 2px;
}
#broader_circle_text {
    /*font-size: 16px;*/
    font-family: sans-serif;
    /* fill: #8c379e; */
}
.broader-child .node circle.parent {
    fill0: #8c379e;
    fill: rgb(0, 100, 117);
}
.broader-child .node.hover circle.parent {
}
.broader-child .node.hover text.parent {
    text-decoration: underline;
}
.broader-child text.parent tspan {
    /*alignment-baseline: middle;*/
    alignment-baseline: central;
    font-size: 13px;
}
.broader-child .node line.parent {
    stroke: #cccccc;
    stroke-width: 1px;
}
/* related */
#related > g.circle-group > circle, svg.expanded #related.inactive > g.circle-group > circle {
    fill0: #ffffff !important;
    fill: rgb(235, 243, 244) !important;
    stroke-width: 3px;
    cursor: pointer;
}
#related.hover > g.circle-group > circle, svg.expanded #related > g.circle-group > circle, #related.selected > g.circle-group > circle, svg.mobile #related.selected g.mobile-node-box > circle {
    fill0: #195e8c !important;
    fill: rgb(0, 79, 92) !important;
    stroke-width: 7px;
}
#related > g.circle-group > text {
    fill0: #2a7ab0;
    fill: rgb(0, 79, 92);
    font-weight: bold;
    pointer-events: none;
}
#related.hover > g.circle-group > text, svg.expanded #related > g.circle-group > text, #related.selected > g.circle-group > text {
    fill: #ffffff;
}
#related_circle {
    /* fill: #ffffff; */
    stroke0: #2a7ab0;
    stroke: rgb(0, 100, 117);
    stroke-width: 2px;
}
#related_circle_text {
    /*font-size: 16px;*/
    font-family: sans-serif;
    fill0: #2a7ab0;
    fill: #333;
}
.related-child .node circle.sibling {
    fill0: #2a7ab0;
    fill: rgb(0, 79, 92);
}
.related-child .node.hover circle.sibling {
    /*fill: yellow;*/
}
.related-child .node.hover text.sibling {
    text-decoration: underline;
    /*fill: #195e8c;*/
}
.related-child text.sibling tspan {
    /*alignment-baseline: middle;*/
    alignment-baseline: central;
    font-size: 13px;
    /*fill: #006acc;*/
}
.related-child .node line.sibling {
    /*stroke: #2a7ab0;*/
    stroke: #cccccc;
    stroke-width: 1px;
}
/* narrower */
#narrower > g.circle-group > circle, svg.expanded #narrower.inactive > g.circle-group > circle {
    fill0: #ffffff !important;
    fill: rgb(244, 233, 242) !important;
    stroke-width: 3px;
    cursor: pointer;
}
#narrower.hover > g.circle-group > circle, svg.expanded #narrower > g.circle-group > circle, #narrower.selected > g.circle-group > circle, svg.mobile #narrower.selected g.mobile-node-box > circle {
    fill0: #87073b !important;
    fill: rgb(115, 24, 95) !important;
    stroke-width: 7px;
}
#narrower > g.circle-group > text {
    fill0: #a31850;
    fill: rgb(115, 24, 95);
    font-weight: bold;
    pointer-events: none;
}
#narrower.hover > g.circle-group > text, svg.expanded #narrower > g.circle-group > text, #narrower.selected > g.circle-group > text {
    fill: #ffffff;
}
#narrower_circle {
    fill0: #ffffff;
    fill: rgb(115, 24, 95);
    stroke0: #a31850;
    stroke: rgb(151, 38, 126);
    stroke-width: 2px;
}
#narrower_circle_text {
    /*font-size: 16px;*/
    font-family: sans-serif;
    fill0: #a31850;
    fill: #333;
}
.narrower-child .node circle.child {
    fill0: #a31850;
    fill: rgb(115, 24, 95);
}
.narrower-child .node.hover circle.child {
    /*fill: yellow;*/
}
.narrower-child .node.hover text.child {
    text-decoration: underline;
    /*fill: #87073b;*/
}
.narrower-child text.child tspan {
    /*alignment-baseline: middle;*/
    alignment-baseline: central;
    font-size: 13px;
    /*fill: #006acc;*/
}
.narrower-child .node line.child {
    /*stroke: #a31850;*/
    stroke: #cccccc;
    stroke-width: 1px;
}
/* history */
#history .node > circle {
    fill: #ffffff;
    stroke0: #a31850;
    stroke: rgb(151, 38, 126);
}
#history .node a:focus + circle {
    /* fill: rgb(115, 24, 95); */
}
#history .node.hover > circle {
    fill0: #a31850;
    fill: rgb(115, 24, 95);
}
#history .node.hover > text > tspan {
    /*fill: #ffffff;*/
    text-decoration: underline;
}
#history .history-line {
    fill:none;
    stroke:#cccccc;
    stroke-width:1px;
}
/* inactive */
.inactive {
    pointer-events: none;
}
.inactive .circle {
    stroke: #cccccc !important;
    fill: white !important;
}
.inactive .circle-text {
    fill: #cccccc !important;
}
.inactive circle.child, .inactive circle.parent, .inactive circle.sibling {
    fill: #cccccc !important;
}
.inactive text.child, .inactive text.parent, .inactive text.sibling {
    fill: #cccccc !important;
}
.inactive line.child, .inactive line.parent, .inactive line.sibling {
    stroke: #cccccc !important;
}
/* responsive */
/* desktop */
svg.desktop.expanded #narrower.expanded .narrower-child {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
svg.desktop .narrower-child {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
svg.desktop.expanded #broader.expanded .broader-child {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
svg.desktop .broader-child {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
svg.desktop.expanded #related.expanded .related-child {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
    pointer-events: all;
}
svg.desktop .related-child {
    opacity: 0;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
    pointer-events: none;
}
svg.desktop.expanded #main_line {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
svg.desktop #main_line {
    opacity: 0;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
/* tablet */
svg.tablet.expanded #narrower.expanded .narrower-child {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
svg.tablet .narrower-child {
    opacity: 0;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
svg.tablet.expanded #broader.expanded .broader-child {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
svg.tablet .broader-child {
    opacity: 0;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
svg.tablet.expanded #related.expanded .related-child {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
    pointer-events: all;
}
svg.tablet .related-child {
    opacity: 0;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
svg.tablet.expanded #main_line {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
svg.tablet #main_line {
    opacity: 0;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
/* mobile */
svg.mobile #narrower .narrower-child {
    opacity: 0;
    pointer-events: none;
    /*transition: opacity 1s ease-in;*/
    display: none;
}
svg.mobile #narrower.selected .narrower-child {
    opacity: 1;
    pointer-events: all;
    /*transition: opacity 1s ease-in;*/
    /*display: inline-block;*/
    display: block;
}
svg.mobile #broader .broader-child {
    opacity: 0;
    pointer-events: none;
    /*transition: opacity 1s ease-in;*/
    display: none;
}
svg.mobile #broader.selected .broader-child {
    opacity: 1;
    pointer-events: all;
    /*transition: opacity 1s ease-in;*/
    /*display: inline-block;*/
    display: block;
}
svg.mobile #related .related-child {
    opacity: 0;
    pointer-events: none;
    /*transition: opacity 1s ease-in;*/
    display: none;
}
svg.mobile #related.selected .related-child {
    opacity: 1;
    pointer-events: all;
    /*transition: opacity 1s ease-in;*/
    /*display: inline-block;*/
    display: block;
}
svg.mobile g.mobile-node-box > path {
    opacity: 0;
    pointer-events: none;
    display: none;
}
svg.mobile g.bubble g.mobile-node-box > circle {
    opacity: 0;
    pointer-events: none;
    display: none;
}
svg.mobile g.bubble.selected g.mobile-node-box > circle {
    opacity: 1;
    pointer-events: all;
    display: block;
}
svg.mobile #related.selected g.mobile-node-box > path {
    opacity: 1;
    /*transition: opacity 1s ease-in;*/
    /*display: inline-block;*/
    display: block;
}
svg.mobile #broader.selected g.mobile-node-box > path {
    opacity: 1;
    /*transition: opacity 1s ease-in;*/
    /*display: inline-block;*/
    display: block;
}
svg.mobile #narrower.selected g.mobile-node-box > path {
    opacity: 1;
    /*transition: opacity 1s ease-in;*/
    /*display: inline-block;*/
    display: block;
}
svg.mobile #main_line {
    opacity: 0;
    /*transition: opacity 1s ease-in;*/
}
svg.mobile #narrower .narrower-child .node > text tspan,
svg.mobile #broader .broader-child .node > text tspan,
svg.mobile #related .related-child .node > text tspan {
    font-size: 19px;
    fill: #333333;
}
svg.mobile text#definition_text {
    fill: #333333;
}
svg.mobile #history_title {
    font-size: 25px;
    fill: #333333;
}
div.accessible-methods-map.hidden, div.accessible-methods-map .hidden {
    display: none;
}
div.accessible-methods-map {
    background-color: white;
    /*width: 100%;*/
    padding: 50px 150px 50px 150px;
    /*font-size: 12px;*/
    font-family: Arial, SansSerif, sans-serif;
    text-align: center;
    /*display: flex;*/
    /*flex-direction: column;*/
    min-width: 535px;
}
div.accessible-definition {
    border: 3px #006400 solid;
    padding: 35px;
}
div.accessible-definition-name, div.accessible-bubble-title {
    font-size: 18px;
    color: #008000;
}
div.accessible-definition-text {
    margin-top: 10px;
}
div.accessible-definition-link {
    margin-top: 10px;
}
div.accessible-definition-link > a {
    font-weight: bold;
    text-decoration: none;
}
div.accessible-bubbles {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -ms-flex-line-pack: stretch;
        align-content: stretch;
    margin-bottom: 35px;
}
div.accessible-bubble {
    border: 3px #006400 solid;
    padding: 30px;
    -ms-flex-preferred-size: 30%;
        flex-basis: 30%;
}
div.accessible-terms {
    margin-top: 15px;
}
div.accessible-term {
    margin-top: 5px;
}
div.accessible-term > a {
    text-decoration: none;
}
div.accessible-term > a:hover {
    text-decoration: underline;
}
.toggle-accessibility-mode > a {
    border: solid #339933 2px;
    border-radius: 10px;
    background-color: white;
    color: #2E872E;
    /*font-size: 23px;*/
    font-weight: bold;
    vertical-align: middle;
    padding: 4px 10px;
    /*line-height: 1.4286;*/
    margin: 0 4px 0 0;
    text-decoration: none;
}
.toggle-accessibility-mode > a:hover {
    background-color: #339933;
    color: white;
}
.accessible-definition-bubbles-connector-wrapper {
    margin-top: 21px;
}
.accessible-definition-bubbles-connector {
    border-right: solid #339933 3px;
    width: 1px;
    height: 10px;
}
.arrow-box {
	position: relative;
	background: #ffffff;
	border: 3px solid #006400;
}
.arrow-box:after, .arrow-box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow-box:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 20px;
	margin-left: -20px;
}
.arrow-box:before {
	border-color: rgba(0, 100, 0, 0);
	border-top-color: #006400;
	border-width: 24px;
	margin-left: -24px;
}